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

Thẻ chia sẻ Twitter

Mẫu thiết kế tạo thẻ trích dẫn/số liệu 1600×900 (16:9) bằng HTML để đính kèm tweet.

Thiết kế · UINhập môn★ 8,494⑂ 837Điểm AI 5/10Cập nhật lần cuối: 23 thg 8, 2026

Làm được gì

  • Định nghĩa bố cục thẻ chia sẻ 1600×900 (16:9) dành cho X/Twitter.
  • Chỉ định vị trí: câu trích dẫn lớn ở giữa (text-6xl, tối đa 2–3 dòng), tên tác giả + chỗ đặt avatar + handle bên dưới, nhãn loại (Insight/Data/Quote) góc trên trái, watermark thương hiệu góc dưới phải.
  • Nền có hiệu ứng grid/noise/dot và quầng gradient nhẹ để ảnh chụp màn hình trông chỉn chu.
  • Cho phép chọn tông tối hoặc sáng tùy cảm xúc nội dung.

Phù hợp với ai

  • Marketer, creator thường đăng trích dẫn hoặc số liệu dạng ảnh lên X/Twitter.
  • Người làm nội dung cần sản xuất ảnh quảng bá bài viết, newsletter đều đặn.
  • Lập trình viên đã quen quy trình render HTML/Tailwind rồi chụp ảnh.

Ví dụ sử dụng

  1. "Lấy câu chốt của bài này làm thẻ trích dẫn Twitter" → sinh HTML thẻ tông tối 16:9 rồi chụp màn hình.
  2. Tạo thẻ số liệu tuần (ví dụ MAU tăng 32%) với nhãn "Data" ở góc trên trái.
  3. Tạo hàng loạt thẻ tông sáng chứa trích dẫn phỏng vấn kèm handle người nó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/nexu-io/html-anything/HEAD/next/src/lib/templates/skills/card-twitter/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/card-twitter từ repo GitHub nexu-io/html-anything vào ~/.claude/skills/card-twitter/ 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 /tmp/html-anything && mkdir -p ~/.claude/skills/card-twitter && cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/

⚠ Đâ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 mã nguồn: git clone https://github.com/nexu-io/html-anything.git /tmp/html-anything
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills/card-twitter
  4. Sao chép tệp: cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/
  5. Khởi động lại Claude Code và thử: "tạo thẻ trích dẫn Twitter cho câu này".
  6. Mở HTML kết quả trong trình duyệt, chụp ở kích thước 1600×900 là có ảnh đính kèm tweet.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0