Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Design DNA — Trích xuất & áp dụng ADN thiết kế

Phân tích thiết kế tham chiếu thành hồ sơ JSON ba chiều (design system, phong cách, hiệu ứng) rồi dựng lại giao diện mới và tự kiểm chứng màu sắc.

Thiết kế · UITrung cấp★ 1,838⑂ 100Điểm AI 9/10Cập nhật lần cuối: 28 thg 8, 2026

Làm được gì

  • Nhận ảnh, ảnh chụp màn hình hoặc URL và tạo hồ sơ JSON gồm ba chiều: design system (màu, chữ, khoảng cách, lưới, bo góc, đổ bóng, chuyển động), design style (tâm trạng, cá tính, bố cục) và visual effects (Canvas, WebGL, particle, shader, hiệu ứng cuộn).
  • Màu sắc được đo bằng script scripts/measure-colors.mjs thay vì ước lượng bằng mắt, tránh lệch ΔE lớn.
  • Từ JSON đó, kỹ năng sinh ra HTML tự chứa với biến CSS, rồi dùng scripts/verify.mjs chấm điểm ΔE và độ phủ màu giữa ảnh kết quả và bảng màu gốc, tự sửa nếu FAIL.

Phù hợp với ai

  • Lập trình viên front-end muốn tái tạo chính xác tông màu của một website tham chiếu
  • Người phụ trách design system cần tài liệu hoá token và style guide
  • Freelancer/startup cần dựng bản demo nhanh chỉ từ vài ảnh tham chiếu

Ví dụ sử dụng

  1. "Phân tích ảnh này thành design DNA JSON" → xuất hồ sơ đầy đủ ba chiều
  2. "Dựng landing page cho sản phẩm theo đúng phong cách trang này" → chạy liền Phase 2 rồi Phase 3 và xác minh màu
  3. "Cho tôi xem schema của Design DNA" → trình bày toàn bộ trường kèm giải thích

· · · 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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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.

  1. Mở terminal và kiểm tra Node.js (>=18) bằng node -v.
  2. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  3. Clone kho: git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna
  4. Cài sẵn phụ thuộc cho script đo màu: npm install --prefix ~/.claude/skills/design-dna/scripts
  5. Kiểm tra tệp ~/.claude/skills/design-dna/SKILL.md đã tồn tại (nếu nằm trong thư mục con, hãy di chuyển thư mục đó vào ~/.claude/skills).
  6. Khởi động lại Claude Code và thử: "trích xuất design DNA từ ảnh này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT