DESIGN.md là cầu nối tiêu chuẩn giữa ý đồ thiết kế của con người và việc thực thi mã nguồn của các tác nhân AI (AI agents).
Được giới thiệu bởi Google Stitch và phổ biến một cách bùng nổ bởi cộng đồng mã nguồn mở, định dạng Markdown này mã hóa toàn bộ hệ thống thiết kế (design system) — bao gồm màu sắc, kiểu chữ, khoảng cách, các thành phần (components) và triết lý thị giác — thành văn bản thuần túy (plain text) mà các mô hình ngôn ngữ lớn (LLMs) có thể đọc hiểu một cách tự nhiên.
Đây đại diện cho một sự chuyển dịch mang tính bước ngoặt: thiết kế không còn được bàn giao dưới dạng một tệp hình ảnh trực quan nữa, mà là một thông số kỹ thuật có thể thực thi. Kho lưu trữ GitHub đã đạt 40.500 stars chỉ trong vòng 10 ngày (được tạo vào ngày 31 tháng 3 năm 2026), tốc độ tăng trưởng nhanh nhất của bất kỳ danh sách “awesome list” nào trong lịch sử GitHub. Sự đón nhận này không còn dừng lại ở mức thử nghiệm nữa — đó là một làn sóng khổng lồ đang tái định nghĩa lại quy trình từ thiết kế đến mã nguồn (design-to-code) trong toàn bộ hệ sinh thái frontend.
Chính xác thì DESIGN.md là gì?
Một tệp DESIGN.md là một tệp văn bản thuần túy có định dạng Markdown, dùng để ghi lại toàn bộ hệ thống thiết kế của dự án theo cách tối ưu hóa nhất cho các tác nhân AI tiêu thụ (như Claude Code, Cursor, Copilot, Google Stitch, Codex). Đây không phải là một hệ thống thiết kế truyền thống — nó là một tập hợp con tinh gọn, có thể thực thi của các thẻ thiết kế (design tokens) mà AI có thể áp dụng một cách máy móc.
“Design.md trả lời các câu hỏi ở cấp độ token: ‘Màu chính của nút bấm là gì?’ và ‘Các ô nhập dữ liệu sử dụng bo góc (border-radius) bao nhiêu?'”
Định dạng này tuân theo quy ước do Google Stitch đưa ra và thường chứa 9 phần chính.
Tại sao lại là Markdown?
Lý do sử dụng Markdown thay vì JSON/YAML (như định dạng W3C Design Tokens) rất đơn giản: Markdown là định dạng mà các LLM đọc tốt nhất. Không cần phải phân tích cú pháp (parse) hay cấu hình gì cả. Nó vừa giúp con người lẫn máy móc đều có thể đọc được, dễ dàng quản lý phiên bản bằng Git, cho phép so sánh các thay đổi , tạo Pull Requests và không yêu cầu bất kỳ công cụ chuyên dụng nào.
Vượt xa các Tokens: Triết lý & Rào chắn (Guardrails)
Điều làm cho DESIGN.md khác biệt về mặt chất lượng so với một tệp token thông thường là nó bao gồm cả triết lý thiết kế và các rào chắn — không chỉ là các giá trị thô, mà còn là ngữ cảnh về cách thức và lý do sử dụng chúng. Điều này cho phép một tác nhân AI đưa ra các quyết định thiết kế mạch lạc khi tạo ra các thành phần chưa được định nghĩa rõ ràng trước đó.
Ví dụ về Đặc tả Hệ thống Thiết kế (Design System Specification)
1. Tổng quan & Kim chỉ nam Sáng tạo: The Precision Dossier
Hệ thống thiết kế này được xây dựng cho không gian làm việc của một kỹ sư cấp cao — nơi sự nghiêm ngặt về kỹ thuật gặp gỡ sự rõ ràng của biên tập cao cấp. Kim chỉ nam sáng tạo là “The Precision Dossier” (Hồ sơ chính xác). Không giống như các danh mục thông thường dựa trên lưới tiêu chuẩn, hệ thống này coi thông tin là một chuỗi các mô-đun dữ liệu có độ trung thực cao. Nó phá vỡ giao diện “khuôn mẫu” thông qua mật độ sắp đặt chữ có chủ đích, các đường cong bo góc lớn và triết lý “Không đường kẻ” (No-Line). Trải nghiệm mang lại sẽ giống như một bảng điều khiển được tùy chỉnh riêng: uy tín, dịu mắt và sạch sẽ một cách chuẩn xác.
2. Màu sắc & Triết lý Bề mặt
Hệ thống phân cấp bề mặt & Quy tắc “Không đường kẻ”:
Hướng dẫn nghiêm ngặt: Nhà thiết kế bị cấm sử dụng các đường viền (border) 1px solid để phân chia phần hoặc chứa nội dung. Các ranh giới phải được xác định duy nhất thông qua sự thay đổi màu nền hoặc chuyển đổi tông màu.
Lồng ghép bề mặt (Surface Nesting): Để tạo chiều sâu, hãy xếp chồng các thẻ chứa bằng cách sử dụng các tầng surface-container. Một thẻ dự án (#111113) nên nằm trực tiếp trên nền (#3F3D4D), tạo ra một vết lõm tự nhiên mà không cần đường nét viền.
Quy tắc kính (The Glass Rule): Đối với các huy hiệu (badges) nổi hoặc các lớp phủ, hãy sử dụng phiên bản bán trong suốt của surface-container-highest với hiệu ứng backdrop-blur: 12px để cho phép các tông màu nền phong phú được xuyên qua.
Các thẻ màu (Color Tokens):
Nền (Background): #3F3D4D. Các tầng bề mặt (Các phần tử thẻ tối): surface-container-lowest: #111113 (Màu làm đầy thẻ chính), surface-container-low: #17181A (Các phần tử lồng bên trong), surface-container-high: #191A1E (Trạng thái Active/Hover)
Màu nhấn & Logic ngữ nghĩa: primary: #4BA353 (Xanh lá hoạt động – dùng cho trạng thái và thành công)
5 Phương pháp để tạo một tệp DESIGN.md từ đầu (không cần Figma)
Mỗi phương pháp đều có những ưu và nhược điểm khác nhau:
Phương pháp 1 — Google Stitch: Cách trực tiếp nhất. Bạn mô tả dự án của mình bằng ngôn ngữ tự nhiên hoặc dán một URL có sẵn, Stitch sẽ trích xuất toàn bộ hệ thống thiết kế và tạo ra một tệp DESIGN.md tiện lợi.
Phương pháp 2 — Trò chuyện với AI: Hãy mô tả thẩm mỹ mong muốn của bạn cho Claude hoặc ChatGPT, cung cấp các tài liệu tham khảo trực quan và yêu cầu nó tạo cấu trúc DESIGN.md theo mẫu 9 phần.
Phương pháp 3 — Claude Code Skills: Khuyên dùng cho các dự án lớn hơn. Hệ sinh thái kỹ năng của Claude Code bao gồm plugin frontend-design chính thức từ Anthropic, hướng dẫn Claude xác định hướng thẩm mỹ trước khi viết bất kỳ dòng mã nào.
Phương pháp 4 — Các công cụ chuyên dụng: Các dịch vụ như figmadesignmd.com chấp nhận các URL Figma, hình ảnh hoặc PDF và tự động tạo DESIGN.md bằng Claude AI.
Phương pháp 5 — Tự viết thủ công: Bạn có thể tự viết bằng Markdown, chỉ định các quy tắc của riêng mình mà không cần bất kỳ cú pháp đặc biệt nào. Khuyến nghị là bắt đầu với màu sắc và kiểu chữ trước, sau đó thêm hướng dẫn thành phần và cuối cùng là các quy tắc khoảng cách.
