Bộ chọn phong cách thiết kế
Tạo hàng loạt phương án thiết kế theo ma trận để bạn so sánh và chọn đúng phong cách mình muốn, dù không diễn tả được bằng lời.
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
Kỹ năng này làm gì
- Khi bạn nói "tôi không biết diễn tả phong cách mình muốn", kỹ năng tạo ra một bộ phương án hình ảnh có thể so sánh trực tiếp.
- Không tạo các biến thể na ná nhau mà dựng ma trận hai trục: trục dọc tăng một chỉ số theo bước lớn (ví dụ cường độ màu 20/35/50/65/80), trục ngang đổi chiến lược tổ chức (thiên dữ liệu, thiên thương hiệu, thiên hình ảnh sản phẩm, thiên layout quản trị).
- Trước tiên thu thập tài sản hiện có: UI đang chạy, design token, biến CSS, tên component, gợi ý thương hiệu — rồi tiến hóa chúng thay vì thay thế.
- Xử lý màu như hệ thống vai trò: vùng nền phân khu, biểu đồ dữ liệu, màu thương hiệu/rủi ro cho điểm nhấn hiếm, component trung tính cho phần thường ngày.
- Tự mở ảnh đã tạo để đánh giá, ghi chú cái nào quá nhạt, quá rực, quá chung chung, và trình bày kèm đường dẫn tệp.
- Sau khi bạn chọn, trích nguyên tắc (vai trò màu, mật độ layout, thứ bậc điểm nhấn) rồi triển khai vào UI thật và kiểm tra lại bằng mắt.
Phù hợp với ai
- Lập trình viên hoặc founder solo phải tự quyết tông màu sản phẩm mà không có designer.
- Freelancer gặp khách hàng chỉ nói "làm sang hơn chút" mà không nêu yêu cầu cụ thể.
- Nhóm muốn nâng cấp dần design system hiện tại mà không đập đi làm lại.
- Người cần chốt nhanh hướng hình ảnh cho landing page, dashboard hay slide thuyết trình.
Ví dụ sử dụng
- Hiệu chỉnh độ rực màu: khi nhận phản hồi "nhìn rối mắt quá", kỹ năng tạo bậc thang 5 mức từ 20% đến 80% ngân sách màu để bạn thấy rõ ngưỡng chịu được.
- Tiến hóa design system: đọc biến CSS và component hiện có, giữ nguyên "từ vựng" đó rồi tạo 4 hướng ngang để so sánh chiến lược tổ chức.
- Hợp nhất phương án đã chọn: bạn chọn H02 và V04, kỹ năng ghi rõ "lấy cách đặt màu từ H02, lấy cường độ palette từ V04" rồi áp dụng vào UI thực tế.
· · · Hướng dẫn cài đặt · · ·
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
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 /tmp/ccs && cp -r /tmp/ccs/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.
- Mở Terminal (macOS) hoặc Git Bash (Windows).
- Tạo thư mục skill nếu chưa có:
mkdir -p ~/.claude/skills - Clone repo về thư mục tạm:
git clone https://github.com/daymade/claude-code-skills.git /tmp/ccs - Chỉ copy kỹ năng này:
cp -r /tmp/ccs/design-style-picker ~/.claude/skills/ - Kiểm tra tệp
references/selection-playbook.mdđã được copy kèm (dùng cho phiên chọn phong cách đầy đủ). - Kết nối công cụ tạo ảnh cho Claude Code (MCP server tạo ảnh hoặc API/CLI sinh ảnh bạn đang dùng).
- Khởi động lại Claude Code và thử: "Tôi không diễn tả được style muốn, hãy tạo nhiều phương án cho tôi chọn".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT