Skip to main content
Glama

design_doc

Extract design tokens and generate structured documentation from any public website URL. Analyze CSS properties to create a comprehensive DESIGN.md file or return raw token 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

TableJSON Schema
NameRequiredDescriptionDefault
urlYesFully-qualified public URL to extract design tokens from (e.g. 'https://stripe.com', 'https://linear.app'). Must be accessible without authentication.
rawNoIf 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.
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes what the tool does (scrapes HTML/CSS, extracts design tokens, uses Claude for synthesis), error conditions (unreachable URL, missing API key), and two distinct success behaviors (DESIGN.md vs JSON output). It could be more explicit about rate limits or performance characteristics.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections: purpose, prerequisites, success behaviors, error handling, and usage scenarios. While comprehensive, some sentences could be more concise (e.g., the first sentence is quite long). Overall, most content earns its place by providing essential context not available elsewhere.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with no annotations and no output schema, the description provides substantial context about behavior, prerequisites, and outputs. It clearly explains the two return formats and error conditions. The main gap is the lack of explicit output schema documentation, but the description compensates reasonably well given the complexity of the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 100% schema description coverage, the baseline is 3. The description adds significant value by explaining the practical implications of the 'raw' parameter: when raw=false returns an AI-synthesized DESIGN.md (requiring API key), when raw=true returns structured JSON data (useful without API key). It also reinforces the URL accessibility requirement mentioned in the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with specific verbs ('scrape', 'extract', 'fetch', 'parse', 'synthesize') and resources ('public URL', 'design system', 'DESIGN.md document'). It distinguishes itself from siblings like 'get_tokens' or 'pull_design_system' by emphasizing AI synthesis and structured documentation output.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit guidance on when to use this tool ('to reverse-engineer a competitor's design system', 'to document a client's existing web style guide', 'to extract tokens for comparison') and when to use the raw parameter ('when you want to programmatically process the token data rather than read a document'). It also mentions prerequisites (public URL, ANTHROPIC_API_KEY for AI mode).

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/sarveshsea/m-moire'

If you have feedback or need assistance with the MCP directory API, please join our Discord server