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.
Phù hợp với
- Người vibe coding muốn giao cho AI một visual system cụ thể trước khi code
- Developer dùng Cursor, Claude Code, Codex, v0 hoặc Lovable
- Người muốn cải thiện UI mà không mô tả màu, font và spacing từ đầu
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 và tải về
Link ngoài và tài liệu liên quan
- NguồnChính
Đọc tiếp
Có thể bạn sẽ cần những thứ này tiếp theo
AI Coding
Dán URL, lấy luôn design system của một website để đưa cho AI code
Một công cụ mã nguồn mở giúp đọc giao diện đang render rồi gom màu, typography, spacing, shadow, breakpoint và component style thành design tokens hoặc DESIGN.md để đưa thẳng cho coding agent.
Xem tiếp
AI Coding
Kéo thả giao diện mobile xong, copy prompt đưa AI code tiếp
Một công cụ miễn phí khá vui cho Android và web: ráp giao diện trực quan bằng component có sẵn, chỉnh chuyển động, thử luồng màn hình rồi xuất thành prompt để AI coding tool làm phần còn lại.
Xem tiếp