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

Superdesign Canvas Designer

Skill hướng dẫn Claude thiết kế và tinh chỉnh UI, luồng nhiều trang hay poster trên canvas vô hạn của Superdesign.

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

Skill này làm gì

  • Dùng Superdesign CLI để tạo project, sinh và lặp lại các bản nháp thiết kế trên canvas vô hạn.
  • Nếu có codebase, skill tự phân tích repo và ghi ngữ cảnh UI vào .superdesign/init/ (components, layouts, routes, theme, pages) rồi dùng ngữ cảnh đó để tái tạo hoặc làm lại trang hiện có.
  • Với dự án mới hoàn toàn, skill hỏi rõ mục tiêu, đối tượng, phong cách thương hiệu trước khi thiết kế.
  • Trích xuất "design DNA" từ một URL tham chiếu (style guide, design tokens, cấu trúc nội dung) để tạo hoặc cập nhật design-system.md.
  • Xử lý riêng các ấn phẩm tĩnh: poster, thumbnail, ảnh quảng cáo, cover theo kích thước từng nền tảng.

Phù hợp với ai

  • Lập trình viên frontend / designer muốn xem nhiều phương án UI khớp với code hiện có.
  • Nhóm cần chuẩn hoá design system hoặc tham khảo phong cách từ website khác.
  • Người làm marketing, sáng tạo nội dung cần nhanh chóng có ảnh quảng cáo đúng khổ.

Ví dụ sử dụng

  1. "Thiết kế lại trang dashboard trong repo này" → skill phân tích repo, tái tạo trang gốc trước rồi tạo các biến thể trên canvas.
  2. "Làm landing page theo phong cách stripe.com" → chạy extract-website, thiết lập design system rồi sinh bản nháp mới.
  3. "Tạo ảnh story Instagram cho đợt khuyến mãi" → bỏ qua phân tích repo, sinh key visual rồi dựng ấn phẩm theo kích thước chuẩn.

· · · 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/superdesigndev/superdesign-skill/HEAD/skills/superdesign/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/superdesign từ repo GitHub superdesigndev/superdesign-skill vào ~/.claude/skills/superdesign/ 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/superdesigndev/superdesign-skill.git && mkdir -p ~/.claude/skills && cp -r superdesign-skill/skills/superdesign ~/.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 và clone repo: git clone https://github.com/superdesigndev/superdesign-skill.git
  2. Tạo thư mục skills của Claude: mkdir -p ~/.claude/skills
  3. Copy skill vào: cp -r superdesign-skill/skills/superdesign ~/.claude/skills/
  4. Kiểm tra thư mục references/ (SUPERDESIGN.md, INIT.md, GRAPHIC.md, WEBSITE.md) đã được copy kèm.
  5. Đảm bảo đã có Node.js, rồi chạy npx --yes @superdesign/cli@latest để kiểm tra CLI và dòng trạng thái auth:.
  6. Nếu chưa đăng nhập, chạy npx --yes @superdesign/cli@latest login.
  7. Khởi động lại Claude Code và thử yêu cầu: "Thiết kế trang đăng nhập cho dự án này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT