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

Composition

Copyagents/
└── extract-design-md.ts  # Agent: gather signals, then compose DESIGN.md
tools/
└── context.ts            # Styleguide, brand, screenshot, and Markdown tools
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 skills/design-md/SKILL.md to add sections, change the frontmatter token groups, or adjust the Do's and Don'ts.
• Trim the signals. Drop a tool from tools/context.ts (e.g. skip the screenshot) to make the agent faster or cheaper.
• Swap the model. Change the model on the agent in agents/extract-design-md.ts.