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ế giao diện có cá tính)

Skill giúp Claude tạo giao diện web chỉn chu, có phong cách riêng, tránh vẻ 'AI làm ra' quen thuộc.

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

Skill này làm gì

Khi bạn yêu cầu dựng component, landing page, dashboard hay poster web, skill buộc Claude chọn một hướng thẩm mỹ rõ ràng trước khi viết code rồi thực thi nhất quán.

  • Typography: tránh Inter/Roboto/Arial, ghép font display đặc trưng với font body tinh tế
  • Màu sắc: dùng CSS variables, loại bỏ cliché như gradient tím trên nền trắng
  • Chuyển động: ưu tiên CSS thuần, dùng thư viện Motion cho React, tập trung vào khoảnh khắc gây ấn tượng
  • Bố cục: bất đối xứng, chồng lớp, phá lưới, khoảng trắng có chủ đích
  • Nền & chi tiết: gradient mesh, noise texture, grain overlay, con trỏ tùy biến

Phù hợp với ai

  • Lập trình viên thấy UI do AI sinh ra lúc nào cũng na ná nhau
  • Founder/indie dev phải tự làm landing page mà không có designer
  • Người cần prototype đẹp mắt cho demo, hackathon hoặc bản đề xuất khách hàng

Ví dụ sử dụng

  1. "Làm landing page cho thương hiệu cà phê" → chọn tông editorial, font đặc trưng, lưới bất đối xứng
  2. "Style lại dashboard React của tôi" → dark theme, màu nhấn mạnh, animation xuất hiện bằng Motion
  3. "Làm trang HTML này đẹp hơn" → thêm texture nhiễu, đổ bóng, hiệu ứng hover

· · · 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/ViryaZheng/recomby-geo/HEAD/plugins/recomby-geo/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 plugins/recomby-geo/skills/frontend-design từ repo GitHub ViryaZheng/recomby-geo vào ~/.claude/skills/viryazheng-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/ViryaZheng/recomby-geo.git && mkdir -p ~/.claude/skills && cp -r recomby-geo/plugins/recomby-geo/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 kho: git clone https://github.com/ViryaZheng/recomby-geo.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r recomby-geo/plugins/recomby-geo/skills/frontend-design ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra frontend-design trong danh sách /skills.
  6. Chỉ cần yêu cầu dựng hoặc làm đẹp giao diện, skill sẽ tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT