Extract DESIGN.md

Summary

The Extract DESIGN.md Agent turns any public website into a self-contained DESIGN.md design-system document. It pulls four signals through context.dev — design tokens (styleguide), brand assets, a homepage screenshot, and clean page Markdown — then composes a document with token frontmatter and the canonical sections (Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do's and Don'ts). Reach for it when you want to capture a site's look and feel in a form another agent or designer can rebuild from.

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @agentcn/eve/extract-design-md
Copy

Composition

Copyagent/
├── agent.ts              # Agent definition (model + config)
├── instructions.md       # Gather signals, then compose DESIGN.md
├── tools/
│   ├── extract_styleguide.ts  # Design tokens via context.dev
│   ├── get_brand.ts           # Logos, colors, slogan, industry
│   ├── capture_screenshot.ts  # Homepage screenshot URL
│   └── fetch_markdown.ts      # Clean homepage Markdown
└── skills/
    └── design-md/
        └── SKILL.md      # DESIGN.md format and composition rules

Customization

• Data source. All four signals are pulled through context.dev — styleguide, brand, screenshot, and Markdown. Set CONTEXT_DEV_API_KEY.
• Reshape the document. Edit agent/skills/design-md/SKILL.md to add sections, change the frontmatter token groups, or adjust the Do's and Don'ts.
• Trim the signals. Remove a tool file from agent/tools/ (e.g. skip the screenshot) to make the agent faster or cheaper.
• Swap the model. Edit agent/agent.ts — anthropic/claude-sonnet-4-6 for richer synthesis, anthropic/claude-haiku-4-5 for speed.