Guide
What is DESIGN.md?
DESIGN.md is a Markdown design contract for AI coding agents. It documents the visual decisions a frontend agent needs before it writes UI: color, typography, spacing, layout rhythm, components, interaction behavior, examples, and non-goals.
A useful DESIGN.md file is short enough to read, structured enough to parse, and specific enough to stop generated UI from drifting into generic SaaS defaults.
AwsomeDesign publishes real public examples and generates private DESIGN.md files from submitted websites so product teams can turn existing brand signals into implementation-ready guidance.
How coding agents use DESIGN.md
Agents use DESIGN.md as a source-of-truth prompt before implementation. The file gives concrete tokens, component rules, layout constraints, and design-language boundaries that can be reused across many UI tasks.
For teams, the value is repeatability: the same design contract can guide a landing page, dashboard, form flow, or refactor without re-explaining the brand every time.
DESIGN.md vs README vs design tokens
A README explains how a project works. Design tokens list atomic values such as colors and spacing. DESIGN.md connects those pieces into product judgment: when to use a token, how components should feel, and which visual moves are out of bounds.
FAQ
What is DESIGN.md?
DESIGN.md is a Markdown design contract that helps AI coding agents follow a real visual system when building frontend UI.
How is DESIGN.md different from design tokens?
Design tokens define raw values; DESIGN.md explains how those values should be used across layout, typography, components, interactions, and product-specific constraints.
Who should use DESIGN.md?
DESIGN.md is useful for developers, designers, product teams, and AI coding agents that need repeatable frontend implementation guidance.