前言¶
做小红书轮播、知识卡片或短视频配图时，真正拖时间的往往不是排版，而是风格决策：找参考、调配色、选字体，做到第三张发现和第一张对不上。若完全依赖 AI 生图，画面可能够抢眼，但正文里的中文经常糊成乱码。想要「类似 Apple 那种感觉」，又很难把它写成可复用的参数。
下面介绍 SkillHub 社区 Skill「品牌风格丨社交配图设计师」：把定稿文案、脚本、报告摘要或方法论内容，转成一组风格统一、适合手机阅读的社交媒体配图，并在有/无 AI 生图能力时自动切换出图模式。
这是什么¶
「品牌风格丨社交配图设计师」是社区发布者 user_d241203e 维护的 Agent Skill（坐标 @user_d241203e/brand-social-card-designer，当前版本 1.0.0，分类 design-media）。它内置 77 套品牌设计系统（75 个知名品牌萃取风格 + 2 个「破壁者AI进化论」原创风格），把「风格」落实为可直接注入的设计参数，而不是一句形容词。
Skill 会根据运行环境自动选择模式：环境具备 AI 生图能力时走混合模式（AI 生图 + HTML 排版）；否则走纯 HTML 模式。页面标注 requires_api_key=false，不强制要求额外 API Key。
官方入口：
- SkillHub 展示页：https://www.skillhub.cn/skills/user_d241203e/brand-social-card-designer
- API 坐标页：https://api.skillhub.cn/user_d241203e/brand-social-card-designer
核心功能¶
77 套可执行的风格档案¶
每套风格包含 6 个 CSS 色彩变量、情绪关键词、色调方向、字体方向、圆角规范等，来源是对真实品牌设计系统的预萃取参数包（例如资料中提到的 Apple、Nike、Airbnb、Starbucks、Stripe、Linear 等）。输入内容后，Skill 可自动推荐 3～5 个匹配风格，也可由你直接指定品牌名，从第一张到最后一张锁定同一套配色、字体与氛围。
说明：风格仅借鉴品牌的配色与设计氛围，不生成品牌 logo 或产品 UI。
两种出图模式¶
混合模式（AI 生图 + HTML 排版）：视觉主体由 AI 生图承担，文字由 HTML 渲染以保证准确性。人物与物件经 chroma-key 抠图，配合光晕与阴影融入版式。
纯 HTML 模式：不依赖 AI 生图；通过 15 个组件与设计系统完成排版，适合无 imagegen 类能力的环境。
混合模式需要运行环境支持 AI 生图（资料举例为 Codex imagegen）；纯 HTML 模式无此要求。
长文拆页与排版规则¶
对长文或脚本，Skill 通过「5 步压缩阶梯」生成约 4～8 页视觉大纲。中文标题按字数分档调整字号（6 字以内 88px，超过 10 字缩至 56px），并在语义断点换行，避免半个词被拆到下一行。
交付前质检¶
出图前对每张图做逐项检查，包括标题字号是否足够、底部是否留空、强调色是否过多、人物是否融入版式等；并通过 4-band 密度检查，降低竖图大面积空洞的风险。
渲染与可编辑交付¶
渲染优先使用 Playwright（2x 输出 2160×2880）；若无 Playwright，可降级为 wkhtmltoimage 或浏览器截图。输出的 HTML 源文件可二次编辑，不锁死在工具内。
安装与启用¶
Skill 遵循通用 SKILL.md 格式。在 SkillHub 上的安装提示为：参照 SkillHub 安装说明，安装坐标 @user_d241203e/brand-social-card-designer。
1. 检查或安装 skillhub CLI¶
command -v skillhub && skillhub --version
若未安装，可按官方文档执行完整安装或仅 CLI：
# 完整安装（CLI + 默认 Skill，推荐）
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
# 仅安装 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安装到当前 Agent 的 skills 目录¶
安装时必须用 --dir 指向当前 Agent 识别的 skills 目录，否则默认落在 ./skills/ 可能无法被加载。
skillhub search brand-social-card-designer
skillhub install user_d241203e/brand-social-card-designer --dir <你的 skills 目录>
常用路径（以 SkillHub 文档为准）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
在 Cursor 中，可将 --dir 设为 ~/.cursor/skills/。安装后按你所用客户端的要求刷新或重启 Agent，使 Skill 被加载。
典型用法¶
在 Agent 对话中提供已定稿的内容，并说明场景与期望风格，例如：
- 粘贴小红书轮播用的定稿文案或短视频口播脚本，说明需要 4～8 张竖图。
- 让 Skill 根据内容推荐 3～5 套品牌风格，或明确指定「用 Linear 风格」「用 Starbucks 氛围」等。
- 由 Skill 完成拆页、排版与质检，输出可渲染的 HTML 及配图文件；需要时在本地改 HTML 后重新渲染。
资料中的适用形态包括：小红书轮播图、短视频配图、知识卡片、报告摘要配图等。具体对话措辞因客户端而异，核心是提供完整内容与风格指向，由 Skill 完成压缩拆页与统一视觉系统。
适用场景与注意¶
更适合：
- 需要成套、风格一致的社交媒体配图，又不想每次从零调参考的内容创作者；
- 希望配图有品牌感、但难以自建完整设计系统的个人 IP；
- 做报告解读、知识框架、方法论拆解，需要多页统一视觉的知识类博主。
不太适合：
- 只要单张纯插画海报；
- 需要精确复刻复杂数据图表的场景。
环境相关：
- 想要混合模式的抠图与 AI 视觉，需确认当前环境具备 AI 生图能力；
- 渲染链路依赖 Playwright 时，需在本机或运行环境中可用；否则走文档所述降级方案。
SkillHub 页面当前显示：评分 100000，下载 1244 次，安装计数 0（以页面展示为准，会随时间变化）。
结尾¶
「品牌风格丨社交配图设计师」把品牌设计系统变成可选参数，用混合或纯 HTML 两条路径，把文案压缩成手机端可读的成套配图，并保留 HTML 源文件便于二次编辑。若你正在做轮播、知识卡片或报告摘要配图，可在 SkillHub 查看说明并安装：https://www.skillhub.cn/skills/user_d241203e/brand-social-card-designer。
