Social Cards

品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題（idea / 文章 / 教學）變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定（brands/），接哪個 pack 出哪個風格，引擎不綁死品牌。觸發詞：做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。

35 stars 4 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add DennisWei9898/social-cards-engine --skill social-cards

Manual install

git clone --depth 1 https://github.com/DennisWei9898/social-cards-engine.git /tmp/social-cards-engine
mkdir -p ~/.claude/skills
cp -r /tmp/social-cards-engine/. ~/.claude/skills/social-cards

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# social-cards · 品牌無關的圖卡引擎

把任何主題（idea、文章、教學、案例）變成一排 IG／Threads／FB 輪播圖卡 + 4 平台文案。

## 🧩 架構：引擎 vs 品牌插件

> **核心觀念**：這個 skill 是**品牌無關的圖卡引擎（tool）**——負責結構、渲染、擴散規則。
> 「長什麼樣、什麼配色、什麼調性」由 **brand pack（品牌插件）** 決定。接哪個 pack → 出哪個風格。
> 一套引擎服務多品牌，各自不同風格，引擎不變。

- **品牌路由**：先看 `brands/README.md`（註冊表）。要用哪個品牌 → 載 `brands/<brand>/brand.md`；沒 pack 就先建一個（見 brands/README 的新增步驟）。
- **引擎不綁品牌**：`templates/*`（navy/warm/morandi）只是**通用起手模板**，不是「某個人的固定風格」。幫別的品牌時用該品牌 pack。

## 🚀 首次使用：選預設 or 對話共創你的風格（安裝完就能開始，使用者不寫 Python）

> **這是 Claude 讀的 skill，不是要使用者手動跑的 CLI。** 使用者只要說「用 social-cards 幫我做圖卡」，Claude 就照下面走。Python + Chrome 只是**渲染那步 Claude 自己會呼叫的相依工具**，使用者全程用「講」的。

使用者第一次用（還沒有自己的 brand pack）時，**先問要走哪條**：

- **A · 用預設風格（最快）**：直接挑一套通用模板 pack（navy 海報 / 暖色 Morandi / 暖大地 ELI5 / meme 鄉民）開始出圖。
- **B · 建立你自己的風格（像 Claude Design 那樣共創）** ← 使用者要的核心體驗。跟使用者對話，把「風格」談出來、寫成 brand pack。兩種輸入擇一或並用：
  1. **對話式訪談**：問品牌名 / 受眾 / 色感 / 字體感 / 語氣 / 有沒有 logo・頭像・產品照（走 `huashu-design` 核心資產協議）→ 邊給假設邊確認 → 定稿。
  2. **給樣本自動萃取**：使用者貼幾篇自己的貼文 / 官網 / 簡報 → Claude 拆解出**配色 + 語氣 DNA** → 寫成 `brand.md`（now6pm、thankyounuts 就是這樣長出來的）。
  → 產出 `brands/<你的品牌>/brand.md`（＋ 從最接近的 pack 複製 `render_template.py` 微調）。之後每次出圖都載這個 pack。
- **C · 已經有 pack**：直接載入用。

> 一句話：**安裝完 → 跟 Claude 聊 → 選預設或共創風格 → 對焦一張封面卡確認「要長這樣嗎」 → 量產出圖 → joker 審**。使用者不碰 Python，那是引擎內部渲染在跑。（對焦那步見下方「🎨 設計對焦閘」。）

### 📥 資產索取規格（onboarding 時給客戶／品牌窗口的話術，可直接複製）

> 新品牌 onboarding 要先跟窗口要對的原始檔，才不會下游一直修白暈。以下白話文案（無術語）可直接複製貼給非技術窗口：

Read the full skill on GitHub

Details

Skill name: social-cards
Repository: DennisWei9898/social-cards-engine
License: MIT
Repo updated: 7 July 2026

FAQ

What does the Social Cards skill do?

How do I install the Social Cards skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add DennisWei9898/social-cards-engine --skill social-cards. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Social Cards popular?

It lives in DennisWei9898/social-cards-engine, which has 35 GitHub stars and 4 forks.

Related skills

Behavioral Design

rastian/behavioral-design-skills

Applies behavioral psychology and behavioral economics to product and UX design. Use when a designer, PM, researcher, or design manager wants to diagnose why users aren't completing a flow, adopting a feature, or changing behavior; design nudges or behavior-change interventions; reduce friction or cognitive load; run a behavioral design workshop or sprint; audit a design for psychological effectiveness; or apply principles like loss aversion, social proof, choice architecture, habit formation, or implementation intentions. Also triggers for: onboarding drop-off, feature adoption, engagement de

Frontend & Design

Clone Team

Varalix-Digitech-Solutions/clone-team

Clone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-perfect UI clone AND produce thorough architecture documentation of how the site works. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, mirror, or copy a website — especially when they want it done thoroughly, in a specific tech stack (React, Vue, Svelte, Angular, etc.), behind a login, or with proper documentation. Triggers on "clone this site", "rebuild this app", "make a copy of <u

Frontend & DesignIn 1 list

SVG Creator

upbrew-tech/svg-creator-skill

Create high-quality SVG graphics including icons, illustrations, logos, diagrams, infographics, patterns, animations, and abstract art. Use this skill whenever the user asks to create, draw, design, or generate any SVG image, vector graphic, icon, logo, badge, diagram, flowchart, infographic, pattern, or animated graphic. Also trigger when the user says "draw me", "make an SVG", "create a graphic", "design an icon", "vector illustration", or requests any visual output that would be best served as an SVG file. This skill covers both simple single-element graphics and complex multi-layered compo

Frontend & Design

Product Promo Animation

jitOffice/jit-motion

Generate a single-file, self-contained HTML product promotional animation video (15-30s) from a product brief/PRD. Produces a multi-scene GSAP timeline storyboard, a four aspect-ratio switcher (16:9/4:3/1:1/9:16), a zero-emoji SVG icon system, brand colors harvested from the official site, playback controls, and SEO video metadata. Use when the user asks for a product promo animation, marketing/ad video, animated HTML demo, or product launch video, or mentions building a product video with GSAP/motion/SVG. 基于产品需求文档/PRD/简介生成单文件、自包含的 HTML 产品宣传动画视频；当用户要求制作产品宣传动画、营销/广告视频、HTML 动画演示或产品发布视频时使用。

Frontend & Design

Flow Preview

tanishqkancharla/flow-preview

Generates interactive Maui user-flow canvases using a bundled CLI, with linked states and persistent review checkboxes. Use when previewing, comparing, or reviewing a user journey across multiple UI states.

Frontend & Design

Jiujiastudy

jiujiastudy/jiujiastudy

救驾（jiujiastudy）是留学生的 Canvas / Moodle 学习手帐：盯 deadline、排本周该学什么、按状态给建议。用户提到课程、作业、deadline、考试、Canvas、Moodle、老师，或说「现在什么情况」「最近要交什么」「这周学什么」「做完了」「没状态 / 累 / 来不及」「交之前检查」「想问老师」「做学习页」「一直在拖 / 开不了头」时使用；第一次用时自己完成设置，只向用户要学校网址（Canvas 另要 token）。

Frontend & Design10

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.