TL;DR

Copy 1 file DESIGN.md vào project root - AI agent của bạn sẽ generate UI khớp với design system của Stripe, Figma, Apple, Tesla... mà không cần bạn giải thích lại từ đầu. Đó là toàn bộ ý tưởng của awesome-design-md, kho lưu trữ do VoltAgent xây dựng và đã đạt 74.100 stars trên GitHub chỉ trong 40 ngày kể từ khi ra mắt ngày 31/3/2026.

Câu chuyện đằng sau DESIGN.md

Google Stitch - công cụ thiết kế UI bằng AI của Google Labs - đã giới thiệu format DESIGN.md như một cách để AI agents đọc và hiểu design system. Ý tưởng đơn giản: thay vì export Figma, tạo JSON schemas hay cấu hình phức tạp, chỉ cần một file markdown thuần.

VoltAgent nhận ra tiềm năng của format này và xây dựng awesome-design-md - một bộ sưu tập các file DESIGN.md được trích xuất từ design system của các thương hiệu lớn trên thực tế. Nguyên tắc: markdown là định dạng mà LLMs đọc tốt nhất, vậy tại sao không dùng nó làm ngôn ngữ giao tiếp giữa designer và AI agent?

Nếu bạn đã quen với AGENTS.md (hướng dẫn AI build gì), thì DESIGN.md là người bạn đồng hành: hướng dẫn AI trông như thế nào.

Cách hoạt động trong 3 bước

  1. Chọn design system từ bộ sưu tập 73 file (Stripe, Linear, Notion, Vercel, Tesla...)
  2. Copy file DESIGN.md vào project root - cạnh README.md của bạn
  3. Nói với AI agent: "Build me a dashboard that follows DESIGN.md" - Claude Code, Cursor, GitHub Copilot đều hiểu ngay

Không cần setup, không cần plugin, không cần token API riêng. File markdown thuần, drop-and-go.

DESIGN.md - file markdown mô tả design system cho AI agents đọc và generate UI

Kỹ thuật đằng sau format DESIGN.md

Mỗi file DESIGN.md được cấu trúc thành 9 section chuẩn, kết hợp hai lớp thông tin:

  • Machine-readable tokens: hex codes chính xác, font families, spacing values, border radius
  • Human-readable rationale: giải thích tại sao màu này được dùng, khi nào dùng component này, cảm giác tổng thể của brand

Cụ thể 9 section trong mỗi file: Visual atmosphere, Color palettes, Typography hierarchies, Component styling (với states), Layout principles, Elevation systems, Design guardrails, Responsive behavior, và Agent prompts - phần cuối này là hướng dẫn trực tiếp cho AI agent.

Google Labs cũng đã open-source format spec chính thức tại google-labs-code/design.md (Apache 2.0) kèm CLI tool @google/design.md với 4 lệnh: lint, diff, export (Tailwind JSON/CSS, W3C DTCG), và spec. Format tự động validate WCAG contrast ratio.

73 design systems từ 9 ngành

8 category trong bộ sưu tập awesome-design-md: AI Platforms, Dev Tools, Fintech, SaaS, Design, E-commerce, Automotive, Media, Backend

Bộ sưu tập hiện có 73 file phân thành 9 nhóm:

  • AI & LLM Platforms (11): Claude, Ollama, Runway, xAI...
  • Developer Tools & IDEs (7): Cursor, Expo, Raycast, Vercel, Warp
  • Backend & DevOps (8): MongoDB, PostHog, Sanity, Supabase
  • Productivity & SaaS (7): Linear, Notion, Zapier, Cal.com
  • Design & Creative Tools (6): Figma, Framer, Webflow
  • Fintech & Crypto (7): Stripe, Coinbase, Binance, Wise
  • E-commerce & Retail (5): Shopify, Nike, Airbnb
  • Media & Consumer Tech (10): Apple, Spotify, NVIDIA, PlayStation, The Verge
  • Automotive (7): Tesla, Ferrari, BMW, Lamborghini

Ngoài ra còn 254 open issues đang request thêm các design systems mới từ cộng đồng.

Vị trí trong ecosystem

Tốc độ tăng trưởng của awesome-design-md đặc biệt ấn tượng khi so sánh với các awesome list kinh điển: đạt 35.082 stars trong 10 ngày đầu, nhanh gấp 10 lần awesome-go và awesome-python trong cùng kỳ. Fork ratio 12,6% cũng cao hơn rõ rệt so với awesome-go (7,8%) và awesome-python (9,5%), cho thấy đây không phải chỉ được bookmark - người dùng đang clone về và dùng thực sự.

Ecosystem xung quanh format này đang mở rộng nhanh:

  • getdesign.md: 71 file với giao diện browse & download
  • designmd.app: 454 design systems (nhiều hơn nhiều so với awesome-design-md)
  • Trong 3 ngày đầu launch: cộng đồng đã tự xây Figma converters, MCP servers, Japanese extensions

Giới hạn cần biết: Format vẫn ở trạng thái alpha. Support đầy đủ từ Figma, v0 và các design tool lớn chưa có. awesome-design-md là lấy cảm hứng từ các brand, không phải file official từ Stripe hay Apple.

Ai nên dùng ngay

Format này hữu ích nhất nếu bạn đang:

  • Vibe coding side project và muốn UI trông chuyên nghiệp ngay từ đầu thay vì tự mày mò design
  • Xây dựng SaaS agentic và cần AI agent generate on-brand UI liên tục mà không cần giải thích lại design system mỗi conversation
  • Prototype nhanh cho khách hàng theo style của một brand cụ thể ("làm giống Stripe", "theo style Linear")
  • Dùng Claude Code, Cursor, hoặc GitHub Copilot và muốn output nhất quán hơn về mặt visual

Kết

awesome-design-md không phải là một framework hay một tool phức tạp - đó chỉ là một bộ sưu tập file markdown. Nhưng 74.100 stars và fork ratio 12,6% nói lên rằng đây đang giải quyết một nhu cầu thực: làm thế nào để AI agents tạo ra UI không chỉ chạy được mà còn trông đẹp và nhất quán.

Trong kỷ nguyên vibe coding, thiếu một ngôn ngữ chung để AI hiểu design system là một vấn đề thực. DESIGN.md là lời đề xuất đơn giản nhất để giải quyết nó.

Nguồn tham khảo: VoltAgent/awesome-design-md · OSS Insight - Growth Analysis · Google Labs - DESIGN.md Format Spec · getdesign.md