Design DNA — Trích xuất bộ gen thiết kế
Phân tích ảnh/URL tham chiếu thành JSON gồm design token, cảm nhận thị giác và hiệu ứng đặc biệt, rồi dùng chính JSON đó để sinh ra thiết kế mới.
Làm được gì
Design DNA chia bản sắc thiết kế thành ba chiều:
- design_system — những gì đo được: màu, thang chữ, khoảng cách, lưới/layout, bo góc, đổ bóng, chuyển động
- design_style — những gì chỉ cảm nhận được: tâm trạng, cá tính, chiến lược bố cục, mức độ trang trí, triết lý khoảng trắng
- visual_effects — phần không thể diễn tả bằng CSS thuần: Canvas, WebGL/Three.js, particle, shader, hiệu ứng scroll và con trỏ, SVG animation, glassmorphism
Quy trình gồm 3 giai đoạn: xem cấu trúc schema, phân tích tham chiếu thành JSON đầy đủ mọi trường, và sinh HTML/CSS/JS từ JSON đó. Bạn có thể dùng riêng từng giai đoạn hoặc chạy toàn bộ pipeline.
Phù hợp với ai
- Lập trình viên front-end muốn mang "cảm giác" của một website mình thích vào dự án riêng
- Designer / design engineer cần tài liệu hóa design token
- Freelancer, marketer cần dựng nhanh nhiều phiên bản landing page
- Người cần biết hiệu ứng tương tác nên làm bằng CSS, Canvas hay Three.js
Ví dụ sử dụng
- Phân tích tham chiếu: gửi 3 ảnh chụp một landing page và nói "trích xuất design DNA" → nhận về JSON đầy đủ màu, chữ, hiệu ứng.
- Chuyển style: "Làm trang giới thiệu sản phẩm của tôi theo phong cách URL này" → phân tích rồi xuất một file HTML tự chứa.
- Tái tạo hiệu ứng: đưa ảnh hero có particle và hỏi "làm bằng công nghệ gì, dựng lại giúp tôi" → skill chọn CSS/Canvas/Three.js tùy độ nặng và viết code.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/zanwei/design-dna/HEAD/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục SKILL.m từ repo GitHub zanwei/design-dna vào ~/.claude/skills/design-dna/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở Terminal (macOS) hoặc WSL/Git Bash (Windows).
- Tạo thư mục skill nếu chưa có:
mkdir -p ~/.claude/skills - Clone repo vào thư mục skill:
git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna - Kiểm tra trong thư mục có
SKILL.mdcùngreferences/schema.mdvàreferences/generation-guide.md— thiếu các tệp này thì chất lượng phân tích sẽ giảm. - Khởi động lại Claude Code và thử gõ "cho tôi xem schema design DNA" để chắc chắn skill đã được nhận.
- Sau đó chỉ cần đính kèm ảnh tham chiếu hoặc dán URL và yêu cầu "phân tích thiết kế này".