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

codeck Design (tạo giao diện slide)

Skill vai trò "nhà thiết kế" của codeck: đọc deck.md rồi sinh hệ thống thiết kế và ghép thành một file HTML trình chiếu duy nhất.

Thiết kế · UINâng cao★ 202⑂ 17Điểm AI 9/10Cập nhật lần cuối: 8 thg 8, 2026

Làm được gì

  • Đọc deck.md (nội dung) và diagnosis.md (vai trò, thách thức thể hiện) trong quy trình codeck để chọn hướng thị giác.
  • Viết DESIGN.md gồm token màu, typography, spacing, component rồi chạy script kiểm tra hợp lệ trước khi dựng giao diện.
  • Chỉ viết custom.css và slides.html, sau đó ghép với engine cố định (điều hướng, chế độ người thuyết trình, mobile) thành file tên-r1.html tự chứa.
  • Trích xuất tín hiệu thiết kế từ ảnh chụp, URL hay website thương hiệu: bảng màu, đặc tính chữ, nhịp khoảng trắng, chất liệu.
  • Xử lý tài sản hình ảnh: cắt, chỉnh tương phản, làm sạch screenshot, tạo ảnh mới, hoặc thay bằng CSS/SVG khi hợp lý hơn.

Phù hợp với ai

  • Người dùng codeck muốn làm slide bằng HTML trong Claude Code.
  • Người thuyết trình trực tiếp trên trình duyệt, cần speaker notes, overview và bản mobile.
  • Người muốn lưu lại quy ước thiết kế thành tài liệu để dễ sửa và quản lý revision.

Ví dụ sử dụng

  1. "Thiết kế slide cho bài này" → skill phân tích cấu trúc nội dung, đề xuất 2-3 hướng thị giác rồi sinh DESIGN.md và HTML.
  2. "Lấy phong cách giống website thương hiệu X" → tự truy cập site, rút ra palette và nhịp bố cục để áp vào skeleton.
  3. "Làm slide 3 sáng hơn" hoặc "đổi sang palette ấm" → chỉ sửa custom.css rồi build lại thành revision mới.

· · · 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/hiyeshu/codeck/HEAD/skills/codeck-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/codeck-design từ repo GitHub hiyeshu/codeck vào ~/.claude/skills/codeck-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/hiyeshu/codeck.git && mkdir -p ~/.claude/skills && cp -r codeck/skills/* ~/.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à vào thư mục bạn muốn lưu mã nguồn.
  2. Tải repo: git clone https://github.com/hiyeshu/codeck.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill của codeck: cp -r codeck/skills/* ~/.claude/skills/ (skill này cần các skill và script đi kèm như codeck, codeck-outline).
  5. Khởi động lại Claude Code, vào thư mục dự án của bạn và chạy /codeck để tạo dàn ý deck.md trước.
  6. Sau đó nói "thiết kế slide" để skill chạy và xuất ra ./tên-r1.html.
  7. Nếu báo lỗi không tìm thấy script, đặt biến môi trường export CODECK_SKILL_DIR=~/.claude/skills/codeck rồi thử lại.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT