Skip to main content
Glama

design_doc

Extract design tokens (colors, fonts, spacing) from any public URL and receive a synthesized design system document or raw structured token data.

Instructions

Scrape a public URL and extract its design system — parses CSS custom properties, colors, fonts, spacing, radii, shadows; Claude synthesizes a DESIGN.md.

Prereq: publicly accessible URL; ANTHROPIC_API_KEY for synthesis (pass raw=true without it). Returns (raw=false): DESIGN.md with Color System, Typography, Spacing, Borders & Surfaces, Component Patterns, Voice & Tone, Do/Don't, Tailwind Config Sketch. Returns (raw=true): { url, title, tokens: { cssVars, colors, fonts, fontSizes, spacing, radii, shadows, counts } }. Errors: isError if the URL is unreachable/has no usable CSS, or the key is missing in synthesis mode. Use to reverse-engineer a reference site's system or extract tokens for comparison.

Input Schema

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

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

No annotations are provided, so the description carries full burden. It discloses key behaviors: parsing of CSS custom properties, colors, fonts, etc.; two output modes (raw and synthesized); prerequisite of public URL and optional AI key; error conditions (unreachable URL, no usable CSS, missing key). It does not mention rate limits or additional auth, but the core behavior is well-explained.

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 multi-sentence but each sentence serves a purpose: main action, prerequisites, return formats, errors, and use case. It is front-loaded with the core purpose and efficiently uses line breaks for structure. Slightly longer than strictly necessary, but no redundant information.

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

Completeness5/5

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

Given no output schema, the description thoroughly documents return values for both raw modes: DESIGN.md structure (Color System, Typography, etc.) and raw token object structure (url, title, tokens with cssVars, colors, etc.). It also covers error conditions and prerequisites, making the tool's behavior fully predictable for an agent.

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?

Schema coverage is 100%, and the description adds meaningful context beyond the schema: it explains the functional difference between raw=false and raw=true (AI synthesis vs. raw tokens) and ties the url parameter to accessibility requirements. This augments the schema's own descriptions, providing an agent with practical semantics for using each parameter.

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 scrapes a public URL and extracts its design system, parsing CSS custom properties and synthesizing a DESIGN.md. It is specific about the verb ('Scrape', 'extract', 'synthesizes') and the resource ('design system', 'DESIGN.md'), and it distinguishes itself from siblings like 'pull_design_system' and 'get_tokens' by its unique combination of parsing, AI synthesis, and dual output modes.

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

Usage Guidelines4/5

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

The description explicitly states when to use the tool ('reverse-engineer a reference site's system or extract tokens for comparison') and provides context for the raw parameter (useful when ANTHROPIC_API_KEY is unavailable). It does not explicitly state when not to use it or list exclusions, but the guidance is clear and practical.

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/memi'

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