Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

UI Designer (ảnh mẫu → design system)

Trích xuất màu sắc, typography và quy tắc component từ ảnh UI tham chiếu, rồi tạo design system, PRD và prompt triển khai UI dùng được ngay.

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

Làm được gì

Bạn đưa vào ảnh chụp/mockup UI mà bạn thích, Claude xử lý theo 4 bước:

  1. Trích xuất design system: bảng màu (primary/secondary/accent/màu chức năng), font family–size–weight, style của button/card/input/icon, hệ spacing 4–48dp, thời lượng animation và biến thể dark mode — ghi rõ mã hex và px.
  2. Tạo PRD cho MVP: dựa trên file ý tưởng sản phẩm, hỏi đáp cùng bạn để hoàn thiện elevator pitch, vấn đề, đối tượng người dùng, USP, danh sách tính năng kèm user story và lưu ý UX theo từng màn hình.
  3. Ghép prompt triển khai cuối: kết hợp design system + PRD thành một prompt hoàn chỉnh, lưu kèm timestamp trong documents/ux-design/.
  4. Kiểm tra môi trường React & code UI: dò package.json xem có React chưa; nếu chưa thì hướng dẫn create-react-app + Tailwind + lucide-react, sau đó dựng nhiều biến thể thiết kế (3 mobile, 2 web) thành component riêng và gom vào trang showcase.

Phù hợp với ai

  • Người có ảnh tham chiếu đẹp nhưng không biết quy chuẩn hóa thành design token
  • Dev solo / founder cần dựng UI MVP nhanh mà không có designer
  • PM muốn xem nhiều phương án thiết kế cùng lúc để so sánh
  • Nhóm làm prototype bằng React + Tailwind

Ví dụ sử dụng

  • Bắt mood dashboard SaaS: bỏ 5 ảnh vào reference-images/saas-dashboard/, yêu cầu "làm app quản lý dự án theo mood này" → sinh file design system, trao đổi PRD, rồi code 3 bản mobile + 2 bản web.
  • Redesign app hiện có: đưa cả ảnh app của bạn và ảnh đối thủ để so sánh hai design system và quyết định token nào cần đổi.
  • Viết tài liệu design token: chỉ cần ảnh các màn hình đã có để tạo spec màu/chữ/khoảng cách làm tài liệu onboarding cho team.

· · · Hướng dẫn cài đặt · · ·

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 ui-designer từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/ui-designer/ 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/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/ui-designer ~/.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 (macOS) hoặc Git Bash/WSL (Windows).
  2. Tải repo: git clone https://github.com/daymade/claude-code-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r claude-code-skills/ui-designer ~/.claude/skills/
  5. Kiểm tra thư mục assets/ có đủ 3 template (design-system.md, app-overview-generator.md, vibe-design-template.md).
  6. Gom ảnh tham chiếu vào một thư mục (ví dụ reference-images/my-ref/) và viết ý tưởng vào ideas/my-app.md.
  7. Mở Claude Code trong thư mục dự án và yêu cầu: "Trích design system từ reference-images/my-ref và dựng UI theo ideas/my-app.md".
  8. Nếu chưa có project React: chạy npx create-react-app my-app, rồi cài Tailwind và lucide-react theo hướng dẫn.
  9. Các placeholder tiếng Trung trong template ({项目背景}…) sẽ được thay tự động; nếu kết quả chưa mượt, bạn có thể sửa template sang tiếng Việt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT