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

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

Kỹ năng giúp Claude viết code frontend chạy được với định hướng thẩm mỹ rõ ràng, tránh kiểu giao diện 'AI chung chung'.

Thiết kế · UITrung cấp★ 177⑂ 18Điểm AI 6/10Cập nhật lần cuối: 17 thg 5, 2026

Kỹ năng này làm gì

  • Khi bạn yêu cầu tạo component, trang hoặc ứng dụng web, kỹ năng buộc xác định mục đích, tông thẩm mỹ, ràng buộc kỹ thuật và điểm khác biệt trước khi viết code.
  • Chọn một hướng thẩm mỹ dứt khoát: tối giản triệt để, maximalist, retro-futuristic, brutalist, editorial, art deco, pastel...
  • Hướng dẫn cụ thể về typography (font display đặc trưng + font body tinh tế), hệ màu dùng CSS variables, chuyển động (animation-delay so le khi tải trang, hiệu ứng scroll/hover), bố cục bất đối xứng, phá vỡ grid, và nền có chiều sâu (gradient mesh, noise, grain, shadow mạnh).
  • Cấm rõ ràng các khuôn mẫu 'AI slop': font Inter/Roboto/Arial, gradient tím trên nền trắng, layout dễ đoán.
  • Kết quả là code thật: HTML/CSS/JS, React, Vue...

Phù hợp với ai

  • Lập trình viên thường xuyên làm landing page, portfolio, demo nhưng thấy sản phẩm nào cũng giống nhau.
  • Dev solo hoặc startup không có designer riêng.
  • Frontend engineer muốn thoát khỏi cảm giác 'template mặc định' của AI.

Ví dụ sử dụng

  1. "Làm landing page cho quán espresso" → trang HTML/CSS theo tông art deco hình học, font display đặc trưng, animation xuất hiện so le.
  2. "Tạo bảng giá bằng React" → nền tối có texture noise, thẻ xếp bất đối xứng, tương tác hover dùng Motion.
  3. "Grid portfolio cho nhiếp ảnh gia" → bố cục kiểu tạp chí, phá grid, khoảng trắng mạnh tay.

· · · 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/Karanjot786/agent-skills-cli/HEAD/.agent/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 .agent/skills/frontend-design từ repo GitHub Karanjot786/agent-skills-cli vào ~/.claude/skills/karanjot786-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/Karanjot786/agent-skills-cli.git && mkdir -p ~/.claude/skills && cp -r agent-skills-cli/.agent/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. Tải repo: git clone https://github.com/Karanjot786/agent-skills-cli.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy kỹ năng: cp -r agent-skills-cli/.agent/skills/frontend-design ~/.claude/skills/
  5. Khởi động lại Claude Code, rồi thử yêu cầu như "làm cho tôi một landing page" — kỹ năng sẽ tự kích hoạt.
  6. Nếu muốn hướng cụ thể, hãy nói rõ tông muốn dùng (ví dụ: "tối giản", "maximalist").
Xem mã nguồn trên GitHub ↗Giấy phép: MIT