Guide
What is DESIGN.md?
DESIGN.md is a single Markdown file that captures a complete design system as structured tokens, so an AI coding agent can build in that visual language. Copy one file, hand it to your agent, and new UI matches the system instead of looking generic.
Why a file, and why Markdown?
Vibe coding with tools like Claude Code, Cursor, v0, Lovable and Bolt is fast, but the output usually looks like a generic AI template. The missing piece is taste expressed in a form the agent can actually follow. A design system is exactly that, and Markdown with a small YAML token block is the format these agents read best, so DESIGN.md sits right in the project alongside your code. New to these tools? Compare Cursor vs Claude Code.
What is inside a DESIGN.md
- Colors with usage roles (canvas, ink, surfaces, accent, semantic), not just a list of hex codes.
- Typography scale: family, size, weight, line-height and letter-spacing per role, with an open substitute when the original face is licensed.
- Spacing rhythm, border radii and elevation (shadow recipes).
- Components documented as specs that reference the tokens (never inline hex), plus do's and don'ts and responsive behavior.
How to use it
- Pick a design you love from the library.
- Copy its DESIGN.md (or grab the clean Markdown at
/{slug}/design-md/raw). - Drop it into your project root and tell your agent to follow it.
- Build. Every new screen and component lands in the right visual language.
DESIGN.md vs a theme config
A Tailwind config or a CSS-variables file is machine config for one codebase. A DESIGN.md is a human- and AI-readable specification of a whole design language, including the reasoning behind it. duply exports both, so you can paste the DESIGN.md into an agent and drop the Tailwind v4 or CSS-variable tokens straight into code.
Frequently asked questions
- What is a DESIGN.md file?
- A DESIGN.md file is a single Markdown document that describes a complete design system as structured design tokens: colors with usage roles, a typography scale, spacing rhythm, border radii, shadows, and per-component specs that reference those tokens. Because it is plain Markdown with a YAML token block, an AI coding agent can read it and build UI in that exact visual language.
- How do I use a DESIGN.md file with an AI coding agent?
- Copy the DESIGN.md into your project (or paste it into the chat) and tell the agent to follow it. Tools like Claude Code, Cursor, v0, Lovable and Bolt then apply the tokens, so new components match the system instead of looking generic. On duply, every entry has a copy button and a clean Markdown endpoint at /{slug}/design-md/raw.
- How is DESIGN.md different from a Tailwind config or a theme file?
- A Tailwind config or CSS variables file is machine config for one codebase. A DESIGN.md is a human- and AI-readable specification of a whole design language, including the reasoning (usage roles, do's and don'ts, responsive behavior). duply exports both: the DESIGN.md plus ready-to-paste Tailwind v4 and CSS-variable token files.
- Where can I get DESIGN.md files for real products?
- duply documents the design systems of real-world products (such as Stripe, Linear and Vercel) as ready-to-use DESIGN.md files, with light and dark previews and copyable agent prompts. Browse the library and copy one file.