Your file becomes a style guide, landing page, dashboard, mobile app and email, so you can see the design before anyone builds it.
Clients used to ask for a PDF brand book, then a Figma file. Now they ask for a DESIGN.md: a markdown file an AI agent can build from. It's a better contract and a worse thing to look at.
This shows you what it will actually produce, before anyone builds it.
Why we built it: We Built a Thing #63 →A landing page, dashboard, mobile app, email, article and style guide, all themed from your file.
Export CSS variables, a Tailwind v4 theme, Design Tokens JSON or a short brief for your agent.
No account, no upload, no AI. Share links carry the file inside the link itself.
A DESIGN.md is a plain markdown file that describes a design system: colors, type, spacing, components and the reasoning behind them. Tokens usually sit in YAML frontmatter at the top, with written guidance below. It's meant to be read by people and by AI coding agents, so an agent building your UI uses your brand instead of guessing.
Paste it into the editor above or drop the file anywhere on this page. The preview updates as you type, and you can switch between a landing page, dashboard, mobile app, email, article and a classic style guide.
No. Parsing, previewing and every export run in your browser. Share links carry the whole file inside the link itself, so nothing is stored on a server.
Cityboat is ours. Heritage is adapted from the example in Google's DESIGN.md format (Apache 2.0). Dramatic, Neobrutalism, Editorial, Cafe, Matrix and Doodle come from the open-source awesome-design-skills collection by Bergside (MIT licence).
Google-style YAML frontmatter (colors, typography, rounded, spacing, components with {token.references}), structured prose with hex values like **Ink** (#18181B), markdown tables of tokens, and CSS custom properties inside css code blocks. Messy files in between usually work too.
Yes. The Export tab gives you CSS custom properties, a Tailwind v4 @theme block, W3C Design Tokens JSON for Figma Tokens Studio or Style Dictionary, and a short agent brief to paste into a prompt.
Built by Township. We're a senior product agency that designs and builds digital products, and we made this because our own clients started asking about DESIGN.md files. Got an idea that needs building?