guizang-social-card-skill：3:4 竖图版式 Skill

3:4 竖图是图文卡片的主战场。这个 Skill 把字号层级、版式比例、断行规则全部按手机信息流的真实场景校准，内置 11 个品类适配、28 个版式骨架、两套视觉系统。

起因

之前做了 guizang-ppt-skill，后来用它生成网页，单张截图发到图文平台，反响比自己手工排版还好。

市面上 AI 生成图文卡片的工具，几乎都是同一个味道：Tailwind + 大色块 + emoji 堆砌 + 中规中矩的字号层级。它们做的是网页，不是杂志。

图文卡片和 PPT 是完全不同的生物——竖屏、信息流里 1 秒钟决定停不停下、靠图说话而不是靠字。版式不同、节奏不同、读者不同。

于是从 PPT Skill 里拆出来，单独做了 guizang-social-card-skill。

项目地址：github.com/op7418/guizang-social-card-skill

品类适配：11 个常见图文品类

绝大多数 AI 工具不管你在写什么，都用同一套模板。这个 Skill 内置了 11 个品类的适配规则：

• 旅行/生活方式：杂志风，暖色板，大图压全屏，衬线大标题
• 职场/干货/商业洞察：网格风，深色背景，数据大字报版式
• 影视/文化：冷色调杂志风，电影海报式版式
• 产品测评/数码：网格风，对比矩阵，设备框美化截图
• 读书/笔记：杂志风，衬线字体，引文居中，留白拉满
• 美食/探店：高饱和杂志风，俯拍图优先，文字向四角让位

同一段文字，你说这是影评，它给你电影海报式卡片；你说这是产品测评，它给你带设备框的对比图。

还有为旅行博主做的地图组件，可以把店铺位置和旅行路线标注在上面。

文字压图

文字压图是图文卡片里最难的事，也是最容易暴露"AI 感"的地方。压不好会出现：文字盖在人脸或产品中心上、白字压浅色背景读不清、文字横跨整张图毁掉构图。

Skill 用三步处理：

1. 识别主体：人脸、产品、文字密集区，版式上自动避开
2. 算落点区域色和明度：决定字色、是否加蒙版、阴影深度
3. 字号和断行自适应：根据落点区域大小动态调整字号和换行位置

图片来源

默认接入三个免费可商用图库：

• Pexels：支持中文搜索，大众场景够用
• Unsplash：摄影质感最强，人物、生活、空间首选
• Wallhaven：游戏、摄影、壁纸类

根据正文段落语义自动派发搜索词、拿回图、按版式裁切到位。

截图美化

内置截图美化：加 macOS / iOS 风格的设备外框，用不同材质的背景托住截图（格纸、点阵、暖白或深色），根据视觉风格自动匹配阴影和圆角参数。

随手截的图，过一道，看上去像产品官方宣传图。

AI 生图：克制使用

只有所有找图渠道都拿不到合适素材时，才调用 AI 生图。生图时强制带风格约束词，避免"一眼 AI 插画"的平庸视觉。

视觉系统：两套风格 + 28 个版式骨架

两套视觉系统：

• 杂志风：大留白，衬线大标题，版式不对称，文字有呼吸感
• 网格风：强网格，无衬线，几何感，用色克制但精准

28 个版式骨架，从过去十年看过的杂志、海报、专辑封面、电影海报里挑出来。给 AI 一个被验证过的骨架，它的任务就从"设计"降级成"填充"，成品稳定性立刻上来。

限制不是阻碍，是底线。给一个内容创作者无限的颜色选择，他更容易做出难看的东西；给他 10 套被验证过的色板，做出能看的东西的概率接近 100%。

设计理念

图文卡片的本质，和印刷海报、画报、专辑封面是同一种东西——用一张静态图，在 1 秒钟里说服一个陌生人停下来。杂志和海报在过去一百年已经把这件事研究透了。

网页设计语言是为可滚动、可交互的场景做的，搬到静态图上会显得用力过猛、信息平淡。

• 大留白，是杂志告诉你"重点在这里"的方式
• 衬线字体优先，因为衬线在大字号上有印刷品的重量感
• 版式不对称，制造视觉节奏，让眼睛知道先看哪
• 用色克制，社交信息流里克制的色板反而比高饱和度更显眼

这些决策听起来很虚，但落到代码里全是具体的常量——字号阶比例、留白比例、网格列数、对比度阈值、断行规则。这些常量才是 Skill 真正的护城河。

Skill 是产品

这个项目有 PRODUCT.md（解决什么问题、给谁用、不做什么）、版本号和 CHANGELOG、HANDOVER.md（交付物长什么样、能力边界在哪）。

作者的观点：Skill 本质上是一个小产品。Prompt 十分钟会被同行复制走，产品不会。如果一个 Skill 连自己的能力边界都说不清，就没资格让别人把工作流交给它。

项目地址：github.com/op7418/guizang-social-card-skill