- DESIGN.md là format spec do Google open-source, chứa design tokens giúp AI coding agents sinh ra UI nhất quán thay vì generic.
- awesome-design-md cung cấp 71 DESIGN.md file miễn phí từ Stripe, Vercel, Apple, Tesla và 60+ brand hàng đầu - đạt 72.1k stars GitHub.
- Drop file vào project root, reference trong CLAUDE.md là agent theo tokens verbatim ngay lập tức.
- Format alpha, tương thích Claude Code, Cursor, Lovable, Windsurf.
TL;DR
AI sinh ra giao diện generic vì mỗi prompt là một tờ giấy trắng - không có visual memory, không có luật. DESIGN.md là file markdown đặt trong project root, chứa toàn bộ quy tắc design (màu, font, spacing, component) để agent đọc và làm theo. Google open-source format này tháng 4/2026. Cộng đồng đã tạo ra hàng trăm file từ các brand lớn nhất thế giới - miễn phí, drop vào là chạy.
Vấn đề nó giải quyết
Bạn đã từng prompt Claude hoặc Cursor để sinh ra một component, rồi một component khác, và thấy chúng trông như đến từ hai sản phẩm khác nhau chưa? Button trang này bo tròn, trang kia vuông cạnh. Màu xanh lần này #3B82F6, lần sau tự nhiên thành #6366F1. Spacing nhảy loạn.
Đây không phải bug - đây là thiết kế của language model. LLM xử lý mỗi prompt độc lập. Không có visual memory. Không có "nhớ lại tháng trước mình dùng màu gì". Kết quả là một fresh negotiation với training distribution mỗi lần - và kết quả trung bình của hàng triệu UI trên internet chính là generic gradients, mismatched buttons, và drifting spacing.
Solution không phải nhồi style vào mỗi prompt. Solution là đặt một file cố định trong repo - và agent tự đọc.
DESIGN.md hoạt động thế nào
DESIGN.md là format spec do Google giới thiệu vào tháng 3/2026 cùng với Google Stitch, và open-source tháng 4/2026 tại github.com/google-labs-code/design.md. File có hai lớp:
- YAML front matter - design tokens máy đọc được: màu hex, font family, font weight, spacing scale, border radius
- Markdown body - design rationale người đọc được: tại sao chọn màu này, khi nào dùng primary button, không làm gì
| Section | Nội dung |
|---|---|
| Colors | Primary, secondary, neutral palette - hex codes + semantic roles |
| Typography | fontFamily, fontSize, fontWeight, lineHeight, letterSpacing |
| Layout | Grid, spacing scale (xs/sm/md/lg/xl), container widths |
| Elevation & Depth | Shadow levels, z-index hierarchy |
| Components | Button variants, card patterns, form elements |
| Do's & Don'ts | Negative instructions - không mix bo tròn và vuông cạnh, không dùng quá 2 font weights trên một màn hình |
Google cũng cung cấp CLI tools cho format này: lint (validate structure + WCAG contrast check), diff (so sánh versions giữa các lần update), export (ra Tailwind v3/v4 hoặc W3C DTCG tokens), và spec (output trực tiếp cho agent prompts).
Bắt đầu trong 2 phút
Không cần install gì. Flow cực đơn giản:
- Vào awesome-design-md, designmd.app, hoặc freedesignmd.com
- Chọn brand hoặc style muốn lấy cảm hứng
- Copy DESIGN.md vào project root
- Thêm vào CLAUDE.md:
Read DESIGN.md before generating any UI component.
Với Cursor: thêm file vào .cursor/rules/ - mọi generation tự động theo tokens.
Với Lovable: paste nội dung vào first prompt - agent set up styles.css và components trong một shot.
Với Windsurf / Kiro: reference trong system prompt tương tự CLAUDE.md.
Các bộ sưu tập hiện có
Ecosystem bùng nổ nhanh sau khi Google open-source format:
| Bộ sưu tập | Files | Nội dung chính | GitHub Stars |
|---|---|---|---|
| awesome-design-md | 71 | Stripe, Vercel, Apple, Tesla, Claude, Spotify, Airbnb, Nike... | 72.1k |
| designmd.app | 423 | Aesthetic styles (Minimalism, Aurora UI, Grunge, Art Nouveau...) | - |
| freedesignmd.com | 108+ | Curated styles, commercial OK, no login required | - |
awesome-design-md là repo phổ biến nhất với 72.1k stars và 8.8k forks, MIT license. Ngoài developer tools (Cursor, Raycast, Warp) và fintech (Stripe, Revolut, Wise), bộ sưu tập còn bao gồm automotive (Tesla, BMW, Ferrari), media (Apple, WIRED, The Verge), và consumer apps (Airbnb, Spotify, Starbucks).
Ai nên thử ngay
- Indie hackers / solo devs: Ship sản phẩm trông professional ngay từ prompt đầu mà không cần thuê designer
- Small teams: Giữ visual consistency khi nhiều người hoặc nhiều agent cùng build components
- AI-first builders: Dùng Claude Code, Cursor, hoặc Lovable để ship UI nhanh với brand identity rõ ràng từ đầu
- Ai đang vật lộn với vibe coding không nhất quán: đây là fix đơn giản nhất, không cần thêm tooling
Tiếp theo
DESIGN.md đang trở thành layer thứ ba trong bộ ba file context của AI coding: AGENTS.md nói agent làm gì, CLAUDE.md nói project là gì, DESIGN.md nói UI trông thế nào. Ba file này bổ trợ nhau, không thay thế.
Một số điểm cần lưu ý: format hiện ở alpha, spec còn thay đổi - không nên hardcode vào production pipeline quan trọng. Motion và scroll library (GSAP triggers, Framer Motion, WebGL) đang trong roadmap của freedesignmd. Export CLI hiện hỗ trợ Tailwind v3/v4 và W3C DTCG tokens.
Nguồn: google-labs-code/design.md, VoltAgent/awesome-design-md, designmd.app.
