Awesome Design.MD - Áp dụng design system của các website nổi tiếng cho site của bạn

 (github.com/VoltAgent)
114 điểm bởi xguru 16 ngày trước | 5 bình luận | Chia sẻ qua WhatsApp
  • DESIGN.md là khái niệm do Google Stitch giới thiệu, một tài liệu thiết kế dạng văn bản để AI agent đọc và tạo UI nhất quán
  • Không cần Figma, JSON schema hay tooling riêng; chỉ cần sao chép một file Markdown duy nhất vào thư mục gốc của dự án là AI coding agent có thể nhận diện ngay phong cách UI
  • Đi thành cặp với AGENTS.md hiện có, trong đó DESIGN.md định nghĩa diện mạo và cảm giác thị giác
  • Mỗi file được cấu thành từ 9 mục tiêu chuẩn như bảng màu, typography, styling của component, layout, hành vi responsive, v.v.
  • Mỗi site cung cấp bộ 3 gồm DESIGN.md + preview.html + preview-dark.html
  • Bao gồm design system của hơn 60 dịch vụ thuộc các nhóm AI, công cụ phát triển, fintech, enterprise như Claude, Vercel, Stripe, Notion, Figma, Cursor
    • Sao chép DESIGN.md của site mong muốn vào thư mục gốc dự án và yêu cầu AI agent tham chiếu file đó để build UI
    • Chỉ với một câu "Hãy tạo cho tôi một trang trông như thế này", có thể tạo ra UI khớp với site gốc
  • Giấy phép MIT

Cấu trúc của từng file DESIGN.md

  • Tuân theo định dạng Stitch DESIGN.md và được mở rộng thành 9 mục dưới đây

    # Mục Nội dung ghi nhận
    1 Visual Theme & Atmosphere Mood, mật độ, triết lý thiết kế
    2 Color Palette & Roles Tên màu + HEX + vai trò chức năng
    3 Typography Rules Font family, bảng phân cấp tổng thể
    4 Component Stylings Nút, thẻ, input, điều hướng và trạng thái
    5 Layout Principles Thang khoảng cách, lưới, triết lý khoảng trắng
    6 Depth & Elevation Hệ thống đổ bóng, phân tầng bề mặt
    7 Do's and Don'ts Hướng dẫn thiết kế và anti-pattern
    8 Responsive Behavior Breakpoint, touch target, chiến lược thu gọn
    9 Agent Prompt Guide Tham chiếu màu nhanh, prompt dùng ngay

Bộ sưu tập được bao gồm

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

Bài viết liên quan

5 bình luận

 
hidarite 16 ngày trước

Ý tưởng thì hay và có vẻ hữu ích thật đấy...
Nhưng thiết kế web cũng có bản quyền mà,
Tôi hơi băn khoăn không biết việc sao chép nguyên xi rồi áp dụng như thế này có ổn về mặt bản quyền không, và liệu có vấn đề gì về đạo đức nghề nghiệp hay không.
 
tsboard 10 ngày trước

Tôi cũng nghĩ ngay đến điều này. Dạo này có cảm giác như người ta cứ mặc nhiên giả định rằng các dịch vụ hay agent AI đang có kiểu quyền hạn gần như đứng trên pháp luật. Cứ đi tiếp trong trạng thái bị bịt mắt một nửa như thế này liệu có ổn không? Kiểu vậy...
 
kaydash 15 ngày trước

Hay đấy. Những người làm frontend và thiết kế thường chuẩn bị sẵn mấy thứ như thế này rồi mới bắt đầu.
 
m00nlygreat 16 ngày trước

Nhưng thông thường hệ thống thiết kế được giữ dưới dạng các đoạn mã bên trong framework frontend, nên chẳng phải cần dùng chung cái đó sao..?

Việc làm theo DESIGN.md có vẻ như mang nghĩa là mỗi lần lại tự ý tạo ra màu sắc và chỉ dẫn tương ứng...
 
hmmhmmhm 16 ngày trước

Mình nghĩ sẽ tốt hơn nếu nó được dùng không chỉ để sao chép đơn thuần, mà như một cách để tạo ra một hệ thống thiết kế mới dựa trên nhiều hệ thống thiết kế khác nhau.