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

Bộ chọn phong cách thiết kế

Biến sở thích thị giác mơ hồ thành nhiều phương án hình ảnh so sánh được để người dùng tự chọn hướng thiết kế.

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

Làm được gì

  • Thay vì hỏi "bạn muốn phong cách nào", skill tạo ra một ma trận phương án hình ảnh để người dùng chỉ tay chọn.
  • Dùng hai trục: thang dọc (ví dụ cường độ màu 20/35/50/65/80) và hướng ngang (màu theo dữ liệu, trục thương hiệu, ảnh sản phẩm ấm, module theo kịch bản...).
  • Thu thập tài sản hiện có trước: design token, biến CSS, tên component, ảnh, dấu hiệu thương hiệu — coi đó là từ vựng khởi đầu, tiến hóa chứ không thay thế.
  • Quản trị màu theo vai trò (vùng lớn, biểu đồ dữ liệu, nhấn thương hiệu, component trung tính) và tạo mẫu "ngưỡng quá tải" để thấy rõ điểm dừng.
  • Tự xem lại ảnh sinh ra, ghi chú cái nào quá nhạt/quá rực/quá chung, rồi triển khai theo nguyên tắc rút ra từ ảnh được chọn.

Phù hợp với ai

  • Product designer, lập trình viên frontend cần chốt hướng cho design system, landing page hay dashboard.
  • Người thường nhận feedback mơ hồ kiểu "nhìn rối màu quá", "cần nặng tay hơn".
  • Ai đã kết nối công cụ sinh ảnh với Claude Code và muốn khám phá style nhanh.

Ví dụ sử dụng

  1. "Tôi không diễn tả được style mình muốn" → sinh 5 bậc cường độ màu × 4 hướng tổ chức để chọn.
  2. Muốn làm UI hiện tại "chững" hơn mà không bỏ token cũ → so sánh các phương án tiến hóa giữ nguyên component.
  3. Sau khi chọn: hợp nhất "H02 cho cách đặt màu + V04 cho độ đậm" rồi áp vào UI và kiểm tra lại bản render.

· · · 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/design-style-picker/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 design-style-picker từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/design-style-picker/ 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/design-style-picker ~/.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/daymade/claude-code-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r claude-code-skills/design-style-picker ~/.claude/skills/
  5. Kiểm tra file references/selection-playbook.md đã được copy kèm.
  6. Chuẩn bị sẵn công cụ/MCP sinh ảnh trong Claude Code vì skill cần tạo ảnh hàng loạt.
  7. Khởi động lại Claude Code và thử: "Tạo nhiều phương án style giao diện để tôi chọn".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT