For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
319
Sponsor

Extract DESIGN.md

PreviousNext

Turns a domain into a self-contained DESIGN.md — gathering the styleguide, screenshot, and homepage Markdown from context.dev, then composing the document in a single Claude call.

EveFlueMastra

Output will stream here when you run the agent.

Summary

The Extract DESIGN.md Agent turns any public website into design artifacts. The compose_design_md tool gathers the styleguide, brand, a homepage screenshot, and clean page Markdown through context.dev, then returns three outputs, which the agent relays verbatim:

  • DESIGN.md — composed in one Claude call (screenshot passed as a vision image): token frontmatter (version: alpha, colors, typography, rounded, spacing, components) plus the canonical sections (Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do's and Don'ts).
  • Tailwind v4 @theme block — derived deterministically from the styleguide + brand in lib/derive-tokens.ts.
  • CSS :root tokens — the same tokens as vanilla CSS variables.

It follows the designmd.supply pipeline — the same prompt spec and deterministic token derivers — running on Claude.

Installation

$ pnpm dlx shadcn@latest add @agentcn/mastra/extract-design-md

Composition

├── config.ts                  # Agent definition (model + config)
├── instructions.md            # Call compose_design_md, relay all three artifacts
├── tools/
│   └── compose_design_md.ts   # Returns DESIGN.md + Tailwind + CSS
└── lib/
    ├── compose.ts             # Fetches signals; Claude call + token derivers
    ├── design-md.ts           # The verbatim DESIGN.md prompt spec
    └── derive-tokens.ts       # Deterministic Tailwind v4 @theme + CSS :root tokens

Customization

  • Data source. The styleguide, screenshot, and Markdown are pulled through context.dev. Set CONTEXT_DEV_API_KEY, and ANTHROPIC_API_KEY for the model call.
  • Reshape the document. Edit lib/design-md.ts — the prompt spec is the single source of truth for the frontmatter keys, token names, and sections.
  • Swap the model. Change the model in lib/compose.ts — it uses claude-sonnet-4-6 (vision-capable). The reference uses gpt-5.4-mini; any multimodal model that can read the screenshot works.
  • Temperature. Adjust temperature in lib/compose.ts (the reference uses 0.2) to trade determinism for variety.