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

Frontend Design (Thiết kế UI có cá tính)

Skill hướng Claude tạo code frontend chất lượng production với định hướng thẩm mỹ rõ ràng, tránh kiểu giao diện "AI làm" nhàm chán.

Thiết kế · UINhập môn★ 309⑂ 33Điểm AI 7/10Cập nhật lần cuối: 12 thg 8, 2026

Làm được gì

  • Buộc Claude chọn một hướng thẩm mỹ rõ ràng trước khi viết code (tối giản khắc khổ, maximalist, retro-futuristic, editorial, sang trọng, brutalist...).
  • Đưa ra nguyên tắc cụ thể cho typography, màu sắc & theme (dùng CSS variables), chuyển động (stagger khi load trang, scroll-trigger, hover), bố cục (bất đối xứng, chồng lớp, phá grid) và chi tiết nền (gradient mesh, noise, grain, con trỏ tùy chỉnh).
  • 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.
  • Sinh code chạy được bằng HTML/CSS/JS, React, Vue; khuyến nghị dùng thư viện Motion cho React.

Phù hợp với ai

  • Dev thấy mọi trang mình tạo ra đều giống nhau, muốn có bản sắc riêng.
  • Indie hacker / founder tự làm UI mà không có designer.
  • Người làm sản phẩm cần prototype gây ấn tượng mạnh.

Ví dụ sử dụng

  1. "Tạo landing page cho thương hiệu cà phê" → chọn tông hữu cơ, ấm, dùng texture grain và font display đặc trưng.
  2. "Viết section bảng giá SaaS bằng React" → grid bất đối xứng + animation stagger bằng Motion thay cho 3 card quen thuộc.
  3. "Trang portfolio cá nhân một trang" → bố cục kiểu tạp chí, khoảng trắng mạnh, con trỏ tùy chỉnh.

· · · 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/LukeRenton/explore-claude-code/HEAD/.claude/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 .claude/skills/frontend-design từ repo GitHub LukeRenton/explore-claude-code vào ~/.claude/skills/lukerenton-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/LukeRenton/explore-claude-code.git /tmp/explore-claude-code && mkdir -p ~/.claude/skills && cp -r /tmp/explore-claude-code/.claude/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: git clone https://github.com/LukeRenton/explore-claude-code.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r explore-claude-code/.claude/skills/frontend-design ~/.claude/skills/
  5. Nếu chỉ dùng cho một project, copy vào .claude/skills/ trong thư mục project đó.
  6. Khởi động lại Claude Code, rồi yêu cầu ví dụ "làm cho tôi một landing page" — skill sẽ tự kích hoạt.
  7. Với project React, cài sẵn npm i motion để dùng animation theo đề xuất của skill.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT