เมื่อไม่นานมานี้ ผมได้เปิดซอร์ส guizang-ppt-skill และต่อมาก็ค้นพบอะไรบางอย่างตอนที่ใช้มันสร้างคอนเทนต์เอง
หน้าเว็บที่มันสร้างขึ้น เมื่อจับภาพหน้าจอไปโพสต์บนแพลตฟอร์มภาพ+ข้อความ ได้รับฟีดแบ็กและข้อมูลที่ดีกว่าการจัดวางที่ผมทำเองเสียอีก
ผมเชื่อว่าคุณเคยเจอพรอมต์หรือ Skills บางอย่างที่สร้างการ์ดภาพขนาด 3:4 เหล่านี้มาก่อน
เกือบทั้งหมดมีกลิ่นอายเดียวกัน: Tailwind + บล็อกสีขนาดใหญ่ + การเรียงอิโมจิ + ลำดับชั้นฟอนต์ที่ธรรมดา
พอเห็นแล้ว ก็พอเข้าใจคร่าวๆ ว่าทำไมการ์ดภาพ+ข้อความที่ AI สร้างถึงดูง่ายนัก—เพราะมันกำลังทำหน้าเว็บ ไม่ใช่นิตยสาร
การ์ดภาพ+ข้อความเป็นสัตว์คนละชนิดกับ PPT: จอแนวตั้ง, การตัดสินใจภายใน 1 วินาทีในฟีดข้อมูลว่าจะหยุดดูหรือไม่, และพึ่งพาภาพมากกว่าคำ
เลย์เอาต์คนละแบบ, จังหวะคนละแบบ, ผู้อ่านคนละกลุ่ม
ผมเลยแยกมันออกมาจาก PPT Skill และทำเป็น guizang-social-card-skill แบบสแตนด์อโลน (https://github.com/op7418/guizang-social-card-skill
ด้านล่างนี้ ผมจะพูดถึงว่าทำไมมันถึงดี และทำไมผมถึงยอมเสียเวลากับมันมากขนาดนี้
2. แล้วมันดีตรงไหนกันแน่?
ภาพแนวตั้ง 3:4 คือสนามรบหลักของการ์ดภาพ+ข้อความ พลังการออกแบบส่วนใหญ่ของ Skill นี้ทุ่มเทให้กับ 3:4—ลำดับชั้นฟอนต์, สัดส่วนเลย์เอาต์, และกฎการตัดบรรทัด
ทุกอย่างถูกปรับเทียบตามสถานการณ์จริงของการถูกปัดผ่านในฟีดข้อมูลบนมือถือ รองรับ 21:9 และ 1:1 สำหรับรูปหัวข้อบทความ WeChat Official Account ด้วย
มาเริ่มกันที่สิ่งที่ครีเอเตอร์ภาพ+ข้อความใส่ใจมากที่สุด
2.1 มันแยกแยะสิ่งที่คุณเขียนและจับคู่กับสไตล์ที่เหมาะสม
คอนเทนต์บนแพลตฟอร์มภาพ+ข้อความมีการแบ่งหมวดหมู่ รีวิวหนังกับรีวิวสินค้าต้องใช้ภาษาภาพคนละแบบ
บันทึกการเดินทางกับเคล็ดลับที่ทำงานควรใช้เลย์เอาต์คนละแบบ
แต่เครื่องมือ AI ส่วนใหญ่ไม่สนใจเรื่องนี้ พวกมันใช้เทมเพลตเดียวกันไม่ว่าคุณจะเขียนอะไร
ผลลัพธ์คือการ์ดของทุกคนดูเหมือนมาจากสายการผลิตปก WeChat Official Account
Skill นี้มีกฎการปรับตัวในตัวสำหรับหมวดหมู่ภาพ+ข้อความทั่วไป 11 หมวดหมู่:
- ท่องเที่ยว / ไลฟ์สไตล์: สไตล์นิตยสาร, จานสีอบอุ่น, ภาพเต็มจอ, หัวเรื่องตัวเซอริฟขนาดใหญ่
- ที่ทำงาน / เคล็ดลับ / ข้อมูลเชิงธุรกิจ: สไตล์กริด, พื้นหลังสีเข้ม, เลย์เอาต์แบบโปสเตอร์เน้นข้อมูล
- ภาพยนตร์ / วัฒนธรรม: สไตล์นิตยสารโทนเย็น, เลย์เอาต์แบบโปสเตอร์หนัง, ให้ความสำคัญกับภาพบุคคลระยะใกล้
- รีวิวสินค้า / ดิจิทัล: สไตล์กริด, ตารางเปรียบเทียบ, ภาพหน้าจอในกรอบอุปกรณ์
- การอ่าน / โน้ต: สไตล์นิตยสาร, ฟอนต์เซอริฟ, เลย์เอาต์คำพูดแบบกึ่งกลาง, พื้นที่ว่างสูงสุด
- อาหาร / ร้านค้า: สไตล์นิตยสารสีอิ่มตัวสูง, ให้ความสำคัญกับภาพมุมสูง, ย้ายข้อความไปที่มุม
ผม甚至还专门为旅游博主做了一个地图组件。你可以在上面标记店铺位置和旅行路线，AI 会自动为你生成标注。
喂给它同样的文本：告诉它是电影评论，它就给你电影海报风格卡片；告诉它是产品评测，它就给你带设备框架的对比图表。
更重要的是，它有明确的"禁区"：
- 粉丝向内容：所需的视觉语言完全不同；
- 纯推广广告：与其强调内容的设计理念相悖；
- 超过 12 屏的长教程：图片+文字的形式并非长教程的最佳载体。
在这些场景下，Skill 一开始就会告诉你："你可能想用别的工具。"
这是我刻意留下的。边界比能力更能定义产品；一个什么都想做的 Skill 通常什么都做不好。
2.2 如何在图片上叠加文字
在图片上叠加文字是图片+文字卡片最难的部分，也是最容易暴露"AI 味"的地方。
做不好，会出现三种失败情况：
- 文字遮住了人脸或产品中心。
- 白色文字配浅色背景，或黑色文字配深色背景，导致看不清。
- 文字横跨整张图片，毁了一张本来不错的构图。
这个 Skill 分三步处理：
- 识别图片中的主体：人脸、产品、文字密集区域，并在布局中自动避让；
- 计算放置区域的色彩和亮度：决定文字颜色、是否添加遮罩以及阴影的深度。
- 自适应字体大小和换行：根据放置区域的大小动态调整字号和换行位置，而不是硬编码一个会溢出的字号。
有了这些规则，卡片的"高级感"就立住了。读者看不出"文字是后来压上去的"还是"原本就在那里"。
2.3 图片从哪来：这是与其他 AI 卡片工具最大的不同
大多数用于生成图片+文字卡片的 AI 工具，要么让你自己上传图片，要么用表情符号代替，要么生成一眼 AI 的插图。
结果是，手动找图累死人，或者堆砌表情符号看起来很假。
这个 Skill 默认连接了三个免费商用的图片库：
- Pexels：支持中文搜索，适合一般场景；
- Unsplash：摄影质感最强，人物、生活、空间类内容的首选；
- Wallhaven：游戏、摄影和壁纸都在这里，虽然版权有点乱。
它会根据文本段落的语义自动分配搜索词，检索图片，裁剪以适应布局，并避免切掉人脸或主体。
你得到的是带有真实摄影的卡片，而不是色块卡片。
而且它不会死板地寻找绝对没有版权问题的图片。它会告诉你它找到了哪些图片，由你决定是否使用版权不明确的图片。
另外，平台现在对 AI 水印非常严格。你现在使用的大多数 AI 生成的图片都有水印，会被平台识别并可能导致限流。这是一个主要的痛点。
2.4 截图也是图片：四件套美化
我们很多内容不能使用摄影照片，需要使用软件截图、聊天记录或产品界面。
这个 Skill 内置了截图美化器：
添加 macOS/iOS 风格的设备框架（浏览器边框或手机边框），使用不同的背景纹理来承载截图——方格纸、点阵、暖白或深色——这样截图就不会再以白底浮在白底上；
同时，它会根据视觉风格自动匹配阴影层和圆角参数。两种风格各有自己的截图配方，确保一致性，无需手动调整。
简单来说，你随手截的一张图，经过处理后看起来会像官方的产品宣传图。
2.5 AI 图像生成：克制使用
只有当所有之前的图片来源都找不到合适的素材时，这个 Skill 才会调用 AI 图像生成。
生成图像时，它会强制加入风格限制词，以避免那种"一看就是 AI 插画"的平庸视觉效果。
我宁愿它少用 AI，也不希望它用 AI 的方式让所有图片+文字卡片都像姐妹一样。这也避免了因使用 AI 图像而影响内容曝光。
2.6 视觉系统：两种风格 + 28 种布局骨架
熟悉我之前 PPT Skill 的人会觉得眼熟。这两种视觉系统和布局骨架是从 PPT Skill 改编和重新校准而来的。
细节我就不重复了，但这里展示一下它们在图片+文字卡片语境中的样子。
两种视觉系统：
- 杂志风格：你在《纽约客》或上海译文出版社封面上看到的那种排版。大留白、大号衬线标题、不对称布局、有呼吸空间的文字。
- 网格风格：类似于 Massimo Vignelli 和 Helmut Schmid 的瑞士平面设计。强网格、无衬线字体、几何感、克制但精确的色彩运用。
28 种布局骨架，是我从过去十年看过的杂志、海报、专辑封面和电影海报中挑选出来的——那些经得起推敲的。
AI 在"自由布局设计"方面仍然平庸。通过给它一个经过验证的骨架，它的任务从"设计"降级为"填充"，成品的稳定性立即提高。
10 套主题色板、固定的字体搭配、有限的图标库——这些细节我就不一一列举了。
逻辑是一样的：约束不是障碍，而是基准线。
给一个内容创作者无限的颜色选择，他们更可能做出难看的东西；给他们 10 套经过验证的调色板，他们做出体面东西的概率接近于 100%。
3. 为什么要做这个？
3.1 设计视角：杂志感非常有效
为什么要采用杂志和网格风格，而不是更"现代"的卡片设计？
图片+文字卡片的本质与印刷海报、画册或专辑封面相同。用一张静态图片在 1 秒内说服陌生人停下来。杂志和海报在过去一百年里已经透彻地研究过这个。
网页设计语言是为可滚动、可交互的场景而生的。把它搬到静态图片上，会显得生硬，信息也会变得扁平。
所以，这个 Skill 所有视觉决策的"为什么"：
- 为什么大面积留白？留白是杂志告诉你"重点在这里"的方式。
- 为什么优先使用衬线字体？衬线字体在大尺寸下具有印刷品的分量感。
- 为什么不对称布局？不对称创造视觉节奏，让眼睛知道先看哪里。
- 为什么色彩要克制？在社交媒体信息流中，克制的调色板实际上比高饱和度更抢眼；它能从周围所有"大声叫喊"的卡片中脱颖而出。
这些决策听起来"抽象"，但它们都是代码中的具体常量。字号比例、留白比例、网格列数、对比度阈值、换行规则。这些常量才是这个 Skill 真正的护城河。
3.2 产品视角：它是一个产品，而不仅仅是一个 Prompt
做了这么多 Skill 之后，我对"Skill 到底是什么"形成了一个判断：
一个 Skill 本质上就是一个小产品。
应用到本项目：
我给它写了一个 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 好不好，就看它有没有得到作者的偏爱。
如果你也在创作图片+文字内容，我希望它能帮你挽救那些因糟糕排版而被浪费的好题材。
如果你也在做 Skill，我希望它能让你重新思考，你做出来的东西是否值得拥有一个 PRODUCT.md。
GitHub: https://github.com/op7418/guizang-social-card-skill
告诉你的 Codex、小龙虾、ClaudeCode 或 Workbuddy：帮我安装这个 Skill：https://github.com/op7418/guizang-social-card-skill
