Bạn đã dùng AI để viết code giao diện, chạy ra xem thì… đúng là đủ thứ có, nhưng trông cứ như mấy cái template free trên internet ghép lại. Không sai, nhưng không có hồn. Vấn đề không phải ở AI — mà là AI không biết bạn muốn nó trông như thế nào. Đó chính xác là thứ mà Awesome Design MD giải quyết.
Awesome Design MD là gì?
Đây là một kho lưu trữ mã nguồn mở gồm hơn 70 file design.md — mỗi file mô tả toàn bộ hệ thống thiết kế của một trang web nổi tiếng, viết dưới dạng văn bản thông thường.
Ý tưởng đến từ Google Stitch — một công cụ dùng file markdown để mô tả nguyên tắc thiết kế. Thay vì file Figma hay tài liệu phức tạp, bạn chỉ cần một file văn bản có ghi rõ:
- Bảng màu và mã hex cụ thể
- Kiểu chữ, cỡ chữ, khoảng cách dòng
- Quy tắc bo góc, đổ bóng, khoảng trắng
- Cách xây dựng nút bấm, thẻ, biểu mẫu
- Hành vi giao diện trên màn hình nhỏ (mobile, tablet)
Tại sao dùng markdown? Vì đó là định dạng mô hình ngôn ngữ lớn đọc tốt nhất. Không cần phân tích cú pháp, không cần chuyển đổi — thả vào là đọc được ngay.
Kho này hiện có hơn 36.000 sao trên GitHub và vẫn đang tăng. Các trang đã có file thiết kế gồm: Airbnb, Stripe, Linear, Notion, Vercel, Supabase, Spotify, Figma, Tesla, BMW, Uber, Ferrari… và còn nhiều hơn nữa.
Mẹo nhỏ: Mỗi file trong kho đều có bản xem trước HTML ở hai chế độ sáng và tối. Bạn có thể mở trình duyệt xem trước khi quyết định dùng cái nào — đỡ chọn mù.
OpenCode là gì, và tại sao dùng cùng nhau?
OpenCode là công cụ viết code bằng AI chạy ngay trong cửa sổ lệnh. Mã nguồn mở, miễn phí, hiện có hơn 150.000 sao trên GitHub. Nó hỗ trợ nhiều nhà cung cấp AI như OpenAI, Anthropic, Google Gemini, Grok, thậm chí cả mô hình chạy cục bộ local qua Ollama.
Giao diện của OpenCode có hai chế độ:
- Plan mode — chỉ đọc và phân tích, không chỉnh sửa file. Dùng để xem kế hoạch trước.
- Build mode — thực sự tạo và sửa code.
Chuyển qua lại giữa hai chế độ bằng phím Tab.
Hai file, hai nhiệm vụ khác nhau
Trước khi bắt tay vào làm, cần hiểu rõ một điểm mà nhiều người hay bỏ qua.
Khi chạy /init, OpenCode tạo ra file agents.md — file này chứa thông tin về dự án của bạn: đang dùng framework nào, cấu trúc thư mục ra sao, quy ước đặt tên như thế nào. Nói ngắn gọn: nó trả lời câu hỏi “xây bằng cách nào?”
Còn DESIGN.md từ kho Awesome Design MD trả lời câu hỏi khác: “trông như thế nào?” — màu nền là #0A0A0A hay #FFFFFF, font chữ là Inter hay Geist, bo góc nút bấm là 4px hay 12px, khoảng cách giữa các phần tử là bao nhiêu…
Hai câu hỏi đó hoàn toàn độc lập. Nếu nhét cả hai vào một chỗ — ví dụ viết hết vào prompt — AI sẽ cố xử lý tất cả cùng lúc và thường bị lệch: khi thì quên mất quy ước code, khi thì bỏ qua màu sắc đã định. Tách ra thành hai file giúp AI biết rõ lúc nào cần đọc cái gì, và output nhất quán hơn hẳn.
Hình dung đơn giản: agents.md là bản vẽ kỹ thuật, DESIGN.md là bảng màu và style guide của nhà thiết kế.
| File | Vai trò |
|---|---|
agents.md | Nói cho AI biết cách xây dựng — kiến trúc, framework, quy ước code |
design.md | Nói cho AI biết trông như thế nào — màu sắc, chữ, khoảng cách, thành phần |
Tách ra như vậy vì nếu nhét tất cả vào một chỗ, AI dễ bị loạn, output bắt đầu lệch hướng. Mỗi file giữ một mối lo, AI làm việc rõ ràng hơn hẳn.
Quy trình thực tế: từ đầu đến cuối
Bước 1 — Chuẩn bị dự án
Bạn có thể dùng dự án đang có hoặc tạo mới. Có thể là Next.js, Vite, hay bất cứ thứ gì bạn đang dùng. Mở cửa sổ lệnh, điều hướng vào thư mục dự án.
Bước 2 — Lấy file thiết kế
Trang web chính thức của kho này là getdesign.md — nơi bạn có thể xem danh sách tất cả file thiết kế, xem trước giao diện, rồi lấy lệnh cài đặt. Hiện có hơn 71 file, từ Stripe, Airbnb, Notion, Vercel, Spotify, Linear, Figma, Tesla, BMW đến nhiều cái khác.
Cách 1 — Dùng lệnh npx (khuyên dùng)
Đây là cách nhanh nhất. Vào trang của thiết kế bạn muốn trên getdesign.md, sẽ thấy lệnh cài sẵn. Ví dụ muốn lấy phong cách Stripe:
npx getdesign@latest add stripeMuốn phong cách Airbnb:
npx getdesign@latest add airbnbChạy lệnh này từ thư mục gốc của dự án. Lệnh sẽ tự tải và đặt file DESIGN.md vào đúng chỗ — không cần làm gì thêm.
Cách 2 — Tải thủ công từ GitHub
Vào repo VoltAgent/awesome-design-md trên GitHub, mở thư mục design-md, tìm tên thiết kế bạn muốn, copy nội dung file rồi tạo file DESIGN.md ở thư mục gốc dự án. Cách này không cần npx nhưng mất thêm vài bước tay.
Xem trước trước khi chọn
Mỗi thiết kế trên getdesign.md đều có bản xem trước giao diện ở chế độ sáng và tối. Bạn có thể mở xem trong trình duyệt trước khi quyết định — đỡ chọn mù rồi mới phát hiện không hợp.
Mẹo nhỏ: Thử lấy hai, ba file khác nhau, đổi tên thành
DESIGN-stripe.md,DESIGN-notion.md… để so sánh. Khi muốn dùng cái nào thì copy và đổi tên thànhDESIGN.md.
Lưu ý: File phải đặt tên là DESIGN.md và nằm ở thư mục gốc của dự án. Đặt sai chỗ hoặc sai tên là OpenCode không tìm thấy.
Bước 3 — Khởi động OpenCode
Cài OpenCode bằng lệnh curl (nhanh nhất), hoặc qua npm, homebrew trên Mac.
curl -fsSL https://opencode.ai/install | bashSau khi cài xong, gõ lệnh sau trong thư mục dự án:
opencodeGiao diện dòng lệnh sẽ hiện ra.
Bước 4 — Chạy /init trước
Trước khi làm gì, gõ /init. Lệnh này quét cấu trúc dự án và tạo file agents.md — giúp OpenCode hiểu bạn đang dùng framework nào, theo quy ước nào. File này lo phần kiến trúc, còn design.md lo phần hình thức.
Bước 5 — Viết câu lệnh rõ ràng
Đây là bước quan trọng nhất. Đừng để AI tự đoán — hãy chỉ thẳng vào file thiết kế. Ví dụ câu lệnh tốt:
"Xây dựng trang đích dạng responsive cho công cụ dành cho lập trình viên. Dùng file design.md ở thư mục gốc làm tài liệu tham chiếu thiết kế cho toàn bộ quyết định về giao diện. Bao gồm phần hero, lưới tính năng, bảng giá và chân trang có nút kêu gọi hành động. Tuân theo khoảng cách, kiểu chữ và bảng màu trong file thiết kế."Câu lệnh như vậy cho AI hai thứ rõ ràng: làm gì và trông như thế nào. Khác hẳn kiểu “làm cho nó trông hiện đại và sạch” — vừa mơ hồ vừa cho kết quả… không đoán được.
Mẹo nhỏ: Dùng ký tự @ trong OpenCode để trỏ thẳng vào file cụ thể. Gõ @design.md là AI biết chính xác tài liệu nào cần đọc — không còn nhập nhằng.
Bước 6 — Dùng Plan mode nếu dự án phức tạp
Nhấn Tab để chuyển sang Plan mode, hỏi OpenCode về kế hoạch: nó sẽ liệt kê các thành phần sẽ tạo, file nào sẽ chỉnh, và nó hiểu các quy tắc thiết kế ra sao. Khi ưng rồi, nhấn Tab lần nữa để sang Build mode và bắt đầu.
Kết quả trông như thế nào?
Sự khác biệt khi có file thiết kế so với không có khá rõ. Giao diện trông gắn kết hơn, khoảng cách nhất quán, nút bấm và thẻ không còn cảm giác mỗi thứ từ một nơi khác nhau. Vẫn cần chỉnh thêm, nhưng chất lượng ban đầu cao hơn hẳn.
Chi phí thực tế
Cả OpenCode lẫn Awesome Design MD đều miễn phí và mã nguồn mở. Chi phí duy nhất là tiền dùng API của nhà cung cấp AI (GPT, Gemini, Claude…) bạn chọn. Theo kinh nghiệm của nhiều lập trình viên, mỗi tháng dao động từ 100.000 đến 500.000 đồng tùy mức độ sử dụng.
Một lưu ý quan trọng
Các file thiết kế được dựa trên trang web thật, nên output đôi khi trông khá giống nguồn gốc. Hãy thay nội dung, thương hiệu, màu sắc cho phù hợp sản phẩm của bạn. Mục tiêu là mượn kỷ luật thiết kế, không phải sao chép nguyên xi hình thức.
Nếu muốn file thiết kế của một trang chưa có trong kho, bạn có thể yêu cầu thêm qua mục Issues trên GitHub — cộng đồng vẫn đang bổ sung đều.
AI tạo code nhanh, nhưng thiếu “gu” thiết kế — đó là vấn đề thật. Awesome Design MD giải quyết đúng chỗ đó bằng cách cho AI biết chính xác phải tuân theo quy tắc nào. Kết hợp với OpenCode, quy trình này gọn, lặp lại được và dùng được cho nhiều dự án khác nhau.
Bạn thử chưa? Dùng file thiết kế của trang nào thấy ra kết quả hay nhất — chia sẻ bên dưới nhé!
Để lại một bình luận