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

replica-design — Dựng lại design system cho bản clone

Biến ảnh chụp màn hình và tài liệu recon thành design token (màu, typography, spacing) kèm spec component và kiểm tra tương phản WCAG.

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

Làm được gì

  • Đọc replica/recon.md và ảnh trong replica/screens/ để tái dựng hệ thống thiết kế.
  • Ghi màu theo vai trò (bg, surface, border, text, text-muted, accent, danger…) thay vì mã màu cứng; đo type scale, spacing (gốc 4 hoặc 8), radius, shadow, motion, breakpoint.
  • Sinh tokens.json, tokens.css (CSS custom properties) và mapping vào theme Tailwind để component dùng bg-surface text-muted chứ không dùng hex thô.
  • Chạy contrast.py kiểm tra mọi cặp chữ/nền theo WCAG: tối thiểu AA 4.5:1 cho body, 3:1 cho chữ lớn, viền input và focus ring; thoát mã 1 nếu fail.
  • Viết components.md với variant, size, trạng thái (hover, focus-visible, disabled, loading, error, empty) và yêu cầu a11y; khuyến nghị dựng primitive trước khi dựng màn hình.
  • Cấm sao chép logo, icon, illustration, font bản quyền, copy và màu thương hiệu — thay bằng bộ mở (Lucide, Inter, IBM Plex…).

Phù hợp với ai

  • Dev frontend muốn học cấu trúc UX của một sản phẩm và dựng lại nhanh cho sản phẩm riêng.
  • Team nhỏ hoặc solo dev lần đầu xây hệ thống design token.
  • Người phụ trách design system cần đạt chuẩn tiếp cận AA ngay từ tầng token.
  • Stack Tailwind + React (shadcn/ui, Radix, React Aria).

Ví dụ sử dụng

  1. Yêu cầu "làm giao diện giống app X" → skill trích 6 cấp xám, type scale 16/20/28, spacing 8px và viết tokens.json.
  2. Chạy python3 contrast.py replica/design/tokens.json → phát hiện text-muted chỉ 3.8:1, sửa ngay ở token thay vì sửa từng component.
  3. Lập spec Button/Input/Modal trong components.md, dựng tại route /design rồi chụp ảnh để nghiệm thu design system.

· · · 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/Jakeschincariol/replica-skill/HEAD/replica-design/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 replica-design từ repo GitHub Jakeschincariol/replica-skill vào ~/.claude/skills/replica-design/ 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/Jakeschincariol/replica-skill.git && mkdir -p ~/.claude/skills && cp -r replica-skill/replica-design ~/.claude/skills/

⚠ Đâ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.
  2. Clone repo: git clone https://github.com/Jakeschincariol/replica-skill.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r replica-skill/replica-design ~/.claude/skills/
  5. Kiểm tra Python3: python3 --version (cần cho script kiểm tra tương phản).
  6. Đảm bảo project có replica/recon.md và ảnh trong replica/screens/; nếu chưa có, chạy bước /replica-architect trước.
  7. Khởi động lại Claude Code và yêu cầu: "rebuild the design system" hoặc "tạo design token cho bản clone".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT