Skip to main content
Glama

design_doc

Extract a design system from any public URL: parse CSS custom properties, colors, fonts, spacing, radii, shadows, and get an AI-synthesized DESIGN.md or raw token data for analysis.

Instructions

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

Prereq: publicly accessible URL; configured AI provider 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 a configured AI provider). If true, returns raw parsed token data without calling AI.
urlYesFully-qualified public URL to extract design tokens from (e.g. 'https://stripe.com', 'https://linear.app'). Must be accessible without authentication.
Behavior5/5

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

With no annotations provided, the description fully carries the burden of behavioral disclosure. It explains the scraping and parsing process, the AI synthesis step, the exact structure of return values for both modes, and possible errors (unreachable URL, missing key). No contradictions or omissions.

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 but slightly verbose. It front-loads the main action and output, then covers prerequisites, return formats, errors, and use cases in a logical order. Every sentence adds information, but some details (e.g., the full list of token types) could be condensed without losing clarity.

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 explains return values for both raw modes and lists error conditions. It covers the complexity of the tool (multiple token types, AI synthesis, two output formats) and provides clear use cases, making it fully complete for an agent to understand and invoke correctly.

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%, so baseline is 3. The description adds value by explaining the 'raw' parameter's effect (returns raw tokens vs AI-synthesized document) and provides example URLs for the 'url' parameter, clarifying format and accessibility requirements. This goes beyond the schema's minimal descriptions.

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 states a specific verb ('scrape') and resource ('public URL'), and details exactly what is extracted (CSS custom properties, colors, fonts, etc.) and the optional synthesis of DESIGN.md. It distinguishes itself from siblings like 'pull_design_system' and 'get_tokens' by explicitly framing the tool as reverse-engineering a reference site's system or extracting tokens for comparison.

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 provides explicit context for when to use the tool (to reverse-engineer or compare design systems) and includes prerequisites (publicly accessible URL, configured AI provider for synthesis). It also explains the two modes (raw vs AI-synthesized) but does not directly list alternative tools or exclusion criteria.

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

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