Guizang Social Card Skill

在社交媒体内容为王的时代，一张高颜值的封面图往往决定了点击率。Guizang Social Card Skill 是一款专为 Claude Code、Codex 等 AI Agent 环境设计的开源技能，它能将文章、文案、截图或照片瞬间转化为符合 小红书 (Rednote) 和 公众号 审美标准的精美图文卡片。通过内置的两套顶级视觉系统，它让 AI 也能成为你的专属平面设计师。

核心亮点：双视觉系统，专业级输出

1. 两套顶级视觉风格

• 电子杂志风 (Editorial)：致敬 Monocle、Kinfolk、Cereal。克制、优雅、注重叙事氛围。
  • 适用：生活方式、旅行、阅读、影视评论、个人观察。
  • 特色：支持 WebGL 动态墨流背景（Hero 页），营造高级感。
• 瑞士国际主义 (Swiss)：网格系统、单一锚点色、极致字号对比、直角发丝线。
  • 适用：产品测评、数据可视化、方法论教程、AI 工具介绍。
  • 特色：结构清晰，信息传达效率极高，如 KPI Tower、H-Bar Chart 等专业版式。

2. 28 个专业版式骨架

• Editorial (16 个)：包含 Image-Led Cover（全图封面）、Pipeline（流程）、Before/After（对比）等，擅长讲故事。
• Swiss (12 个)：包含 KPI Tower（关键指标塔）、Matrix + Hero（矩阵+主图）、H-Bar Chart（横向条形图）等，擅长列事实。

3. 智能图源工作流

• 优先级机制：用户供图 > Unsplash > Pexels > Flickr CC > Wallhaven > 直接搜索。
• 自动落地：图片自动下载至本地，并生成 SOURCES.md 记录来源，方便版权管理。
• 智能避让：满铺图自动叠加遮罩，文字落点智能避开人脸主体，确保可读性与美观。

4. Playwright 真实渲染与校验

• 单文件 HTML：基于 HTML + CSS Grid 构建，Agent 可直接读写修改，版式精确远超 Markdown。
• 严格校验脚本：validate-social-deck.mjs 基于 Playwright 真实 DOM 测量，检测溢出、字号上限、Footer 碰撞等 6 大规则，确保输出零瑕疵。
• 一键 PNG：无需前端构建链，node render.mjs 直接输出高清 PNG。

快速开始：30 秒安装

方式一：一行命令（推荐）

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

方式二：发送给 AI Agent

复制以下指令发给拥有 Shell 权限的 AI Agent（如 Claude Code）：

帮我安装 guizang-social-card-skill。请把 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill，安装完成后检查 SKILL.md、assets/、references/ 是否存在。

使用指南：自然语言驱动设计

安装后，只需对 Agent 说出你的需求，例如：

• 小红书图文：“帮我基于这篇文章做一套瑞士风小红书图文，5 张，IKB 蓝。”
• 公众号封面：“帮我把这篇文章做成公众号封面对：21:9 头图 + 1:1 分享卡，视觉保持一致。”
• 特定风格：“基于这份产品测评做一套小红书 3:4，标题用电子杂志风。”
• 游戏/影视：“把这段游戏攻略文案做成一套小红书图文，需要从 wallhaven 拿点游戏原画。”

10 套主题预设：美学比自由更重要

为了保证输出质感，Skill 限制了自定义 Hex 值，提供 10 套经过精心调配的主题：

适用与不适用场景

• ✅ 完美适配：小红书图文组图、公众号封面/分享卡、朋友圈封面、教程拆页、数据回顾、旅行攻略、产品测评、截图说明。
• ❌ 不建议使用：横向翻页 PPT（请用 guizang-ppt-skill）、长视频生成、纯图片修图、无版式诉求的纯文字编辑。