AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Huashu Design (Thiết kế bằng HTML)

Skill quy trình thiết kế: dùng HTML tạo prototype, slide, animation, infographic — luôn đưa ba hướng thiết kế để bạn chọn trước khi thực hiện.

Thiết kế · UITrung cấp★ 28,049⑂ 3,033Điểm AI 10/10Cập nhật lần cuối: 23 thg 10, 2026

Giúp được gì

  • Biến Claude thành một studio thu nhỏ: giám đốc nghệ thuật, nghiên cứu thương hiệu, designer thị giác, designer chuyển động, lập trình front-end và copywriter.
  • Mọi yêu cầu thiết kế mới đều bắt buộc đưa ba hướng bản nháp thật để bạn chọn, rồi mới triển khai (kể cả khi bạn đã chỉ định phong cách hay thương hiệu).
  • Định tuyến theo loại sản phẩm: web/landing/dashboard, slide (PPT), infographic, prototype app iOS, animation & video (xuất MP4/GIF), và chấm điểm/phản biện thiết kế.
  • Ép tuân thủ: kiểm chứng sự thật bằng WebSearch, lấy logo/ảnh sản phẩm chính thức, ngưỡng dễ đọc (cỡ chữ tối thiểu, tương phản ≥4.5:1), danh sách cấm các chi tiết trang trí kiểu mẫu nhàm chán.
  • Dùng các file gate (brand-spec.md, direction-approved.md, 导演稿.md) làm bằng chứng từng bước đã hoàn thành.
  • Có script learn.py ghi nhớ gu thẩm mỹ của bạn (lưu cục bộ tại ~/.huashu-design/) và design_lint.py tránh lặp lại ngoại hình của dự án trước.

Phù hợp với ai

  • Founder, marketer, PM cần slide pitch, landing page, bản mock đẹp mà không có designer.
  • Lập trình viên muốn thoát khỏi phong cách "AI tạo ra": gradient tím, icon emoji, thẻ bo tròn có sọc màu.
  • Người cần prototype HTML độ trung thực cao, chia sẻ ngay bằng một file.
  • Không phù hợp cho web app production, site SEO hay hệ thống cần backend.

Ví dụ sử dụng

  1. "Làm bộ slide gọi vốn 12 trang theo tông cà phê" → vào module deck, mỗi hướng 2 trang đại diện → chọn xong mới dựng deck 1920×1080 và xuất PDF/PPTX.
  2. "Thiết kế landing page cho sản phẩm X" → tìm logo & ảnh chính thức → 3 hướng HTML kèm ảnh chụp màn hình → hoàn thiện bản được chọn rồi chạy design_lint.py kiểm tra.
  3. "Làm animation giới thiệu sản phẩm 30 giây, xuất MP4" → kiểm chứng thông tin, viết 导演稿.md phân cảnh → duyệt 3 bảng hướng → render animation theo timeline và xuất video.

· · · 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/alchaincyf/huashu-design/HEAD/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 AI Skill Mart.
Copy thư mục SKILL.m từ repo GitHub alchaincyf/huashu-design vào ~/.claude/skills/huashu-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/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

⚠ Đâ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 PowerShell (Windows).
  2. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  3. Clone repo: git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
  4. Kiểm tra Python: python3 --version (Windows dùng python --version).
  5. Tùy chọn — cài Playwright để chụp màn hình/kiểm tra: pip install playwright && playwright install chromium.
  6. Khởi động lại Claude Code, rồi yêu cầu kiểu "làm prototype", "làm PPT", "làm trang HTML đẹp" để kích hoạt skill.
  7. Khi nhận được 3 hướng thiết kế, hãy chọn một hướng — skill chỉ tiếp tục sau khi bạn chọn.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT