Kho 2.000+ DESIGN.md cho vibe coder: đưa cho AI là có sẵn cả design system
Kho hơn 2.000 design system có thể đọc bởi AI, lấy từ các website sản phẩm thật. Mỗi mẫu gom màu, typography, spacing và component patterns thành DESIGN.md để đưa thẳng cho coding agent.
Vì sao đáng xem
- Hơn 2.000 design system có thể đọc bởi AI từ các website sản phẩm thực tế
- Mỗi style có màu, typography, spacing, component rules và DESIGN.md
- Có thể copy DESIGN.md vào repo hoặc context để agent dùng như design brief
- Dùng chính file đó làm checklist để agent tự rà lại màu, typography, spacing và component sau khi code
Nếu bạn hay prompt kiểu “làm giao diện premium, modern, clean” rồi nhận lại một UI khá quen mắt, kho này giải quyết đúng phần thường bị thiếu: một design brief đủ cụ thể để agent bám theo.
Thay vì mô tả lại màu, font, khoảng cách và kiểu component bằng tay, bạn chọn một style có sẵn rồi dùng DESIGN.md làm context cho agent.
Cách dùng nhanh
- Chọn style gần với loại sản phẩm bạn đang làm.
- Mở
DESIGN.mdvà copy nội dung. - Đặt file vào repo hoặc paste vào context của coding agent.
- Yêu cầu agent đọc
DESIGN.mdtrước khi code, sau đó đối chiếu lại UI với file khi hoàn thành.
Cách này đặc biệt hợp với landing page, dashboard, pricing, onboarding, docs hoặc một giao diện đang chạy nhưng vẫn còn cảm giác quá generic.
Vì sao đáng lưu lại
Thay vì để coding agent tự đoán phong cách, bạn đưa cho nó một hệ thống thị giác cụ thể ngay từ đầu.
2.000+ style để chọn
Kho style lớn giúp tìm nhanh hướng phù hợp cho SaaS, dashboard, editorial, fintech, devtool và nhiều kiểu sản phẩm khác.
Không chỉ là ảnh
Mỗi style đi kèm thông tin về màu, typography, spacing, component patterns và file DESIGN.md có thể copy.
Đưa thẳng cho agent
File có thể dùng làm context cho Cursor, Claude Code, Codex, v0, Lovable và các coding agent đọc được file dự án.
Review dễ hơn
Sau khi agent dựng xong, bạn có thể yêu cầu nó kiểm tra lại typography, spacing, màu và component theo cùng một DESIGN.md.
Muốn lấy DESIGN.md về thử ngay?
Mở thư viện, chọn một style gần với dự án của bạn rồi đưa file DESIGN.md cho coding agent trước khi bắt đầu dựng giao diện.
Điểm cần lưu ý
- • Dùng style làm reference và constraints, không nên yêu cầu agent sao chép nguyên website nguồn
- • DESIGN.md giúp giữ visual language nhất quán, còn cấu trúc sản phẩm và UX vẫn cần brief rõ ràng
Liên kết & tài nguyên
Nguồn tham khảo
Mở nguồn gốc hoặc tài liệu liên quan để kiểm tra thêm thông tin trong bài.