DESIGN.md Generator — Design System for AI Agents | design.dev

Visual editor for the open DESIGN.md spec. Build a tokenized design system AI coding agents can read and apply consistently.

1 System Name Description (optional) 2 Quick Start Generate from one color Brand color Generates a starter palette, scales, and components 3 Colors Semantic tokens 4 Typography Token name Font family Size Weight 5 Scales Spacing & Rounded 6 Components Map tokens to UI 7 Prose Sections The "why" for agents Overview Elevation & Depth Do's and Don'ts The quick brown fox A live preview of your design system rendered with the current tokens. Edit colors, typography, spacing, and components on the left to see the canvas update in real time. Card example Cards inherit your card-bg,…

saved by

• Aileen Luo
• Helen Huang
• Jie Hana

related reading

• GitHub - google-labs-code/design.md: A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.github.com
• GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.github.com
• DESIGN.md Examples for AI Agents | Refero Stylesstyles.refero.design
• Wonder — What you see is what you shipwonder.design
• GitHub - Owl-Listener/designer-skills: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.github.com
• Using AI as a Design Engineerjakub.kr
• Subframe – The AI design tool built for codesubframe.com
• How our agents build on-brand pages with design.mdvercel.com
• getdesign.md — DESIGN.md collection for AI coding agentsgetdesign.md
• Try these 10 skills—and show off your ownfigma.com
• pen.devpen.dev
• AI Design Tool for Product Teams | Magic Patternsmagicpatterns.com