AI BriefingDESIGN.md — A Single-File Design System Format for AI Coding Tools (Korean Summary)
Key point
A summary of the DESIGN.md format spec, designed so that AI coding agents can understand and follow design systems.
Details
DESIGN.md is a format proposed by Google Labs' Stitch project, designed so that AI coding agents (Claude Code, Cursor, etc.) can accurately understand design systems and generate UI.
This format utilizes a dual structure of YAML frontmatter and Markdown.
- YAML: Stores machine-parsable design tokens such as colors, typography, and spacing.
- Markdown: Describes design judgment criteria such as the rationale behind design decisions, use cases, and patterns to avoid.
Key features are as follows:
- Structured sections: Maintains the design system's organization through 8 fixed sections (colors, typography, etc.).
- CLI tools: Through lint, diff, export, and spec functions, automatically checks for reference errors, insufficient contrast ratios, section order violations, and more.
- Interoperability: Supports integration with existing tools such as Tailwind CSS and Figma variables.
The goal is to have the design system function as persistent context for AI agents within the codebase, beyond Figma, helping AI develop UI while complying with brand rules.
This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.