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

Sketchnote biên tập (thẻ khái niệm kiểu tạp chí)

Biến một khái niệm thành hồ sơ chuyên đề kiểu tạp chí: vấn đề thật → thất bại → bước ngoặt → vỡ lẽ → đặt tên, xuất ra một file HTML dài dạng ảnh dọc.

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

Làm được gì

  • Tái cấu trúc một khái niệm thành 6 chặng kể chuyện: khởi điểm, thất bại 1, thất bại 2, bước ngoặt, vỡ lẽ, đặt tên.
  • Bắt buộc mỗi chặng dùng một layout khác nhau (.feature, .note, .archive, .cross, .hero, .closing) để tạo nhịp "rộng → chật → chật → bùng nổ → rộng → tĩnh".
  • Dùng đồng thời 4 họ chữ (Serif, Sans, Mono, chữ viết tay) và bảng màu tối đa 4 màu chính, cấm màu đen tuyệt đối #000.
  • Xuất một file HTML duy nhất (CSS inline, Google Fonts CDN, không JavaScript, khung rộng 1080px) với con dấu "Failed", ghi chú bút đỏ, drop-cap, pull-quote, byline.
  • Có checklist 6 điểm tự kiểm tra: tiêu đề không được lộ tên khái niệm, phải có ít nhất một lần thất bại, nhịp giãn cách không được đều nhau...

Dành cho ai

  • Người làm nội dung giáo dục, phổ biến khoa học muốn kể khái niệm bằng hình.
  • Người viết newsletter/blog cần infographic giải thích khái niệm dưới dạng code.
  • Ai chán các "card" AI đơn điệu và muốn chất biên tập tạp chí.

Ví dụ sử dụng

  1. "Làm sketchnote về lịch sử khái niệm 'emergence'" → từ thất bại của thuyết quy giản đến bài của Anderson 1972.
  2. "Giải thích lãi kép theo mẫu này" → cách tính sai bị gạch bút đỏ, chặng bước ngoặt dùng chữ Serif 200px.
  3. "Thẻ khái niệm về định luật 2 nhiệt động lực học" → hero là hình SVG lớn kèm pull-quote, tên khái niệm chỉ xuất hiện ở phần closing.

· · · 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/nexu-io/html-anything/HEAD/next/src/lib/templates/skills/article-sketchnote-editorial/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 next/src/lib/templates/skills/article-sketchnote-editorial từ repo GitHub nexu-io/html-anything vào ~/.claude/skills/article-sketchnote-editorial/ 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/nexu-io/html-anything.git && mkdir -p ~/.claude/skills && cp -r html-anything/next/src/lib/templates/skills/article-sketchnote-editorial ~/.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.
  2. Tải kho mã: git clone https://github.com/nexu-io/html-anything.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép template: cp -r html-anything/next/src/lib/templates/skills/article-sketchnote-editorial ~/.claude/skills/
  5. Kiểm tra xem file example.html (chứa CSS tham chiếu) có nằm cùng thư mục không; nếu thiếu hãy tìm trong kho và chép vào.
  6. Khởi động lại Claude Code và yêu cầu: "Dùng skill article-sketchnote-editorial làm thẻ dài về khái niệm ○○".
  7. Mở file HTML kết quả bằng trình duyệt, chụp màn hình hoặc in ra PNG nếu cần ảnh.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0