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

Trình tạo ảnh bìa mạng xã hội AGENCY

Tạo ảnh bìa sự kiện, thumbnail YouTube và ảnh Telegram bằng HTML theo một design system tối + cam cố định, rồi render thành PNG sắc nét bằng Playwright.

Thiết kế · UITrung cấp★ 407⑂ 61Điểm AI 5/10Cập nhật lần cuối: 2 thg 11, 2026

Nền tảng này làm gì

  • Sinh file HTML theo bộ design token cố định: nền #0f0f0f, điểm nhấn cam #e85d04, font Geist Bold / JetBrains Mono / EB Garamond, khung viền 1px, lưới nền 40px, thanh accent cam dưới tiêu đề.
  • Tự áp đúng kích thước theo mục đích: bìa sự kiện lu.ma 800×800, thumbnail YouTube 1280×720, ảnh Telegram 1080×1080.
  • Xử lý ảnh diễn giả: chuyển trắng đen, hiệu ứng scanline, mờ dần ở các cạnh, đặt lệch khung để tạo chiều sâu.
  • Ép cỡ chữ tối thiểu để vẫn đọc được ở kích thước thumbnail (tiêu đề 62px+, tên diễn giả 28px+).
  • Chụp ảnh bằng Playwright với deviceScaleFactor 2 để chữ sắc nét.

Phù hợp với ai

  • Người tổ chức meetup/webinar cần ảnh bìa đồng nhất cho mỗi sự kiện
  • Lập trình viên muốn pipeline tạo thumbnail bằng code thay vì mở công cụ thiết kế
  • Đội marketing nội bộ muốn đổi token màu/font thành bộ nhận diện riêng

Ví dụ sử dụng

  1. "Tạo ảnh bìa meetup với Vlad về chủ đề browser automation" → sinh HTML 800×800 rồi render PNG
  2. "Làm thumbnail YouTube cho buổi ghi hình tối nay" → bố cục 16:9 1280×720 với tiêu đề và tên diễn giả
  3. "Tạo ảnh thông báo Telegram cho sự kiện cộng đồng kế tiếp" → ảnh vuông 1080×1080

· · · 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/glebis/claude-skills/HEAD/agency-socials/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 agency-socials từ repo GitHub glebis/claude-skills vào ~/.claude/skills/agency-socials/ 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/glebis/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/agency-socials ~/.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 repo: git clone https://github.com/glebis/claude-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r claude-skills/agency-socials ~/.claude/skills/
  5. Cài công cụ render: npm i playwright && npx playwright install chromium (cần Node.js 18 trở lên).
  6. Khởi động lại Claude Code và yêu cầu ví dụ: "tạo ảnh bìa cho buổi meetup tuần này".
  7. (Tuỳ chọn) Sửa mã màu, font và dòng chữ agency · community trong SKILL.md thành thương hiệu của bạn. Lệnh lưu ảnh từ clipboard dùng osascript chỉ chạy trên macOS; hệ điều hành khác hãy chép file ảnh thủ công.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT