Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Định hướng Thiết kế Frontend

Chính thức

Skill chính thức biến Claude thành design lead, tạo giao diện có bản sắc riêng thay vì mẫu template quen thuộc.

Thiết kế · UITrung cấp★ 167,132⑂ 19,920Điểm AI 9/10Cập nhật lần cuối: 7 thg 8, 2026

Skill này làm gì

Đây là skill chính thức của Anthropic, hướng Claude hành xử như một design lead tại studio nhỏ: mỗi dự án phải có nhận diện thị giác riêng, không thể nhầm với dự án khác.

  • Lập kế hoạch token trước khi code: bảng màu 4–6 mã hex có tên, ít nhất 2 vai trò font chữ (display có cá tính + body + utility), ý tưởng layout kèm wireframe ASCII, và một "signature element" duy nhất khiến trang được nhớ đến.
  • Chặn các mặc định kiểu AI: nền kem + serif + terracotta, nền đen + xanh acid, layout kiểu báo giấy — ba khuôn mẫu này được nêu đích danh để tránh.
  • Vòng tự phê bình: rà lại kế hoạch với brief, sửa phần nào nghe chung chung và nói rõ đã đổi gì, vì sao.
  • Sàn chất lượng: responsive tới mobile, focus bàn phím rõ ràng, tôn trọng prefers-reduced-motion.
  • Hướng dẫn viết UX copy: dùng thể chủ động, gọi tên theo ngôn ngữ người dùng, nút "Publish" thì toast phải là "Published", màn hình rỗng là lời mời hành động.

Phù hợp với ai

  • Lập trình viên tự làm giao diện mà không có designer đi cùng
  • Freelancer cần dựng nhanh phương án thiết kế có cá tính cho khách
  • Startup một người làm landing page, portfolio, trang sản phẩm
  • Nhóm muốn chuẩn hoá microcopy: nhãn nút, thông báo lỗi, trạng thái rỗng

Ví dụ sử dụng

  1. Landing page cho quán cà phê rang xay: chỉ cần mô tả ngắn, skill sẽ đề xuất bảng màu, cặp font và một ý tưởng hero lấy từ chính thế giới của cà phê (ví dụ đường cong rang) trước khi viết HTML/CSS.
  2. Làm mới dashboard SaaS: thay vì "số to + gradient" quen thuộc, skill dựng lại thang chữ và cấu trúc thông tin theo đúng dữ liệu bạn có.
  3. Chuẩn hoá chữ trong sản phẩm: đổi "Submit" thành "Lưu thay đổi", đồng bộ từ vựng giữa nút, thông báo và lỗi trong toàn bộ luồng.

· · · Hướng dẫn cài đặt · · ·

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 skills/frontend-design từ repo GitHub anthropics/skills vào ~/.claude/skills/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/anthropics/skills.git && mkdir -p ~/.claude/skills && cp -r skills/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 (macOS/Linux) hoặc Git Bash / WSL trên Windows.
  2. Chuyển tới thư mục tạm: cd ~/Downloads
  3. Tải kho chính thức: git clone https://github.com/anthropics/skills.git
  4. Tạo thư mục skill: mkdir -p ~/.claude/skills
  5. Sao chép riêng skill này: cp -r skills/skills/frontend-design ~/.claude/skills/
  6. Kiểm tra: ls ~/.claude/skills/frontend-design — thấy file SKILL.md là thành công.
  7. Khởi động lại Claude Code, gõ /skills để xác nhận skill đã xuất hiện.
  8. Thử yêu cầu: "Dùng skill frontend-design để làm landing page giới thiệu sản phẩm của tôi."
Xem mã nguồn trên GitHub ↗