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

Brand Kit (Bộ nhận diện thương hiệu)

Từ một brief ngắn, tạo trọn bộ design token thương hiệu đạt chuẩn tiếp cận (light/dark + theme.css duy nhất).

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

Kỹ năng này làm gì

  • Suy luận ngành, đối tượng, tính từ tâm trạng chủ đạo rồi tạo thang màu 11 bậc theo OKLCH cùng thang neutral.
  • Sinh token DTCG 3 tầng (primitive → semantic → component) cho màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động.
  • Thiết kế riêng chế độ tối (không phải đảo màu) và xuất ra một tệp theme.css duy nhất với override [data-theme="dark"].
  • Kiểm chứng bằng validate_tokens.py, validate_contrast.py, validate_theme_refs.py để đảm bảo alias hợp lệ và độ tương phản WCAG AA.

Phù hợp với ai

  • Designer / lập trình viên frontend khởi tạo nền tảng design system cho sản phẩm mới hoặc làm mới thương hiệu.
  • Nhóm muốn dẹp tình trạng mỗi trang một bảng màu, quy về một theme duy nhất.
  • Dự án cần bằng chứng tuân thủ tiếp cận (WCAG AA).

Ví dụ sử dụng

  1. "Làm hệ màu thương hiệu cho app fintech, cảm giác đáng tin cậy, kèm dark mode" → thang OKLCH + token semantic + theme.css.
  2. "Chuẩn hóa màu thương hiệu #2F6BFF thành bộ token đạt tương phản" → kiểm tra bậc 500/600 rồi dựng lại token.
  3. "Kiểm tra mọi var(--…) trong CSS component có tồn tại trong theme không" → chạy validate_theme_refs.py.

· · · 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/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/brandkit/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 .claude/skills/brandkit từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/brandkit/ 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/plugin87/ux-ui-agent-skills.git && mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/brandkit ~/.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. Tải repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r ux-ui-agent-skills/.claude/skills/brandkit ~/.claude/skills/
  5. Skill tham chiếu tới taste/ và scripts/validate_*.py, hãy sao chép luôn các thư mục đó hoặc đặt chúng ở gốc dự án.
  6. Kiểm tra Python 3 bằng python3 --version.
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "Tạo hệ design token thương hiệu cho sản phẩm của tôi".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT