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

Đạo diễn thiết kế Frontend

Chính thức

Biến Claude thành giám đốc thiết kế: tạo bản sắc thị giác riêng biệt, không giống mẫu có sẵn, khi dựng hoặc làm mới giao diện.

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

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

  • Đặt Claude vào vai art director của một studio thiết kế nhỏ, buộc mọi lựa chọn màu sắc, chữ và bố cục phải có lý do gắn với đề bài.
  • Xây trước một hệ token: bảng màu 4–6 mã hex có tên, ít nhất 2 bộ chữ (display + body, thêm utility nếu cần), ý tưởng bố cục kèm wireframe ASCII, và một yếu tố chữ ký để người xem nhớ trang.
  • Ép quy trình hai lượt: brainstorm → tự phê bình bản kế hoạch → chỉ khi bản kế hoạch đủ khác biệt mới viết code → tiếp tục phê bình khi dựng.
  • Chỉ rõ ba "khuôn mẫu AI" cần tránh: nền kem + serif tương phản + accent terracotta; nền đen + accent xanh acid; bố cục kiểu báo giấy đường kẻ mảnh.
  • Có cả quy tắc viết chữ trong giao diện: dùng thể chủ động, "Save changes" thay vì "Submit", cách viết thông báo lỗi và màn hình trống.
  • Nhắc chuẩn chất lượng tối thiểu: responsive, focus bàn phím rõ ràng, tôn trọng reduced motion, tránh xung đột độ ưu tiên CSS.

Phù hợp với ai

  • Lập trình viên frontend thấy sản phẩm mình làm ra "trang nào cũng giống trang nào".
  • Dev solo, team startup không có designer riêng.
  • Người làm landing page, trang sự kiện, portfolio cần cá tính thị giác.
  • Kỹ sư muốn dựng nhanh bản nháp design system (màu, thang chữ).

Ví dụ sử dụng

  1. "Làm landing page cho xưởng rang cà phê thủ công" → Claude đề xuất bảng màu và cặp font lấy cảm hứng từ thế giới cà phê, kèm wireframe, rồi mới code sau khi bạn duyệt.
  2. Làm mới dashboard SaaS cũ → chỉ ra giao diện hiện tại đang rơi vào khuôn mẫu nào, đề xuất thang chữ và yếu tố chữ ký mới.
  3. Chuẩn hóa nội dung giao diện → viết lại "Đã xảy ra lỗi" thành thông báo nêu rõ nguyên nhân và cách khắc phục, đồng bộ tên nút xuyên suốt luồng thao tác.

· · · 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/anthropics/skills/HEAD/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 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. Tải kho mã nguồn: git clone https://github.com/anthropics/skills.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Sao chép riêng kỹ năng này: cp -r skills/skills/frontend-design ~/.claude/skills/
  5. Kiểm tra bằng lệnh ls ~/.claude/skills/frontend-design, phải thấy tệp SKILL.md.
  6. Khởi động lại Claude Code, rồi thử yêu cầu "thiết kế trang landing cho..." để kỹ năng tự kích hoạt.
  7. Muốn gỡ, chạy rm -rf ~/.claude/skills/frontend-design.
Xem mã nguồn trên GitHub ↗