WS WebSketch
GitHub
VS Code Extension

Stop feeding LLMs HTML soup. Speak the language of UI.

Capture any web page as a semantic tree of 23 UI primitives. 200–800 tokens instead of 50,000. Works with ChatGPT, Claude, Gemini — any text model.

Install from Marketplace Read the Handbook

Install

ext install mcp-tool-shop.websketch-vscode

Capture

Ctrl+Shift+P → WebSketch: Capture URL

Output

PAGE ├─ HEADER {sticky} │ ├─ *LINK "Home" │ └─ *BUTTON "Sign Up" └─ SECTION <main> └─ TEXT <h1> "Welcome"

Why WebSketch

Raw HTML drowns LLMs. Screenshots lose structure. WebSketch gives you a clean semantic tree.

200–800 Tokens

Raw HTML runs 50,000+ tokens. WebSketch collapses it to a clean tree — same meaning, 99% fewer tokens.

23 UI Primitives

PAGE, HEADER, NAV, CARD, BUTTON, LINK — a fixed vocabulary LLMs learn once and apply to any site.

4 Export Views

LLM tree, ASCII wireframe, collapsible node tree, raw JSON IR. One capture, four ways to use it.

What You Get

Semantic tree (LLM view)

PAGE
├─ HEADER {sticky}
│  ├─ *LINK "Home"
│  ├─ *LINK "Products"
│  ├─ *LINK "Pricing"
│  └─ *INPUT  "Search..."
├─ SECTION 

│  ├─ TEXT 
 "Welcome to Acme"
│  └─ *BUTTON "Get Started"
├─ LIST (3 items)
│  ├─ CARD
│  ├─ CARD
│  └─ CARD
└─ FOOTER
   └─ NAV
      ├─ *LINK "Terms"
      └─ *LINK "Privacy"

Grammar reference

├─ *BUTTON  {sticky} "Find products"
│    │       │         │         │
│    │       │         │         └─ Visible text
│    │       │         └─ Layout flags
│    │       └─ Semantic hint
│    └─ Interactive (*)
│
└─ Indentation = parent–child

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to access all WebSketch commands.

Command
What it does
WebSketch: Capture URL
Prompt for URL, capture, display in panel
WebSketch: Capture URL from Clipboard
Capture whatever URL is on your clipboard
WebSketch: Copy LLM Tree to Clipboard
One click — paste straight into any LLM
WebSketch: Export LLM Tree
Save as .md for prompt libraries or docs
WebSketch: Export Capture as JSON
Full IR with bboxes, hashes, metadata
WebSketch: Export ASCII Wireframe
Box-drawing spatial layout view

Settings

Configure via VS Code settings (websketch.*).

websketch.chromePath: string

Path to Chrome or Edge executable. Leave empty for auto-detection.

websketch.viewportWidth: number

Viewport width for captures in pixels (default: 1280).

websketch.viewportHeight: number

Viewport height for captures in pixels (default: 800).

websketch.timeout: number

Navigation timeout in milliseconds (default: 30000).

websketch.waitAfterLoad: number

Extra wait after page load for JS rendering in milliseconds (default: 1000).