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

Frontend Design (UI có bản sắc)

Skill hướng dẫn Claude tạo giao diện frontend chất lượng production, có phong cách riêng, tránh kiểu thiết kế "AI chung chung".

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

Skill này làm gì

  • Buộc Claude chọn một hướng thẩm mỹ rõ ràng (tối giản, maximalist, retro-futuristic, brutalist, editorial...) trước khi viết code.
  • Đưa ra tiêu chí cụ thể cho typography, màu sắc/theme, chuyển động, bố cục không gian và nền/hiệu ứng thị giác.
  • Cấm rõ các lựa chọn sáo rỗng: font Inter/Roboto/Arial, gradient tím trên nền trắng, layout dễ đoán.
  • Yêu cầu độ phức tạp của code khớp với tầm nhìn thiết kế (tối giản thì tinh gọn, maximalist thì nhiều hiệu ứng).

Phù hợp với ai

  • Lập trình viên frontend dùng Claude Code để dựng landing page, dashboard, portfolio.
  • Solo dev, indie hacker, team startup không có designer riêng.
  • Ai từng thấy UI do AI sinh ra lần nào cũng giống nhau.

Ví dụ sử dụng

  1. "Làm landing page cho SaaS" → chọn tông editorial, ghép font display + font body, grid bất đối xứng, animation load trang so le.
  2. "Component bảng giá bằng React" → hệ màu qua CSS variables, hover/micro-interaction dùng thư viện Motion.
  3. "Theme blog phong cách brutalist" → viền dày, lớp grain, con trỏ tùy chỉnh, đồng nhất với tông đã chọ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/composio-community/awesome-claude-plugins/HEAD/frontend-design/skills/frontend-design/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 frontend-design/skills/frontend-design từ repo GitHub composio-community/awesome-claude-plugins vào ~/.claude/skills/composio-community-frontend-design/ 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/composio-community/awesome-claude-plugins.git /tmp/acp && mkdir -p ~/.claude/skills && cp -r /tmp/acp/frontend-design/skills/frontend-design ~/.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 về thư mục tạm: git clone https://github.com/composio-community/awesome-claude-plugins.git /tmp/acp
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r /tmp/acp/frontend-design/skills/frontend-design ~/.claude/skills/
  5. Kiểm tra file ~/.claude/skills/frontend-design/SKILL.md đã tồn tại.
  6. Khởi động lại Claude Code và thử yêu cầu "dựng cho tôi một landing page" — skill sẽ tự kích hoạt.
  7. (Tùy chọn) Với dự án React, cài trước thư viện animation: npm i motion.
Xem mã nguồn trên GitHub ↗