# 开源个 Skill｜彻底解决小红、小绿书配图难题
Canonical: https://social-archive.org/yena/3aFkZo7JR7
Original URL: https://x.com/op7418/status/2059812895803011449
Author: 歸藏(guizang.ai)
Platform: x
## Content
![image](https://pbs.twimg.com/media/HJXru_nbkAApb4D.jpg) 前段时间开源了 [guizang-ppt-skill](https://mp.weixin.qq.com/s/MVXHToWtNVT_b68zxr7fSA)，之后我自己用它做内容的时候发现一件事。 用它出的网页，单张截下来发到图文平台，反响和数据比我手工排版还很多。 ![image](https://pbs.twimg.com/media/HJXr0RqaEAA8clA.jpg) 我相信你之前也找到过一些这种生成3：4 卡片图的提示词或者 Skill。 他们几乎都是一个味道：Tailwind + 大色块 + emoji 堆砌 + 中规中矩的字号层级。 看完之后，我大致能理解为什么 AI 出的图文卡片那么容易被一眼识破，它们做的是网页，不是杂志。 图文卡片对比 PPT 完全是另一种生物：竖屏、信息流里 1 秒钟决定停不停下、靠图说话而不是靠字。 版式不同、节奏不同、读者不同。 于是我把它从 PPT Skill 里拆了出来，单独做成了 guizang-social-card-skill （https://github.com/op7418/guizang-social-card-skill）。 下面讲讲它好在哪、我为什么愿意在它身上花这么多时间。 ## 二、到底好在哪里 3:4 竖图是图文卡片的主战场。这个 Skill 的绝大部分设计精力都在 3:4 上，字号层级、版式比例、断行规则。 全部按 3:4 在手机信息流里被滑过的真实场景校准过。21:9 和 1:1 公众号头图也都支持。 ![image](https://pbs.twimg.com/media/HJXr7qGbAAAycXX.jpg) 下面从图文创作者最关心的事开始讲。 2.1 它分得清你在写什么，然后用对的方式去配 图文平台上的内容是分门类的。一篇影评和一篇产品测评，需要的视觉语言完全不一样； 一篇旅行散记和一篇职场干货，该用的版式也不是同一回事。 但绝大多数 AI 工具不管这件事，你写什么内容它都用同一套模板套出来。 结果就是所有人发的卡片都长得像一个公众号的封面流水线。 这个 Skill 内置了 11 个常见图文品类的适配规则： - 旅行 / 生活方式：杂志风为主，暖色板，大图压全屏，衬线大标题； - 职场 / 干货 / 商业洞察：网格风为主，深色背景，数据大字报版式； - 影视 / 文化：偏冷色调的杂志风，电影海报式版式，人物特写优先； - 产品测评 / 数码：网格风，对比矩阵，设备框美化截图； - 读书 / 笔记：杂志风，衬线字体，引文居中版式，留白拉满； - 美食 / 探店：高饱和杂志风，俯拍图优先，文字向四角让位； ![image](https://pbs.twimg.com/media/HJXsC7WbYAA109i.jpg) 我甚至专门为旅行博主做了地图组件。你可以把店的位置和旅行路线都标注在上面，AI 会自动帮你生成标注。 ![image](https://pbs.twimg.com/media/HJXsHTZakAA37-0.jpg) 同一段文字喂给它，你说这是影评，它给你电影海报式的卡片； 你说这是产品测评，它给你带设备框的对比图。 ![image](https://pbs.twimg.com/media/HJXsJtfbgAAD-JV.jpg) 更重要的是，它有明确不接的活： - 追星粉丝向，需要的视觉语言完全是另一脉； - 纯促销硬广，违背它强调内容性的设计哲学； - 超过 12 屏的长教程，图文形态不是长教程的最优载体。 碰到这些场景，Skill 会在开头就告诉你"你可能想用别的工具"。 这是我故意留的。能力边界比能力本身更能定义一个产品，一个什么都能做的 Skill 最后通常什么都做不好。 2.2 文字怎么压在图上 文字压图是图文卡片里最难的一件事，也是最容易暴露"AI 感"的地方。 压不好就会出现三种翻车： 1. 文字盖在人脸或产品中心位置上 1. 白字压浅色背景或黑字压深色背景读不清 1. 文字横跨整张图把本来好看的构图毁掉。 ![image](https://pbs.twimg.com/media/HJXsP18awAAUD4t.jpg) Skill 处理这件事用了三步： 1. 识别图里的主体：人脸、产品、文字密集区，版式上自动避开； 1. 算落点区域的色和明度：决定字色、要不要加蒙版、阴影该多深； 1. 字号和断行自适应：根据落点区域大小动态调整字号和换行位置，而不是写死字号让它溢出。 ![image](https://pbs.twimg.com/media/HJXsTz7aIAABjwj.jpg) 这套规则跑下来，卡片的"高级感"基本就立住了。读者看不出"被压上去的字"和"图本来就在那里的字"的区别。 2.3 图片从哪来：这是和市面上 AI 卡片工具最大的差别 绝大多数 AI 生成图文卡片的工具，要么让你自己上传图，要么用 emoji 顶替，要么生成一些一眼 AI 的插画。 结果就是手工补图很累，或者堆 emoji 显得很假。 这个 Skill 默认接入了三个免费可商用图库： - Pexels，支持中文搜索，大众化场景够用； - Unsplash，摄影质感最强，人物、生活、空间类内容首选； - Wallhaven，游戏、摄影、壁纸之类的图都在这里，版权混乱。 ![image](https://pbs.twimg.com/media/HJXsXpabAAAN-hk.jpg) 它会根据正文段落的语义自动派发搜索词、拿回图、按版式裁切到位、避开人脸或主体被切掉。 你拿到的是一张配了真实摄影图的卡片，而不是一张色块卡片。 而且它也不会死板地去寻找绝对没有版权问题的图。 能拿到的图都会告诉你，由你自己来判断要不要放版权不明确的图片。 另外，现在各个平台对 AI 带水印的问题管得很严。 目前你用的大部分 AI 生图都会有水印，而有水印就会被平台标注，一旦被标注就容易被限流，这是大家非常困扰的一个问题。 2.4 截图也是图：四件套美化 我们的很多内容用不了摄影图，得是软件截图、聊天记录、产品界面。 Skill 内置了一套截图美化： 加 macOS / iOS 风格的设备外框（browser chrome 或手机边框），用不同材质的背景托住截图，格纸、点阵、暖白或深色，让截图不再白底飘在白底上； 同时根据视觉风格自动匹配阴影层次和圆角参数，两套风格各有一套截图配方，前后一致不用手动调。 ![image](https://pbs.twimg.com/media/HJXsc5SaQAAs9Hh.jpg) 简单一句，你随手截的图，过它一道，看上去就像产品官方做的宣传图。 2.5 AI 生图：克制地用 只有前面所有找图渠道都拿不到合适素材时，Skill 才会调用 AI 生图。 生图时会强制带上风格约束词，避免出现"一眼 AI 插画"那种平庸视觉。 我宁可它少用 AI，也不想它把 AI 用成那个让所有图文卡片长得都像姐妹的元凶。 也避免你使用 AI 图片导致内容曝光受影响。 ![image](https://pbs.twimg.com/media/HJXshodboAA0bM3.jpg) 2.6 视觉系统：两套风格 + 28 个版式骨架 熟悉我之前的 PPT 的人会觉得眼熟。 这两套视觉系统和版式骨架，是从 PPT Skill 那边沿用并重新校准过来的。 我就不重复展开，简单说一下它在图文卡片场景下的样子。 两套视觉系统： - 杂志风：你在《The New Yorker》和上海译文社的封面上看到的那种排版。大留白，衬线大标题，版式不对称，文字有呼吸感。 - 网格风：Massimo Vignelli 和 Helmut Schmid 瑞士平面设计那一脉。强网格，无衬线，几何感，用色克制但精准。 ![image](https://pbs.twimg.com/media/HJXsknfacAAAm9A.jpg) 28 个版式骨架，是我从过去十年看过的杂志、海报、专辑封面、电影海报里挑出来，经得起放大看的那些。 AI 在"自由版面设计"上现在还是平庸的，给它一个被验证过的骨架，它的任务就从"设计"降级成"填充"，成品稳定性立刻上来。 10 套主题色板、固定字体搭配、有限图标库，这些细节就不一一列了。 ![image](https://pbs.twimg.com/media/HJXsnx8aYAAsVAF.png) 它们的逻辑是同一个：限制不是阻碍，是底线。 给一个内容创作者无限的颜色选择，他更容易做出难看的东西； 给他 10 套被验证过的色板，他做出能看的东西的概率会接近 100%。 ## 三、为什么要这么做 3.1 设计角度：杂志感非常有效 为什么走杂志风和网格风，而不是更"现代"的卡片设计? 图文卡片的本质，和印刷海报、画报、专辑封面是同一种东西。 用一张静态图，在 1 秒钟里说服一个陌生人停下来。杂志和海报在过去一百年已经把这件事研究透了。 网页设计语言是为可滚动、可交互的场景做的，搬到一张静态图上，会显得用力过猛、信息平淡。 ![image](https://pbs.twimg.com/media/HJXsuACa8AAX8jz.jpg) 所以这个 Skill 在视觉决策上的所有"为什么"： - 为什么大留白?留白是杂志告诉你"重点在这里"的方式； - 为什么衬线字体优先?衬线字体在大字号上有印刷品的重量感； - 为什么版式不对称?不对称会制造视觉节奏，让眼睛知道先看哪； - 为什么用色克制?社交信息流里，克制的色板反而比饱和度高的更显眼，它和周围所有"喊得很大声"的卡片不一样。 这些决策听起来都很"虚"，但它们落到代码里全是具体的常量。 字号阶比例、留白比例、网格列数、对比度阈值、断行规则。这些常量才是这个 Skill 真正的护城河。 3.2 产品角度：它是一个产品，不是一段 Prompt 做了这么多 Skill 之后，我对"Skill 这种东西到底是什么"形成了一个判断： Skill 这种东西，本质上是一个小产品。 ![image](https://pbs.twimg.com/media/HJXsyJMbMAADIio.jpg) 落到这个项目里： 我给它写了 PRODUCT.md，讲清楚它解决什么问题、给谁用、不做什么。 是为了逼自己把"我到底在做什么"想清楚。我自己说不清的时候，这个 Skill 就不该被发布。 我给它打 版本号(v0.5 / v0.9 / v0.10 / v0.12)，每一版都有 CHANGELOG。 我能告诉你为什么 v0.10 是一次失败的尝试，以及 v0.12 怎么把它修回来的。 我给它写 HANDOVER.md，讲清楚交付物长什么样、能力边界在哪、什么场景该用别的工具。 我希望任何人接手它，都能在 30 分钟内对它有完整理解。 我会提前列出它不擅长的事，省得用户试错三次才发现。 为什么要费这么大功夫? 因为 Skill 生态最大的问题，是绝大多数 Skill 满足于"我能做一个"，很少有人在追求"把这件事做到极致"。 一个 Skill 应该是能站起来的小产品。Prompt 十分钟会被同行复制走，产品不会。 这件事的反面是，如果我连自己 Skill 的能力边界都说不清，我就没资格让别人把工作流交给它。 ## 写在最后 这个 Skill 让我反过来理解了我的 PPT Skill 真正做对的是什么。 真正做对的，是它从一开始就被当成产品对待。 模板多、规则细、颜色好看，都是这件事的副产品。 以后再有人问我 Skill 是什么，我会用两句话回答： Skill 是一个产品。 判断一个 Skill 好不好，看它有没有被它的作者偏爱过。 ![image](https://pbs.twimg.com/media/HJXs3ZVb0AAhph-.jpg) 如果你也在做图文内容，希望它能帮你省掉那些被排版毁掉的好选题。 如果你也在做 Skill，希望它让你重新想一想，你做的那个东西，值不值得有 PRODUCT.md。 GitHub： https://github.com/op7418/guizang-social-card-skill 跟你的 Codex、小龙虾、ClaudeCode、Workbuddy 说：帮我安装这个 Skill：https://github.com/op7418/guizang-social-card-skill