DESIGN.md guides
A DESIGN.md turns a website's design system into a file your coding agent can read: colors, typography, spacing, radii and components, with the rules for using them. These guides show what to do with one, step by step, each with a worked example built from a real file in the DESIGN.md gallery.
New to the format? Start with what a DESIGN.md is. Ready to make one? Get a DESIGN.md from any website.
Guides by use case
- Developers building with an AI coding agent
Make Claude Code and Cursor build UI that matches a website
Extract a site you like, drop its DESIGN.md into your repo and point your agent to it, with the exact prompts for Claude Code and Cursor.
- Solo founders and small teams
No designer? Borrow a proven design system for your app
How to pick a reference site, what to keep from its DESIGN.md and what to change so the result is yours and not a copy.
- Teams planning a rebuild, rebrand or migration
Rebuilding your site? Extract its design system first
Capture your current site as a DESIGN.md before a rebuild, rebrand or framework move, and know what to check by hand.
- Designers and agencies prototyping
Blend two reference sites into one design for a prototype
Compare two extracted DESIGN.md files token by token and merge them into one spec for a prototype, by hand or with your agent.
- Developers building agents and agent workflows
Give your coding agent design specs on demand with MCP
Connect the MCP server so your agent can extract a site's DESIGN.md on its own, wait for it and build from it.