Tôi đã yêu cầu một công cụ AI tạo một trang cài đặt (settings page). Trông nó khá ổn.
Sau đó, tôi yêu cầu tạo một trang bảng giá (pricing page). Các nút bấm tròn hơn. Màu xanh lam hơi khác một chút. Lại còn có thêm cả hiệu ứng gradient màu tím.
Quan điểm của tôi: vấn đề không phải là AI có gu thẩm mỹ tệ. Vấn đề là tôi chưa bao giờ nói cho nó biết gu của mình là gì.
DESIGN.md chính là cách tôi nói cho nó biết. Và tôi nghĩ đây là tệp quan trọng nhất mà các nhà thiết kế hiện vẫn chưa viết.
Một cách dễ hiểu để hình dung về nó:
Ý tưởng lớn ở đây: các quy tắc thiết kế nên nằm ở nơi AI làm việc. Các tác nhân làm việc bên trong mã nguồn (code), chứ không phải bên trong các tệp Figma hay các tệp PDF hướng dẫn thương hiệu. Vì vậy, hệ thống thiết kế của bạn cũng phải nằm trong mã nguồn.
Các nhà thiết kế gọi đó là rác AI (AI slop). Các dải màu gradient tím. Các thẻ (cards) bo tròn khổng lồ. Dùng Emoji làm biểu tượng. Cái gì cũng đổ bóng.
Và điều này ngày càng trở nên tồi tệ hơn:
Mọi thứ đã tiến triển rất nhanh sau đó:
Lớp 1: token. Một khối YAML nhỏ ở trên cùng chứa các giá trị chính xác được chia thành năm nhóm: màu sắc (colors), kiểu chữ (typography), độ bo góc (rounded), khoảng cách (spacing) và thành phần (components). Các thành phần có thể trỏ đến các token khác, như {colors.primary}, do đó chỉ cần thay đổi một chỗ là tất cả sẽ được cập nhật.
Lớp 2: lý do. Bên dưới phần token là văn bản Markdown thông thường. Bản đặc tả đề xuất các phần sau, theo thứ tự này: Tổng quan (Overview), Màu sắc (Colors), Kiểu chữ (Typography), Bố cục (Layout), Độ nổi và Chiều sâu (Elevation and Depth), Hình khối (Shapes), Thành phần (Components), và Nên làm và Không nên làm (Do's and Don'ts). Bạn có thể bỏ qua một số phần, nhưng phải giữ đúng thứ tự.
Tại sao lại cần hai lớp? Một mã màu hex không thể nói rằng "chỉ sử dụng màu điểm nhấn (accent color) cho hành động chính, không bao giờ dùng hai lần trên một màn hình." Nhưng một câu văn thì có thể. Token cho AI biết cái gì. Câu chữ hướng dẫn cho nó cách suy nghĩ.
Nó sẽ phát hiện 9 loại vấn đề, chẳng hạn như tham chiếu token bị hỏng, thiếu màu chính và các phần bị sai thứ tự. Nó thậm chí còn kiểm tra xem màu sắc của các thành phần có đáp ứng tỷ lệ tương phản WCAG AA là 4.5:1 hay không. Sau đó, hãy yêu cầu công cụ AI của bạn xây dựng ba màn hình thực tế. Mỗi sai sót bạn nhìn thấy chính là một quy tắc đang bị thiếu.
AGENTS.md là hành vi: cách tác nhân nên hoạt động trong dự án của bạn.
Những hạn chế thực tế:
DESIGN.md là một ý tưởng nhỏ: viết các quy tắc thiết kế của bạn dưới dạng văn bản thuần túy và đặt chúng vào nơi AI làm việc. Hãy bắt đầu với màu sắc, phông chữ, các nút bấm và năm quy tắc "Không nên làm" thật thẳng thắn. Thử nghiệm nó trên ba màn hình. Cải thiện nó.
Một giờ đồng hồ đó có thể giúp bạn tiết kiệm được nhiều tuần sửa chữa các đống rác UI do AI tạo ra.
Bạn đã sử dụng DESIGN.md chưa, hay vẫn đang tự tay sửa các kết quả của AI? Hãy cho tôi biết ở phần bình luận nhé.
Tham khảo: Medium
Sau đó, tôi yêu cầu tạo một trang bảng giá (pricing page). Các nút bấm tròn hơn. Màu xanh lam hơi khác một chút. Lại còn có thêm cả hiệu ứng gradient màu tím.
Đây là vấn đề tiềm ẩn lớn nhất đối với giao diện người dùng (UI) do AI tạo ra vào năm 2026. AI thì nhanh, nhưng nó không có bộ nhớ về việc sản phẩm của tôi nên trông như thế nào. Mỗi câu lệnh (prompt) là một lần đoán hoàn toàn mới.
Quan điểm của tôi: vấn đề không phải là AI có gu thẩm mỹ tệ. Vấn đề là tôi chưa bao giờ nói cho nó biết gu của mình là gì.
DESIGN.md chính là cách tôi nói cho nó biết. Và tôi nghĩ đây là tệp quan trọng nhất mà các nhà thiết kế hiện vẫn chưa viết.
DESIGN.md là gì?
Nó liệt kê các màu sắc, kiểu chữ, khoảng cách, hình khối và quy tắc thành phần dưới dạng các giá trị chính xác, sau đó giải thích bằng những từ ngữ đơn giản về cách sử dụng chúng.
Một cách dễ hiểu để hình dung về nó:
[]README.md cho mọi người biết dự án của bạn là gì.
[]AGENTS.md (hoặc CLAUDE.md) cho các tác nhân AI biết cách hoạt động trong mã nguồn của bạn.- DESIGN.md cho các tác nhân AI biết sản phẩm của bạn nên trông như thế nào.
Ý tưởng lớn ở đây: các quy tắc thiết kế nên nằm ở nơi AI làm việc. Các tác nhân làm việc bên trong mã nguồn (code), chứ không phải bên trong các tệp Figma hay các tệp PDF hướng dẫn thương hiệu. Vì vậy, hệ thống thiết kế của bạn cũng phải nằm trong mã nguồn.
Tại sao AI lại tạo ra UI sai lệch với thương hiệu?
Các công cụ AI tạo ra UI sai lệch thương hiệu vì chúng không biết hệ thống thiết kế của bạn. Khi một câu lệnh yêu cầu "tạo một trang bảng giá", mô hình sẽ lấp đầy mọi khoảng trống bằng các mẫu thiết kế phổ biến nhất từ dữ liệu huấn luyện của nó. Đó là lý do tại sao rất nhiều UI do AI tạo ra trông đều na ná nhau.Các nhà thiết kế gọi đó là rác AI (AI slop). Các dải màu gradient tím. Các thẻ (cards) bo tròn khổng lồ. Dùng Emoji làm biểu tượng. Cái gì cũng đổ bóng.
Và điều này ngày càng trở nên tồi tệ hơn:
- AI quên mất dữ liệu giữa các phiên làm việc. Lỗi vừa sửa hôm qua thì hôm nay lại mất.
- Những sai lệch nhỏ cộng dồn lại. Một màu xám bị sai thì không sao. Nhưng một màu xám bị sai trên 40 màn hình sẽ tạo ra một sản phẩm lộn xộn.
- Không ai ghi chép lại các quy tắc. Chúng chỉ nằm trong đầu ai đó hoặc trong một tệp Figma mà AI không thể mở được.
DESIGN.md bắt nguồn từ đâu?
DESIGN.md bắt nguồn từ bên trong Google Stitch, công cụ thiết kế UI bằng AI của Google Labs. Vào ngày 21 tháng 4 năm 2026, Google Labs đã mở mã nguồn bản đặc tả dự thảo để bất kỳ công cụ nào cũng có thể sử dụng. Trong thông báo của mình, Google cho biết các tác nhân giờ đây có thể "biết chính xác một màu sắc được dùng để làm gì" thay vì phải suy đoán.Mọi thứ đã tiến triển rất nhanh sau đó:
[]Bản đặc tả chính thức nằm trong kho lưu trữ design.md của Google Labs trên GitHub. Nó sử dụng giấy phép Apache 2.0 và vẫn được đánh dấu là bản alpha. Nó đã vượt mốc 26.000 sao vào tháng 9 năm 2026.
[]Các thư viện cộng đồng như Awesome DESIGN.md của VoltAgent thu thập các tệp dựa trên thiết kế công khai của các thương hiệu như Stripe, Vercel và Airbnb. Kho lưu trữ đó đã vượt mốc 100.000 sao.- Các công cụ tạo tự động (Generators) hiện có thể trích xuất các token (thành phần thiết kế) từ Figma và tự động viết một tệp DESIGN.md cho bạn.
Bên trong tệp DESIGN.md có những gì?
Một tệp DESIGN.md có hai lớp (layers): các token thiết kế ở trên cùng và các lý do thiết kế ở phần thân.
Lớp 1: token. Một khối YAML nhỏ ở trên cùng chứa các giá trị chính xác được chia thành năm nhóm: màu sắc (colors), kiểu chữ (typography), độ bo góc (rounded), khoảng cách (spacing) và thành phần (components). Các thành phần có thể trỏ đến các token khác, như {colors.primary}, do đó chỉ cần thay đổi một chỗ là tất cả sẽ được cập nhật.
Lớp 2: lý do. Bên dưới phần token là văn bản Markdown thông thường. Bản đặc tả đề xuất các phần sau, theo thứ tự này: Tổng quan (Overview), Màu sắc (Colors), Kiểu chữ (Typography), Bố cục (Layout), Độ nổi và Chiều sâu (Elevation and Depth), Hình khối (Shapes), Thành phần (Components), và Nên làm và Không nên làm (Do's and Don'ts). Bạn có thể bỏ qua một số phần, nhưng phải giữ đúng thứ tự.
Tại sao lại cần hai lớp? Một mã màu hex không thể nói rằng "chỉ sử dụng màu điểm nhấn (accent color) cho hành động chính, không bao giờ dùng hai lần trên một màn hình." Nhưng một câu văn thì có thể. Token cho AI biết cái gì. Câu chữ hướng dẫn cho nó cách suy nghĩ.
Ví dụ về một tệp DESIGN.md bạn có thể sao chép
Dưới đây là một ví dụ ngắn cho một ứng dụng tài chính giả định. Hãy thay đổi các giá trị để phù hợp với sản phẩm của bạn.
Mã:
---
version: alpha
name: Ledger
colors:
primary: "#1F3A5F"
accent: "#2F80ED"
surface: "#FFFFFF"
error: "#DC2626"
typography:
headline:
fontFamily: Inter
fontSize: 32px
fontWeight: 600
body:
fontFamily: Inter
fontSize: 16px
rounded:
md: 10px
spacing:
sm: 8px
md: 16px
components:
buttonPrimary:
backgroundColor: "{colors.accent}"
textColor: "{colors.surface}"
rounded: "{rounded.md}"
Overview (Tổng quan)
Bình tĩnh và đáng tin cậy. Nhiều không gian trắng. Những con số là yếu tố chính (hero).
Colors (Màu sắc)
Màu nhấn (Accent) chỉ dành cho một hành động chính duy nhất trên màn hình.
Màu lỗi (Error) chỉ dành cho các thanh toán thất bại và lỗi biểu mẫu.
Do's and Don'ts (Nên và Không nên)
Nên duy trì độ tương phản ít nhất là 4.5:1 cho tất cả các văn bản.
Không sử dụng hiệu ứng gradient hoặc biểu tượng emoji.
Không thêm màu sắc mới. Nếu thiếu màu, hãy hỏi.Cách tự viết DESIGN.md trong 6 bước
Nếu bạn có thể xây dựng một hệ thống thiết kế trên Figma, bạn hoàn toàn có thể viết nó bằng Markdown.
[]Mô tả hiện tại, không phải viễn cảnh của bạn. Lấy màu sắc, phông chữ và khoảng cách thực tế từ sản phẩm đang chạy của bạn. Một tệp mô tả bản thiết kế lại (redesign) chưa được xây dựng sẽ khiến AI trộn lẫn giữa phong cách cũ và mới.
[]Đặt tên màu sắc theo chức năng. Sử dụng "accent" (nhấn), "surface" (bề mặt) và "error" (lỗi), thay vì "blue500". Khi AI cần một màu cảnh báo, "error" là một câu trả lời rõ ràng.
[]Đặt tên kiểu chữ theo mục đích. Headline (Tiêu đề), body (nội dung) và label (nhãn), kèm theo vị trí sử dụng của từng loại.
[]Thêm quy tắc cho thành phần. Độ bo góc, padding và màu sắc chính xác cho các nút, ô nhập liệu và thẻ, cộng với một dòng về hành vi như "một nút chính trên mỗi màn hình".
[]Viết những quy tắc Không nên làm (Don'ts) một cách thẳng thắn. "Không dùng gradient." "Không đổ bóng cho các thẻ." "Không dùng quá hai độ đậm phông chữ trên một màn hình." Đây là nơi mang lại nhiều giá trị nhất.
[]Kiểm tra lỗi (Lint), sau đó thử nghiệm. Chạy trình kiểm tra chính thức trong thư mục dự án của bạn:
Nó sẽ phát hiện 9 loại vấn đề, chẳng hạn như tham chiếu token bị hỏng, thiếu màu chính và các phần bị sai thứ tự. Nó thậm chí còn kiểm tra xem màu sắc của các thành phần có đáp ứng tỷ lệ tương phản WCAG AA là 4.5:1 hay không. Sau đó, hãy yêu cầu công cụ AI của bạn xây dựng ba màn hình thực tế. Mỗi sai sót bạn nhìn thấy chính là một quy tắc đang bị thiếu.
Cách sử dụng DESIGN.md với Claude Code, Cursor và Codex?
[]Claude Code: thêm một dòng vào CLAUDE.md như "Trước khi xây dựng bất kỳ UI nào, hãy đọc DESIGN.md và chỉ sử dụng các giá trị của nó. Không bao giờ được tự phát minh ra màu sắc, phông chữ hoặc khoảng cách."
[]Cursor: thêm dòng tương tự vào project rules (quy tắc dự án) của bạn, hoặc nhắc đến @DESIGN.md trong câu lệnh.
[]Codex và các tác nhân khác: thêm dòng này vào AGENTS.md, tệp mà nhiều tác nhân tự động đọc.
[]Google Stitch: xuất tệp DESIGN.md từ một dự án và nhập nó vào một dự án khác.
DESIGN.md vs AGENTS.md vs SKILL.md
Các tệp này không cạnh tranh với nhau. Mỗi tệp làm một công việc khác nhau.
AGENTS.md là hành vi: cách tác nhân nên hoạt động trong dự án của bạn.
[]SKILL.md là tác vụ: cách để thực hiện tốt một công việc cụ thể.
[]DESIGN.md là giao diện: sản phẩm nên trông như thế nào.
DESIGN.md có thực sự hiệu quả không?
Công ty thiết kế TDP cho biết khách hàng của họ thường thấy các giao diện AI tạo ra kém chất lượng "giảm hơn một nửa trong tuần đầu tiên." Điều đó phù hợp với mục đích mà định dạng này được xây dựng: ít phải đoán hơn, ít phải sửa hơn.
Những hạn chế thực tế:
[]Bản đặc tả vẫn đang ở giai đoạn alpha. Sẽ còn có những thay đổi.
[]Các tác nhân đôi khi vẫn mắc lỗi, chủ yếu là trong các phiên làm việc dài. Vẫn cần con người đánh giá UI.
[]Nó không tự động đồng bộ. Phải có người cập nhật nó khi thiết kế thay đổi.
[]Nó không thể mang lại gu thẩm mỹ cho bạn. Một hệ thống thiết kế yếu kém được viết ra một cách rõ ràng thì vẫn là yếu kém.
Trong nhiều năm qua, các nhà thiết kế bàn giao các tệp Figma và hy vọng chúng được lập trình một cách chính xác. Giờ đây, các tác nhân AI xây dựng phần lớn UI và nhiều nhà thiết kế cảm thấy họ đang mất kiểm soát. DESIGN.md sẽ trao lại quyền kiểm soát đó.
Các câu hỏi phổ biến về DESIGN.md
DESIGN.md có phải là một tiêu chuẩn chính thức không?
Nó là một bản đặc tả dự thảo mã nguồn mở từ Google Labs, vẫn đang ở giai đoạn alpha. Nó chưa phải là một tiêu chuẩn chính thức, nhưng đang nhanh chóng trở thành một định dạng chung.Tôi có cần Google Stitch để sử dụng nó không?
Không. Nó chỉ là một tệp Markdown. Nó hoạt động với Claude Code, Cursor, Codex, v0, Lovable và bất kỳ tác nhân nào có thể đọc các tệp dự án.Tôi nên đặt tệp ở đâu?
Ở thư mục gốc dự án của bạn, bên cạnh tệp README.md. Sau đó trỏ đến nó từ CLAUDE.md, AGENTS.md hoặc các quy tắc (rules) Cursor của bạn.DESIGN.md có giống với design tokens không?
Không. Các token chỉ là các giá trị. DESIGN.md bổ sung thêm các lý do và quy tắc bằng văn bản, và đó mới là thứ giúp AI đưa ra lựa chọn đúng đắn.Lời kết
AI có thể xây dựng UI nhanh hơn bất kỳ đội ngũ nào. Nhưng tốc độ mà không có hệ thống thiết kế thì chỉ tạo ra một mớ lộn xộn nhanh hơn mà thôi.DESIGN.md là một ý tưởng nhỏ: viết các quy tắc thiết kế của bạn dưới dạng văn bản thuần túy và đặt chúng vào nơi AI làm việc. Hãy bắt đầu với màu sắc, phông chữ, các nút bấm và năm quy tắc "Không nên làm" thật thẳng thắn. Thử nghiệm nó trên ba màn hình. Cải thiện nó.
Một giờ đồng hồ đó có thể giúp bạn tiết kiệm được nhiều tuần sửa chữa các đống rác UI do AI tạo ra.
Bạn đã sử dụng DESIGN.md chưa, hay vẫn đang tự tay sửa các kết quả của AI? Hãy cho tôi biết ở phần bình luận nhé.
Tham khảo: Medium
