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

Áp dụng phong cách thẩm mỹ (Apply Aesthetic)

Chuyển một "vibe" hay phong cách của thương hiệu nổi tiếng thành hệ thống design token và kiểm tra độ tương phản để đảm bảo khả năng tiếp cận.

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

Làm được gì

  • Trước tiên bắt buộc suy luận brief: ngành, đối tượng & tông giọng, một tính từ mô tả cảm xúc, độ sâu chuyển động, chuỗi layout.
  • Chọn một archetype (agency cao cấp, editorial tối giản, brutalist, soft-SaaS, dark-tech) hoặc một trong 138 hệ thống thiết kế có tên (apple, linear, stripe, vercel, notion, material, shadcn, spotify, tesla…).
  • Áp dụng Library Contract: trỏ lại các token semantic.* sang vai trò màu của hệ thống đã chọn, map typography/spacing/radius/shadow/motion vào tokens/*.json.
  • Kiểm tra tương phản mọi cặp màu bằng scripts/contrast.py; giá trị thương hiệu không đạt sẽ bị điều chỉnh — thẩm mỹ không được vượt trên POUR.

Phù hợp với ai

  • Lập trình viên front-end và designer sản phẩm làm việc theo design token.
  • Người thấy UI do AI tạo ra luôn na ná nhau, thiếu bản sắc.
  • Ai muốn giữ màu thương hiệu nhưng vẫn đạt chuẩn WCAG.

Ví dụ sử dụng

  1. "Làm trang landing này theo phong cách dark-tech như Linear" → đọc spec, map token, kiểm tra tương phản.
  2. "Dashboard SaaS của tôi trông rẻ tiền quá, hãy làm cho sang hơn" → suy luận brief rồi chọn archetype phù hợp.
  3. "Giữ màu thương hiệu nhưng phải đạt chuẩn tiếp cận" → chỉ tinh chỉnh những cặp màu không đạt.

· · · 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/apply-aesthetic/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/apply-aesthetic từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/apply-aesthetic/ 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 /tmp/ux-ui-agent-skills && mkdir -p ~/.claude/skills && cp -r /tmp/ux-ui-agent-skills/.claude/skills/* ~/.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/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/
  5. Kiểm tra các tài nguyên đi kèm (taste/, scripts/, design-systems/, tokens/) đã được copy cùng, vì skill phụ thuộc vào chúng.
  6. Đảm bảo có Python 3: python3 --version (cần cho script kiểm tra tương phản).
  7. Khởi động lại Claude Code và thử: "Đổi UI này sang phong cách Stripe".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT