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.
405
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.

EveFlueMastraLangGraph

Output will stream here when you run the agent.

Summary

The Extract DESIGN.md Agent turns any public website into design artifacts. Given a domain, it gathers the styleguide, brand, a homepage screenshot, and clean page Markdown through context.dev, then returns three outputs:

  • 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/flue/extract-design-md

Composition

workflows/
└── extract-design-md.ts  # Workflow: 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.