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

Brand Kit — Bộ nền tảng thương hiệu

Từ một brief ngắn, skill tạo trọn bộ design system: dải màu OKLCH, token DTCG 3 tầng sáng/tối và một file theme.css duy nhất, đã kiểm tra đạt WCAG.

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

Skill này làm gì

  • Suy luận brief: ngành, đối tượng, một tính từ tâm lý thương hiệu và độ sâu chuyển động.
  • Sinh dải màu thương hiệu 11 bậc theo OKLCH cùng dải neutral, kiểm tra bậc 500 đạt ≥ 4.5:1 trên nền trắng và bậc 600 ≥ 3:1.
  • Xuất token DTCG ba tầng (primitive → semantic → component) trong tokens/*.json và một theme.css duy nhất; chế độ tối được thiết kế riêng, không đảo màu máy móc.
  • Định nghĩa thang chữ Major Third, spacing 4px, bậc bo góc, elevation, duration/easing cho motion.
  • Kiểm chứng bằng validate_tokens.py, validate_contrast.py, validate_theme_refs.py.

Phù hợp với ai

  • Designer và lập trình viên front-end cần dựng nền tảng thiết kế cho sản phẩm mới hoặc làm lại thương hiệu.
  • Nhóm muốn dẹp tình trạng mỗi trang một bảng màu, gom về một theme duy nhất.
  • Dự án phải chứng minh đạt chuẩn tiếp cận WCAG AA.

Ví dụ sử dụng

  1. "Tạo token thương hiệu cho app fintech, người dùng 20–30 tuổi, tinh thần đáng tin cậy" → nhận palette OKLCH, token sáng/tối và theme.css.
  2. Chuyển các giá trị màu hard-code sang token ngữ nghĩa (action.primary, border.strong…) rồi chạy script kiểm tra tương phản.
  3. Đưa bộ token vào skill token-build để xuất cho iOS/Android hoặc nền tảng khác.

· · · 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 && 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 (macOS/Linux) hoặc Git Bash/WSL trên Windows.
  2. Tải repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r ux-ui-agent-skills/.claude/skills/brandkit ~/.claude/skills/
  5. Giữ luôn các thư mục scripts/ và taste/ của repo vì bước kiểm chứng cần chúng.
  6. Kiểm tra Python 3: python3 --version
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "Dựng bộ token thương hiệu cho sản phẩm của tôi".
Xem mã nguồn trên GitHub ↗