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.
Vì sao đáng xem
- Chỉ cần URL để lấy màu, font, spacing, border, shadow, breakpoint và component style từ giao diện thật
- Có thể xuất thẳng DESIGN.md để coding agent đọc trước khi dựng UI
- Hỗ trợ W3C design tokens, Tailwind theme, WCAG và crawl nhiều trang khi cần bộ token đầy đủ hơn
- Có thể nối qua MCP để agent tự gọi công cụ trong workflow thay vì chạy thủ công từng lần
Nếu bạn từng nhìn một website rồi nghĩ “mình muốn AI làm giao diện có vibe gần như thế này”, phần khó thường không nằm ở code mà ở việc truyền đúng visual language cho agent.
Công cụ này xử lý đúng đoạn đó: nó mở website bằng browser, đọc computed styles từ DOM rồi gom lại thành màu sắc, typography, spacing, border, radius, shadow, motion, breakpoint và component style. Sau đó bạn có thể xuất thành DESIGN.md, W3C design tokens hoặc Tailwind theme tùy workflow.
Cách dùng nhanh
- Lấy URL của website bạn muốn dùng làm reference.
- Mở công cụ ở nút bên dưới và cài CLI theo hướng dẫn trong README.
- Chạy với URL cần phân tích, thêm tùy chọn
--design-mdnếu muốn tạo file dành cho AI agent. - Đưa
DESIGN.mdvào repo hoặc context rồi nói agent: đọc file này trước khi dựng UI và dùng nó làm design constraints.
Nếu website có nhiều trang, có thể dùng chế độ crawl nhiều page. Nếu muốn kiểm tra riêng giao diện mobile, dark mode hoặc độ tương phản WCAG thì công cụ cũng có tùy chọn tương ứng.
Xem demo trước khi thử
Điểm mình thích ở workflow này là AI không còn phải đoán chữ “đẹp” nghĩa là gì. Nó có một tập token và rule cụ thể để bám theo, nên đặc biệt tiện khi làm landing page, dashboard, pricing, onboarding hoặc muốn đồng bộ nhiều màn hình trong cùng một sản phẩm.
Vì sao công cụ này hữu ích với vibe coder
Thay vì prompt bằng những từ khá mơ hồ như premium, clean hay modern, bạn đưa cho agent một bộ thông số mà nó có thể đọc và đối chiếu.
Bóc visual language
Lấy palette, typography, spacing, border, radius, shadow, motion, breakpoint và style của các component phổ biến.
Xuất DESIGN.md
Tạo tài liệu Markdown có cấu trúc để AI agent đọc như một design brief trước khi bắt đầu code.
Crawl nhiều trang
Có thể đọc nhiều page trong cùng site để bộ token ổn định hơn thay vì chỉ dựa vào một landing page.
Nối thẳng với agent
Có MCP để coding agent gọi trực tiếp các tác vụ lấy màu, typography, spacing, component style và design tokens.
Muốn thử với một website bạn đang thích?
Mở repo, làm theo phần cài đặt rồi thử xuất DESIGN.md từ một URL trước. Chỉ vài bước là có thể đưa file đó cho coding agent dùng ngay.
Điểm cần lưu ý
- • Cần Node.js 18+ và cài browser engine một lần trước khi chạy CLI
- • Website dùng Canvas hoặc WebGL nhiều có thể không bóc được đầy đủ vì công cụ chủ yếu đọc DOM và computed styles
- • Nên dùng kết quả như visual reference và constraints, không sao chép nguyên thương hiệu, logo hoặc tài sản nhận diện của website khác
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.