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

UI Designer (ảnh tham chiếu → design system)

Trích xuất design system từ ảnh UI tham chiếu rồi tạo PRD và prompt UI sẵn sàng triển khai bằng React + Tailwind.

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

Skill này làm gì

  • Đọc thư mục ảnh UI tham chiếu (screenshot/mockup) và tổng hợp thành tài liệu design system: bảng màu, typography, style của button/card/input/icon, hệ thống spacing 4–48dp, animation và biến thể dark mode.
  • Dựa trên file ý tưởng sản phẩm, trao đổi tương tác với bạn để viết PRD cho MVP (elevator pitch, vấn đề, đối tượng, USP, danh sách tính năng, lưu ý UX từng màn hình).
  • Ghép design system + PRD thành một prompt triển khai UI hoàn chỉnh, kiểm tra môi trường React rồi dựng nhiều biến thể (3 bản mobile, 2 bản web) theo cấu trúc component.
  • Lưu kết quả vào documents/designs, documents/ux-design kèm timestamp để dễ theo dõi phiên bản.

Phù hợp với ai

  • Founder/indie dev muốn nhanh chóng có UI giống tông của một sản phẩm mình thích.
  • Dev frontend làm MVP không có designer, dùng React + Tailwind CSS + Lucide icons.
  • Nhóm cần tài liệu quy chuẩn thiết kế nhất quán cho nhiều màn hình.

Ví dụ sử dụng

  1. Đặt 5 ảnh dashboard SaaS vào reference-images/saas-dashboard/ và nói: “Làm UI app quản lý dự án theo tông này” → nhận design system, PRD và prompt triển khai.
  2. Cung cấp 3 ảnh app đối thủ: “Chỉ trích xuất màu, font, spacing thành tài liệu design system.”
  3. Đã có PRD sẵn: đưa file PRD để bỏ qua bước 3 và đi thẳng tới việc dựng 3 phương án mobile + 2 phương án web.

· · · 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/daymade/claude-code-skills/HEAD/ui-designer/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 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 và đi tới thư mục làm việc của bạn.
  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. Sao chép skill: cp -r claude-code-skills/ui-designer ~/.claude/skills/
  5. Kiểm tra ~/.claude/skills/ui-designer/assets/ có đủ 3 template: design-system.md, app-overview-generator.md, vibe-design-template.md.
  6. Khởi động lại Claude Code, chuẩn bị thư mục ảnh tham chiếu + file ý tưởng, rồi yêu cầu: “Trích design system từ các ảnh này và dựng UI.”
  7. Nếu chưa có project React, chạy trước npx create-react-app, cài Tailwind CSS và lucide-react theo hướng dẫn skill đưa ra.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT