design_doc
Scrape any public URL to extract its design system tokens into a structured DESIGN.md document, or get raw JSON data for programmatic use.
Instructions
Scrape a public URL and extract its design system as a structured DESIGN.md document.
Fetches the page HTML and all linked stylesheets, parses CSS custom properties, color values, font families, spacing, radii, and shadows, then uses Claude to synthesize a structured DESIGN.md.
Prerequisites: URL must be publicly accessible (no authentication required). ANTHROPIC_API_KEY must be set for AI synthesis mode — use raw=true as a fallback when the key is not available.
Returns on success (raw=false): A full DESIGN.md markdown document with sections: ## Color System, ## Typography, ## Spacing, ## Borders & Surfaces, ## Component Patterns, ## Voice & Tone, ## Do / Don't, ## Tailwind Config Sketch. Values are drawn from the page's actual CSS.
Returns on success (raw=true): JSON object with shape { url, title, tokens: { cssVarCount, colorCount, fontCount, cssVars: Record<string,string>, colors: string[], fonts: string[], fontSizes: string[], spacing: string[], radii: string[], shadows: string[] } }
Error behavior: Returns isError if the URL is unreachable or returns no usable CSS. Returns isError with "ANTHROPIC_API_KEY required" message if AI synthesis is needed but the key is missing.
Use this tool: to reverse-engineer a competitor's or reference site's design system before creating specs, to quickly document a client's existing web style guide, or to extract tokens for comparison with the project's own system. Pass raw=true when you want to programmatically process the token data rather than read a document.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Fully-qualified public URL to extract design tokens from (e.g. 'https://stripe.com', 'https://linear.app'). Must be accessible without authentication. | |
| raw | No | If false (default), returns an AI-synthesized DESIGN.md document (requires ANTHROPIC_API_KEY). If true, returns the raw parsed token data as JSON without calling the AI — useful when ANTHROPIC_API_KEY is unavailable or you want structured data. |