DESIGN.md: đưa “gu thiết kế” vào repo để AI build UI không còn generic
Tóm tắt
DESIGN.md là file Markdown mô tả hệ thống thiết kế (màu, typography, spacing, elevation, responsive) để coding agent đọc khi dựng UI. Repo VoltAgent/awesome-design-md và trang getdesign.md cung cấp hàng trăm mẫu tham khảo. Dùng làm điểm khởi đầu, không sao chép nhận diện thương hiệu của người khác.
Một DESIGN.md thường có
| Mục | Ví dụ nội dung |
|---|---|
| Colors | Primary, surface, text, border + light/dark tokens |
| Typography | Font, scale, line-height, weight cho heading/body |
| Spacing & layout | Thang 4/8px, max-width, grid |
| Components | Button, card, input — trạng thái hover/focus/disabled |
| Motion & elevation | Shadow, radius, thời lượng animation |
Cách dùng với Claude Code
- Chọn một mẫu gần phong cách bạn muốn trên getdesign.md.
- Chép vào repo thành
DESIGN.md, chỉnh lại màu, font, tên cho thương hiệu của bạn. - Thêm vào CLAUDE.md: “Khi làm UI, tuân thủ DESIGN.md”.
- Yêu cầu agent tự review UI so với DESIGN.md trước khi báo xong.
Tham khảo: getdesign.md · VoltAgent/awesome-design-md