Chuyển tới nội dung chính
Dev Templates
Khám phá
Dev Experience4 phút đọc

getdesign.md: kho DESIGN.md để AI agent dựng UI theo brand

Một bộ sưu tập DESIGN.md "lấy cảm hứng" từ các brand lớn — thả một file vào repo, coding agent dựng UI theo đúng phong cách đó, đỡ phải đặc tả lại từ đầu.

Bởi Phạm Thanh Tùng

Khi bảo AI agent dựng UI, kết quả thường đẹp nhưng... generic — một màu xanh bluish, bo tròn vừa phải, font sans-serif trung tính. Nó đúng nhưng không có brand.

Cách phổ biến để khắc phục là viết một file DESIGN.md mô tả chi tiết hệ màu, typography, spacing, component của project. Agent đọc file đó trước khi sinh UI. Dự án này cũng dùng đúng pattern đó (xem DESIGN.md ở root repo).

Vấn đề: viết một DESIGN.md đủ chi tiết tốn vài tiếng. Và getdesign.md đang giải quyết đúng cho khúc đó.

Nó là gì

Một kho sưu tập 68 file DESIGN.md "lấy cảm hứng" từ design system của các brand nổi: Airbnb, Stripe, Vercel, Figma, Apple, Spotify, SpaceX, IBM, Lamborghini... Mỗi file là một bản mô tả đầy đủ — palette, typography, component pattern, spacing, motion — viết theo format agent-friendly.

Slogan của nó ngắn gọn: "Drop one in, let AI build matching UI." Thay vì ngồi tự viết đặc tả, bạn copy file DESIGN.md của Airbnb vào repo, rồi bảo agent "dựng trang pricing theo DESIGN.md này" — output sẽ có coral accent ấm, photography-driven, đúng tinh thần Airbnb.

Khi nào nên dùng

• Prototype nhanh để pitch ý tưởng — cần UI nhìn "ra dáng" trong 30 phút, không phải bỏ một ngày nghĩ màu và typography.

• Học design system qua ví dụ — mỗi file là một bài case study cô đọng. Đọc DESIGN.md của Stripe tốt hơn đọc 20 bài blog về "why Stripe's design works".

• Làm moodboard kỹ thuật — dev không phải designer nhưng cần communicate với agent về visual direction.

Khi nào không nên

Khi bạn muốn brand thật sự của mình. Mô phỏng Airbnb hay Stripe ra một sản phẩm đi bán là đường tắt dẫn tới một sản phẩm nhìn như Airbnb hay Stripe — không phải sản phẩm của bạn. DESIGN.md nên là tài liệu của bạn, có bản sắc riêng.

Cách dùng lành mạnh: tham khảo cấu trúc file, học cách viết một spec cho agent, rồi tự viết DESIGN.md riêng cho dự án. Đây cũng là cách mình dùng nó cho Dev Templates.

Xem thêm

Danh sách đầy đủ 68 file + tính năng request brand mới có tại getdesign.md. Source code kho sưu tập mở ở VoltAgent/awesome-design-md.

Thẻ

  • AI
  • Design System
  • Tooling
  • DX

Bài viết khác