Token có nguồn
Màu, font, kích thước, khoảng cách và bóng được lấy từ style thực tế của phần tử, gồm cả light và dark khi trang có hỗ trợ.
← Về bộ công cụ
// Design System · Miễn phí
Cho AI học đúng ngôn ngữ thiết kế của một website
Design System hướng dẫn AI đo màu, chữ, khoảng cách và cấu trúc giao diện từ một trang tham khảo. Kết quả là tài liệu thiết kế dùng lại được và một trang demo HTML tự chạy.
Tải trực tiếp file ZIP, không cần đăng ký. Skill miễn phí; chi phí công cụ AI do bạn tự chi trả.
DESIGN EXTRACTIONINPUT → OUTPUT
INPUTWebsite tham khảoDOM + computed styles
MÀUCHỮGRIDSHADOW
OUTPUT 01DESIGN_SYSTEM.mdToken + quy tắc
OUTPUT 02demo.htmlHTML tự chạy
// Kết quả \\
Từ cảm giác “trông giống” thành thông số có thể dùng lại
Skill yêu cầu đo trực tiếp trên browser, ghi lại các quyết định thiết kế rồi kiểm tra kết quả bằng mắt.
Quy tắc rõ ràng
Ghi lại component, trạng thái và bố cục thành DESIGN_SYSTEM.md để AI có cơ sở khi mở rộng sang trang mới.
Demo chạy ngay
Tạo demo.html bằng HTML, CSS và JS thuần. Nội dung, logo và ảnh trong demo dùng chỗ trống thay thế.
// Cách dùng \\
Bắt đầu trong 3 bước
Dành cho Claude Code hoặc công cụ AI coding có thể đọc file skill và điều khiển browser.
- 01
Tải và đặt file skill
Giải nén, đặt
SKILL.mdvào.claude/skills/design-system/trong dự án của bạn. - 02
Đưa URL tham khảo
Yêu cầu AI trích design system từ trang bạn chọn. Công cụ cần truy cập được website và có browser để đo style.
- 03
Xem và kiểm tra đầu ra
Đọc
DESIGN_SYSTEM.md, mởdemo.htmlở desktop và mobile, thử light/dark nếu có.
Ví dụ câu lệnh
Dùng skill design-system để trích hệ thống thiết kế từ [URL website tham khảo]. Hãy đo style bằng browser, tạo DESIGN_SYSTEM.md và demo.html, rồi kiểm tra giao diện light/dark.
Thay [URL website tham khảo] bằng địa chỉ của bạn. Browser phải được cấu hình trong công cụ AI trước khi chạy skill.
// Phạm vi \\
Học hệ thống thị giác, giữ nội dung của bạn
Skill tập trung vào pattern, token và cấu trúc component. Bản demo dùng nội dung mẫu để bạn thay bằng thương hiệu, lời giới thiệu và hình ảnh của mình. Mức độ giống phụ thuộc website nguồn, quyền truy cập và khả năng đo của công cụ AI; hãy duyệt kết quả trước khi dùng.
// Trước khi bắt đầu
Hiểu đúng để dùng hiệu quả
Gói tải về có sẵn design system không?
Gói gồm SKILL.md và hướng dẫn cài đặt. Đây là quy trình cho AI thực hiện; DESIGN_SYSTEM.md và demo.html được tạo sau khi AI phân tích website bạn chọn.
Chỉ dán URL vào khung chat có đủ không?
Cần một công cụ AI có thể đọc file, viết file và điều khiển browser để lấy computed styles. Chat chỉ đọc văn bản không đủ cho quy trình này. Các đoạn code browser trong skill là ví dụ, AI cần điều chỉnh theo công cụ đang có.
Có thể dùng cho website của mình thế nào?
Sau khi kiểm tra demo, đưa DESIGN_SYSTEM.md cho AI cùng yêu cầu nội dung và hướng dẫn xây dựng dự án. Tài liệu giữ vai trò quy tắc giao diện để các trang mới dùng chung màu, chữ và component.
// Tải về \\
Bắt đầu với một trang bạn thích
Một file skill, hai đầu ra rõ ràng, miễn phí để thử trong dự án của bạn.