Design MD Generator#

Generate structured DESIGN.md files from any website URL. The output follows the Google Stitch DESIGN.md format with 9 standard sections.

Workflow#

Step 1: Capture the site#

Use the browser tool to load the target URL and take a screenshot:

text

browser action=navigate url="<TARGET_URL>"
browser action=screenshot
browser action=snapshot

Step 2: Extract CSS tokens#

Run the extraction script to pull all design tokens from the page's computed styles:

bash

# From the skill directory
node {baseDir}/scripts/extract-tokens.js "<TARGET_URL>"

The script outputs a JSON file with:

• All unique colors (background, text, border, accent)
• Font families, sizes, weights, line-heights, letter-spacing
• Border radii, shadows, spacing values
• Component patterns (buttons, cards, inputs)

Step 3: Generate DESIGN.md#

Using the extracted tokens + screenshot for visual context, write a DESIGN.md with these 9 sections:

#SectionWhat to capture1Visual Theme & AtmosphereMood, density, design philosophy. Write like an art director describing the aesthetic.2Color Palette & RolesEvery color with semantic name + hex + functional role. Group by: Brand, Background, Text, Semantic, Border.3Typography RulesFont families with fallbacks. Full hierarchy table: role, font, size, weight, line-height, letter-spacing.4Component StylingsButtons (primary/secondary/ghost), Cards, Inputs, Navigation, Badges — with all states (default, hover, active, disabled).5Layout PrinciplesSpacing scale table, grid system, max-width, column count, whitespace philosophy.6Depth & ElevationShadow system table (flat → raised → floating → overlay). Surface hierarchy list.7Do's and Don'tsDesign guardrails. What makes this design system unique and what breaks it.8Responsive BehaviorBreakpoints table, touch targets, collapsing strategy for nav/grids/typography.9Agent Prompt GuideQuick color reference block + 2-4 ready-to-use prompts for common page types.

Writing Guidelines#

• Be specific: Use exact hex values, px sizes, font weights — not "dark blue" or "large text"
• Be opinionated: Describe the atmosphere like a design critic, not a spec sheet
• Name colors semantically: "Lobster Coral" not "Red 1", "Deep Sea" not "Background Dark"
• Include states: Every interactive component needs default + hover + active + focus states
• Show hierarchy: List surfaces from darkest to lightest, text from brightest to dimmest
• Agent-ready prompts: Write Section 9 prompts that another AI agent can copy-paste to build matching UI

Output#

Save the generated file as DESIGN.md in the target location specified by the user.

Optionally generate:

• preview.html — A visual catalog page showing color swatches, type scale, and component samples
• preview-dark.html — Same catalog on dark surface

Reference#

See references/format-spec.md for the complete section-by-section format specification with examples.

See references/example-linear.md for a high-quality example (Linear's DESIGN.md).