- DESIGN.md là file markdown chuẩn hóa mô tả toàn bộ design system (màu sắc, typography, spacing, components) để AI coding agent đọc và áp dụng nhất quán.
- Google Labs open-source format này năm 2026, cộng đồng đã build các collection miễn phí với hàng chục đến hàng trăm file từ các brand nổi tiếng.
- Hoạt động với Claude Code, Cursor, Lovable, Bolt, v0 - drop file vào repo là xong.
TL;DR
Bạn đang vibe code và gõ "make it look modern, clean, premium" vào prompt. AI hiểu theo cách của nó. Kết quả ra không đúng ý. Bạn sửa 5 lần vẫn không như mong muốn.
DESIGN.md giải quyết chính xác vấn đề đó. Một file markdown đặt vào root của repo - chứa màu hex, font stack, spacing scale, component rules - và AI biết chính xác cần làm gì trước khi generate ra một dòng code.
"Make it look modern" - câu lệnh tốn nhiều thời gian sửa nhất
Khi làm việc với AI coding agent - dù là Claude Code, Cursor, hay Lovable - điểm yếu nhất không phải logic code mà là visual consistency. AI không biết bạn muốn màu primary là #0F172A hay #6366F1. Nó không biết bạn dùng Inter hay Geist. Nó không biết border radius của bạn là 4px hay 12px.
Kết quả: mỗi component AI generate ra nhìn khác nhau. Mỗi session mới lại phải explain lại design intent. Docs design nằm rải rác ở Figma, Notion, email - AI không đọc được bất kỳ chỗ nào trong số đó.
DESIGN.md đặt toàn bộ context đó vào một file duy nhất, nằm ngay trong repo, version-controllable bằng git.
Cách DESIGN.md hoạt động
Format gồm hai tầng:
- YAML front matter - machine-readable design tokens: hex codes, font sizes, spacing values, border radius, shadow definitions. AI đọc và dùng trực tiếp.
- Markdown prose - human-readable design rationale: tại sao màu này, brand personality là gì, cách áp dụng trong edge cases.
Ví dụ một đoạn DESIGN.md của Stripe-style:
colors:
primary: "#635BFF"
background: "#0A2540"
text: "#425466"
typography:
font-family: "Sohne, system-ui"
base-size: "16px"
spacing:
unit: "8px"
Drop file này vào root, reference trong prompt hoặc rules file (.cursorrules, CLAUDE.md), và AI nhận toàn bộ context trước khi generate. Không cần Figma export, không cần JSON schema, không cần plugin đặc biệt.
Google Labs phát triển format này ban đầu cho Google Stitch - công cụ thiết kế AI của họ - rồi open-source đặc tả năm 2026. NPM package chính thức @google/design.md cho phép lint file, check WCAG AA contrast, orphaned tokens, section order.
Hàng trăm file sẵn có - hoàn toàn miễn phí
Cộng đồng đã build nhiều collection DESIGN.md từ các brand nổi tiếng:
| Platform | Số file | Highlight |
|---|---|---|
| awesome-design-md | 71 files | 71,600 GitHub stars - phổ biến nhất |
| freedesignmd.com | 121 systems | + 7 layout patterns, không cần account |
| getdesign.md | 70 files | Search theo brand, mood, industry |
Brands có trong collection: Apple, Stripe, Vercel, Linear, Notion, Figma, Spotify, Nike, Tesla, BMW, Ferrari, Coinbase, Revolut, Claude, Cursor... Bạn muốn app có aesthetic giống Linear? Drop Linear.md vào. Muốn dark mode kiểu Vercel? Một file, một lần.
Trong thực tế - ai dùng được ngay
Indie hacker / solo founder: Không có designer, không có time để viết CSS từ đầu. Chọn một DESIGN.md phù hợp, scaffold toàn bộ UI trong một session với Claude Code hoặc Lovable. Consistent từ landing page đến dashboard.
Vibe coder: Workflow đơn giản nhất có thể: tìm style thích trên getdesign.md, download, đặt vào repo root, reference trong prompt: "Build me a pricing page using DESIGN.md". AI làm phần còn lại.
Dev team nhỏ: Thay vì mỗi người describe design theo cách khác nhau, cả team dùng chung một DESIGN.md như source of truth. Commit vào git, PR review như code bình thường.
AI tools hỗ trợ: Claude Code, Cursor, Lovable, Bolt, Google Stitch, Kiro, Windsurf, v0 - tất cả đều đọc được file markdown trong project root.
Khi nào nên dùng - khi nào không
Dùng khi:
- Build UI mới hoàn toàn và muốn consistent ngay từ đầu
- Vibe coding một product trong vài session
- Team muốn chuẩn hóa design context cho AI agent
- Muốn replicate aesthetic của một brand cụ thể
Giới hạn cần biết:
- Spec vẫn là draft - Google chưa finalize hoàn toàn
- File community-maintained có thể outdated nếu brand redesign gần đây
- Chưa có Figma plugin chính thức để auto-export (có Chrome extension bergside/design-md-chrome nhưng beta)
Tiếp theo
Google đang finalize spec chính thức và cộng đồng đang mở rộng nhanh. freedesignmd.com đang build motion/animation library bổ sung. awesome-design-md có 8,800 forks - nhiều contributor đang add file mới mỗi tuần.
Nếu muốn build DESIGN.md cho brand riêng, spec chính thức của Google là điểm bắt đầu tốt nhất. Lint bằng: npx @google/design.md lint DESIGN.md.
Nguồn: Google Blog, VoltAgent/awesome-design-md, Department of Product.