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

Claude Design Card (claude-design-card)

Biến văn bản hoặc URL thành thẻ HTML theo ngôn ngữ thiết kế Claude/Anthropic rồi chụp thành PNG bằng Playwright.

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

Làm được gì

  • Nhận văn bản thuần, trang web hoặc URL (kể cả arXiv, WeChat, X/Twitter qua r.jina.ai), chắt lọc nội dung rồi tạo file HTML tự chứa hoàn toàn theo tông Claude: nền Parchment #f5f4ed, nhấn Terracotta #c96442, tiêu đề serif Georgia, không dùng font-weight 700.
  • 14 khổ định dạng chia 4 nhóm: ảnh bìa nền tảng (900×383, 1280×720, 1080×1440, 1080×1920), thẻ nội dung ảnh+chữ, thẻ chia sẻ vuông 1080×1080, và layout bài dài (Broadsheet, Feature, Reader, Digest).
  • Không vẽ ngay: gợi ý 1 lựa chọn chính + 2 phương án dự phòng, hỏi tối đa 3 câu về nền tảng và mục tiêu trước khi sinh HTML.
  • Quy tắc SVG rất chặt: 5 nhóm chức năng (đường trang trí, dấu ngoặc kép cỡ lớn, minh họa hình học, biểu đồ dữ liệu, họa tiết pattern), tối đa 3 loại/thẻ, cấm biểu đồ tròn và hiệu ứng 3D.
  • Cuối cùng chạy bun scripts/screenshot.ts để xuất PNG, hỗ trợ chèn mã QR và chế độ chiều cao tự động --full-page.

Dành cho ai

  • Người làm content, marketing cần ảnh bìa và card-news đồng nhất phong cách mà không có designer.
  • Creator đăng bài đa nền tảng (WeChat, Xiaohongshu, Bilibili/YouTube, Douyin/Reels/Stories).
  • Người muốn tóm tắt bài dài, báo cáo, paper thành thẻ chia sẻ đẹp mắt.

Ví dụ sử dụng

  1. Dán URL bài viết và nói "làm thumbnail YouTube" → tool lấy nội dung, đề xuất khổ 1280×720, tạo HTML để xem trước, bạn trả lời "chụp ảnh" là có PNG.
  2. Dán nội dung hướng dẫn và yêu cầu thẻ dạng các bước → sinh thẻ 1080×1440 theo mode Practical Toolkit với 2–4 khối bước.
  3. Dán số liệu báo cáo và yêu cầu thẻ vuông nhấn số → thẻ 1080×1080 với số cỡ lớn, biểu đồ SVG animation và mã QR ở góc dướ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/geekjourneyx/claude-design-card/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 Claude Skill Mart.
Copy thư mục SKILL.m từ repo GitHub geekjourneyx/claude-design-card vào ~/.claude/skills/claude-design-card/ 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/geekjourneyx/claude-design-card.git ~/.claude/skills/claude-design-card

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Cài Bun, sau đó chạy bunx playwright install chromium để tải trình duyệt cho việc chụp ảnh.
  2. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  3. Clone repo: git clone https://github.com/geekjourneyx/claude-design-card.git ~/.claude/skills/claude-design-card
  4. Kiểm tra trong thư mục có SKILL.md, scripts/screenshot.ts, references/design-spec.md và assets/ (file font).
  5. Khởi động lại Claude Code, rồi yêu cầu ví dụ: "tạo thẻ thông tin từ đoạn văn này".
  6. Nếu font bị lỗi, đảm bảo @font-face dùng đường dẫn tuyệt đối file:///.../assets/... (đường dẫn tương đối sẽ thất bại khi chụp).
  7. Kết quả mặc định lưu tại /tmp/claude-card-[từ-khóa].html và .png.
Xem mã nguồn trên GitHub ↗