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.
346
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. 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/langgraph/extract-design-md

Composition

├── index.ts
├── instructions.md
├── lib/compose.ts
├── lib/derive-tokens.ts
├── lib/design-md.ts
├── tools/compose_design_md.ts

Customization

  • Edit index.ts to change the model, description, or system prompt.
  • Add route-local tools under tools/; tool input and output types are inferred from TypeScript.
  • Run dawn verify before deploying generated LangGraph artifacts.