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ị giác (Apply Aesthetic)

Chuyển một "cảm giác thương hiệu" hoặc một trong 138 design system nổi tiếng thành hệ token cụ thể mà không phá vỡ khả năng tiếp cận.

Thiết kế · UITrung cấp★ 502⑂ 43Điểm AI 7/10Cập nhật lần cuối: 22 thg 6, 2026

Làm được gì

  • Bắt buộc suy luận brief trước: ngành, đối tượng & tông giọng, một tính từ tâm trạng, độ sâu chuyển động, chuỗi layout — tránh sinh ra thiết kế chung chung.
  • Cho chọn một archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) hoặc một trong 138 design system có tên (Apple, Linear, Stripe, Vercel, Notion, Material, shadcn, Spotify, Tesla…).
  • Ánh xạ lựa chọn đó vào token: semantic.* cho màu, cùng typography/spacing/radius/shadow/motion trong tokens/*.json.
  • Kiểm tra độ tương phản mọi cặp màu; màu thương hiệu không đạt chuẩn sẽ bị điều chỉnh — thẩm mỹ không thắng nguyên tắc POUR.

Phù hợp với ai

  • Lập trình viên front-end và nhà thiết kế sản phẩm làm việc theo design token.
  • Người thấy UI do AI tạo ra luôn nhàn nhạt, giống nhau.
  • Nhóm phải vừa giữ nhận diện thương hiệu vừa đạt WCAG.

Ví dụ sử dụng

  • "Làm trang landing giống cảm giác của Linear" → nạp spec Linear, gán lại token semantic, kiểm tra tương phản.
  • "Dashboard fintech này trông đắt tiền hơn" → suy luận brief rồi áp archetype high-end agency kèm choreography chuyển động.
  • "Dùng màu thương hiệu của tôi theo phong cách dark-tech" → đưa màu vào token nhưng tự sửa các cặp màu không đạt tương phản.

· · · 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 && mkdir -p ~/.claude/skills && cp -r 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. 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. Copy toàn bộ skill (không copy lẻ một file, vì skill cần các file phụ trợ): cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/
  5. Kiểm tra Python 3 bằng python3 --version (cần cho scripts/contrast.py và scripts/design_systems.py).
  6. Khởi động lại Claude Code và thử yêu cầu: "đổi giao diện này sang phong cách Stripe".
Xem mã nguồn trên GitHub ↗