Awesome DESIGN.md: Bộ Sưu Tập DESIGN.md Cho AI
VoltAgent/awesome-design-md
Awesome DESIGN.md là một repo tập hợp 73 file DESIGN.md dựng sẵn, mỗi file là một bản tóm tắt phong cách thiết kế cho một thương hiệu thật — Stripe, Tesla, Notion, Apple, và 69 cái tên khác — mà bạn chỉ cần copy vào project để AI coding agent có thứ cụ thể để bám theo thay vì đoán mò. Đây là một thư viện tham chiếu, không phải công cụ tạo sinh: không ai phân tích site của bạn ở đây, họ đã phân tích site của người khác giúp bạn sẵn rồi. Mở một file thực tế lên, bạn sẽ thấy nhiều hơn một dòng mô tả — README liệt kê chín mục nội dung cố định cho mỗi file, từ vai trò màu sắc đến breakpoint responsive, và cấu trúc này nhất quán vì cả bộ sưu tập theo cùng định dạng DESIGN.md của Stitch. Nên dùng khi bạn muốn agent ra đúng phong cách gradient tím của Stripe hay đen-trắng tối giản của Tesla ngay lần thử đầu thay vì lần thứ tư. Bỏ qua nếu thương hiệu bạn cần không nằm trong 73 cái đã có — repo chỉ cung cấp những gì đã được trích xuất sẵn, còn muốn có file mới thì phải qua form request, chứ bản thân repo không tự làm việc đó.
Hiểu về DESIGN.md và Mục Đích Của Bộ Sưu Tập Này
DESIGN.md là một file hệ thống thiết kế dạng văn bản thuần — một khái niệm do Google Stitch giới thiệu — mà AI coding agent đọc để tạo UI khớp với một ngôn ngữ thị giác cụ thể, và Awesome DESIGN.md là bộ sưu tập của VoltAgent gồm 73 file loại này được trích xuất sẵn từ các website công ty thật. File này nằm cạnh (chứ không thay thế) AGENTS.md: README vạch rõ ranh giới đó — AGENTS.md nói cho coding agent biết cách build project, còn DESIGN.md nói cho design agent biết project nên trông như thế nào. Không có file xuất từ Figma, không JSON schema, không plugin nào phải cài; đây chỉ là markdown, mà theo README, là định dạng LLM đọc hiểu tốt nhất mà không cần parse gì thêm. Thả đúng file vào thư mục gốc project, và theo README, "bất kỳ AI coding agent hay Google Stitch nào cũng hiểu ngay giao diện của bạn nên trông ra sao." Repo này tồn tại vì viết một file DESIGN.md từ đầu nghĩa là phải tự tay reverse-engineer màu sắc và type scale của một site — VoltAgent đã làm sẵn việc đó cho 73 thương hiệu.
Bên Trong Mỗi DESIGN.md: Cấu Trúc và Nội Dung
- ✓Chín mục nội dung cố định trong mỗi file — visual theme, color palette, typography, component, layout, depth/elevation, do's-and-don'ts, responsive behavior, và một agent prompt guide, theo đúng phần phân tích của README
- ✓Mỗi màu đi kèm tên ngữ nghĩa, mã hex, và vai trò chức năng thay vì chỉ là một ô màu, để agent biết đâu là màu CTA và đâu là màu nền
- ✓Một bảng phân cấp typography đầy đủ (không chỉ ghi "font: Inter") ánh xạ font family với từng cấp heading và cỡ chữ body
- ✓Quy tắc do's-and-don'ts rõ ràng cho từng thương hiệu, nhằm ngăn agent trôi dạt về phong cách chung chung giữa chừng
- ✓Mỗi entry đi kèm ba file chứ không phải một: DESIGN.md, cộng thêm preview.html và preview-dark.html, dựng thành trang xem trước màu sắc, type scale và component thật trước khi bạn dùng nó
- ✓73 thương hiệu trải khắp mười category — nền tảng AI/LLM, dev tool, fintech, ô tô, bán lẻ, và một chuỗi "Retro Web" cuối tuần lấy site những năm 1990-2000 như Dell (1996) và Nintendo.com (2001)
- ✓Một agent prompt dùng sẵn trong mỗi file, nên bạn không phải tự viết prompt wrapper quanh các giá trị màu
Cách Dùng File DESIGN.md Với AI Coding Agent
- •Copy file DESIGN.md của thương hiệu bạn chọn vào thư mục gốc project, rồi bảo coding agent build dựa trên đó — README mô tả đây là toàn bộ quy trình, không cần file config hay bước build nào khác
- •Mở preview.html (và preview-dark.html) tương ứng trước để kiểm tra bảng màu và type scale có thực sự đúng ý trước khi để agent tạo trang dựa trên nó
- •Dùng trực tiếp với Google Stitch, vì DESIGN.md vốn là định dạng của Stitch và cả bộ sưu tập được build theo đúng specification đó
- •Request một DESIGN.md cho thương hiệu chưa có trong bộ sưu tập qua form tại getdesign.md/request, kể cả tùy chọn giao riêng tư không công khai, theo README
- •Kết hợp một DESIGN.md với AGENTS.md của riêng bạn để một file nói agent cách build project, file kia nói kết quả nên trông ra sao — README coi đây là hai tài liệu khác nhau, bổ trợ cho nhau
Điểm Mạnh
- ✓Mỗi file có chiều sâu thật, không chỉ là một đống mã hex — vai trò màu ngữ nghĩa, phân cấp typography đầy đủ, do's-and-don'ts, và quy tắc responsive đều được ghi rõ theo cấu trúc chín mục của README
- ✓Định dạng ba file mỗi entry (DESIGN.md, preview.html, preview-dark.html) cho phép bạn nhìn trực tiếp bảng màu trước khi gắn agent vào đó, thay vì đoán từ các giá trị thô
- ✓Độ phủ thật sự rộng — 73 entry trải từ sàn giao dịch crypto đến hãng xe hơi đến các trang hoài cổ thập niên 1990, nên khả năng cao thương hiệu bạn cần đã có sẵn
- ✓Không khóa vào tooling nào: chỉ là một file markdown copy-paste, nên đưa vào project có sẵn không tốn gì ngoài công copy
- ✓Cấp phép MIT, nên việc dùng lại trong project thương mại không bị chặn bởi kiểm tra license riêng
Những Điều Cần Cân Nhắc Khi Dùng File DESIGN.md
- △Bộ sưu tập chỉ phủ 73 thương hiệu; nếu công ty bạn cần không nằm trong đó, repo này không tự sinh ra DESIGN.md mới cho bạn — bạn phải tự viết tay hoặc dùng form request, mà theo README là tồn tại để bù khoảng trống đó nhưng là một dịch vụ tách riêng, không phải thứ repo này tự cung cấp
- △Bản thân DESIGN.md là một định dạng mới, do một mình Google Stitch định nghĩa — README không có bằng chứng nào cho thấy coding agent khác hỗ trợ định dạng này theo kiểu native ngoài việc "thả vào rồi bảo agent dùng," nên kết quả phụ thuộc vào việc agent bạn dùng bám sát một style brief dạng markdown tốt đến đâu, chứ không có cơ chế parse tích hợp sẵn nào
- △README không ghi changelog hay tần suất cập nhật cho từng file, nên không có cách nào từ chính repo để biết một entry còn khớp với site gốc sau khi thương hiệu đó redesign hay chưa
- △Không có tooling cài đặt hay sử dụng nào ngoài copy-paste — điều này hợp lý với một bộ sưu tập tham chiếu, nhưng cũng có nghĩa là không có bước kiểm chứng nào bắt lỗi một giá trị màu cũ hoặc sai trước khi agent bắt đầu build dựa trên nó
Công Cụ AI Thiết Kế & Build Liên Quan
Câu Hỏi Thường Gặp
DESIGN.md là một file hệ thống thiết kế dạng văn bản thuần — khái niệm do Google Stitch giới thiệu — mà AI coding agent đọc để tạo UI khớp với ngôn ngữ thị giác của một thương hiệu cụ thể, không cần file Figma hay JSON schema.
Copy file DESIGN.md của thương hiệu bạn muốn vào thư mục gốc project, rồi bảo AI coding agent build dựa trên đó. Awesome DESIGN.md kèm theo preview.html và preview-dark.html cho mỗi entry để bạn kiểm tra bảng màu trước.
Awesome DESIGN.md hỗ trợ request qua form tại getdesign.md/request, nơi bạn có thể xin file DESIGN.md cho một website cụ thể, kể cả tùy chọn giao riêng tư chỉ dành cho bạn.
Mỗi file trong Awesome DESIGN.md phủ chín mục: visual theme, color palette với vai trò ngữ nghĩa, phân cấp typography, trạng thái component, layout spacing, shadow/elevation, do's-and-don'ts, breakpoint responsive, và một agent prompt guide.
Awesome DESIGN.md phát hành theo MIT License, và README ghi rõ các design token trích xuất chỉ phản ánh giá trị CSS hiển thị công khai, không có tuyên bố sở hữu với bản sắc thị giác của bất kỳ site nào.
Đóng góp cho Awesome DESIGN.md nghĩa là sửa màu sai, token thiếu, hoặc mô tả yếu trong các file hiện có, theo hướng dẫn CONTRIBUTING.md — README yêu cầu mở issue trước khi gửi pull request.
Nên thử — và nên bỏ qua khi nào
Nên thử Awesome DESIGN.md nếu bạn đang prototype UI bằng AI coding agent và muốn nó ngừng mặc định về cùng một kiểu card bo góc, gradient tím-chàm quen thuộc — chọn entry thương hiệu gần nhất với thứ bạn đang build rồi đưa cho agent thứ gì đó cụ thể. Nó cũng hợp với ai đang tìm hiểu cách các site production thật cấu trúc vai trò màu sắc hay phân cấp typography, vì các file đọc như case study chứ không chỉ là spec khô khan. Bỏ qua nếu bạn cần DESIGN.md cho thương hiệu ngoài 73 cái đã có và không đợi được form request, hoặc nếu project của bạn đã có design system riêng mà một phong cách thương hiệu mượn về sẽ chỉ xung đột.