我们开发了一个「杂志封面.skill」
01 前言
经常看我们公众号的小伙伴，应该对 星期一研究室 的「信息美学家」栏目不陌生。它已经更新了很多期，而每一期，我们都会给它配一张新的 封面 。
在以前，我们是在「稿定设计」里 手动 在模板上修改好，然后再 下载 下来作为本期封面。
信息美学家-旧版封面
但后来我们觉得说，这个版面可能已经不太符合 AI 时代的审美，于是我们用 Codex 做了一版新的封面。希望把 版面 设计成一个非常有 国际范 、 且高美观度 的杂志封面。
6月初，第一版封面发到社群后，很多小伙伴都觉得非常好看。
6月初-第一张版面设计
后来做着做着，我们又琢磨：这套设计能不能延展出更多 比例 ？于是 1:1、3:4、横版竖版……各种尺寸都试了一遍。
再后来，又觉得说好像还可以把不同的 强调色 也抽离出来，让同一套版式装下完全不同的情绪。慢慢地，经过很多轮的迭代之后，我们把这些规则都沉淀成了一个可复用的 Skill 。在之后的每一期主题里，只要把新文章的相关信息给到这个 skill ，就能自动产出一张同系列的杂志封面。
随着 每周一 在群里推送的期数越来越多，来问「这套封面到底是怎么做出来的」小伙伴也越来越多。于是我们决定： 把它开源，让更多人都能用上。
这期内容，就带大家看看这个 Skill 的效果、它能解决的问题、怎么安装使用，以及它背后的核心设计策略～
02 先看效果
让我们直接上图😆
下面这些封面，都是把 文章内容 丢给「杂志封面.skill」之后生成的：
钻石蓝
萤光绿
信号黄
热羊红
朱红闪光
可以看出，同一套版式语言，用不同的 主强调色 ，就是完全不同的情绪，但放在一起依然是 一个系列 ，形成了 视觉一致性 。
03 这个 Skill 解决什么问题
看完效果，你可能会想：这能帮我解决什么问题？
做封面最烦的，一般有两件事：一是每次都要 从零设计 ，二是每期 版式不统一 。
而这个 Skill 要解决的，就是这两个问题。
它会提前把 版式 和 规则 定好，你只需要每期换换 主题句 和 配色氛围 ，一张新封面就出来了。
（1）适用场景
这些痛点，落到不同群体身上，就成了很具体的场景。 包括但不限于：
- 做固定栏目的主理人
- ——公众号、播客、视频专栏，每期都得配一张封面。以前回回从零设计，现在只要换句 主题句 、换个 强调色 ，一张新封面就出来了。
- 长期办线下活动的组织
- ——读书会、沙龙、训练营、行业大会，每场都要一张海报，可版式来来回回就那么几样。把框架定好，每期只换主题句和主色：这期讲增长，上橙色；下期聊 AI，换冷蓝，一张图就出来了。
- 做系列内容的品牌或团队
- ——一套课程、一个专栏、一整个种草系列，都需要统一视觉。同一套版式延展下去，读者一眼就认出「是同一个系列」，品牌印象也因此顺手解决。
- 怕中文排版翻车的人
- ——不少 AI 生图工具一遇到中文就乱码，而这个
Skill预置了精确的HTML/PNG排版，再复杂的中文文案都可以快速在html里翻译出来。
开始挖掘你的创意场景🧚♂️
（2）不同比例
此外， skill 让 改比例 这件事也变得很轻松。这个灵感来自一个平常我们在分发文章时，经常会遇到的一个痛点。一篇文章往往要分发到好几个平台，但每个平台的封面比例都不一样，每回都要重新做图，实在麻烦。
渠道分发
于是同一套设计，可以一键延展出不同比例，直接适配各个平台：
公众号头图 · 2.35:1
小红书 · 3:4
方版（朋友圈 / 社媒通用） · 1:1
横版视频封面（视频号 / B 站） · 16:9
04 如何安装和使用
既然它能解决这些问题，又已经开源，那把它用起来就非常方便了。只需要两步： 安装 和 调用 。
安装时，把下面的提示词发给你的 Agent 即可：
请从这个 GitHub 地址安装 make-it-pop-poster：https://github.com/MondayLabOS/magazine-visuals/tree/main/skills/make-it-pop-poster安装完成后，直接输入以下指令即可开始生成封面：
请使用 make-it-pop-poster，读取下面这篇文章，并为它生成一张杂志风格的封面海报。 封面比例：{填写封面比例} 文章链接：{填写文章链接}05 核心设计策略
如果你只想要一张能快速生成的封面，那到这里其实就可以收工了。但要是你也好奇这套封面背后的 设计策略 是怎么定下来的，那可以接着往下看😉
在看到上面的时候时，可能有小伙伴会好奇：为什么这套封面一眼看过去，就有 杂志感 ？
想回答这个问题，我们先打开 Skill 的「内部构造」看一看。
（1）核心文件
| 核心文件 | 角色 | 它是干嘛的 |
|---|---|---|
| SKILL.md | 总指挥 | 一份操作说明书，告诉 Agent 每一步该做什么：先读文章，再选风格，最后检查效果 |
| assets/magazine-poster-template.html | 版式骨架 | 海报的底子，标题、栏目名、期号放在哪都提前定好了，怎么生成都不会乱 |
| references/design-brief.md | 设计理念 | 记录我们的审美偏好：哪些元素要保留、哪些装饰坚决不要 |
| references/color-presets.md | 配色库 | 存好16套试过好看的配色，想换个颜色，直接从里面挑 |
| scripts/render-html.mjs | 最后一棒 | 把做好的海报「导出」成一张能直接用的 PNG 图片 |
那除了文件本身，背后的 策略 是什么样的呢？下面我们来逐条拆解。
（2）栏目的身份元素
先说封面上的三个身份元素： 栏目名、期号、出品方 。
由于中部的位置留给每期的主题句，它们被安排在版面的 边角 。
栏目名、期号、出品方的位置
这三样加在一起，回答的是「这是谁出的、属于哪个系列、第几期」。
三者之中，栏目名的 权重 最高，我们给它单独定了规则：固定在 左上角顶部 ，也就是杂志 masthead 的传统位置。
虽然它的字号并不是全图最大的，但有足够的 辨识度 ，让读者扫一眼就能锁定「信息美学家」。
值得一提的是，围绕这三个元素，我们还给 Skill 加了一层 意图识别 。
生成封面之前， Agent 会先在文章里找 栏目名 、 期号 和 出品方 。文章里如果交代清楚了，就直接沿用；如果信息缺失，它不会默认套上「Mondaylab」或「信息美学家」的 title ，而会停下来先问问你的品牌和栏目是什么。
这样，大家拿去做自己的封面时，左上角就会写着你们自己的栏目名啦。
意图识别示例①
意图识别示例②
（3）视觉语言
第二条策略，是给视觉元素做 减法 。
首先，每张封面只保留一个主概念 。
视觉中心交给粗黑大标题和选区高亮，让文章标题一目了然，其余元素统统退到辅助位。
其次，体现特定设计元素。
| 元素 | 包含什么 | 负责什么 |
|---|---|---|
| 信息特征 | 光标、Copy 菜单、标签贴纸 | 编辑器和阅读器里的常见元素，呼应 信息 这个主题 |
| 出版质感 | 纸张纹理、细网格、边注 | 营造编辑部和印刷品的氛围 |
此外， skill 还会把文章的主要内容融入到设计中，让我们能直接从封面上体会到这篇文章想讲什么：
特定设计元素
最后，在 Skill 中，我们给 Agent 加上了 Harness ， 规定了「不要」的元素 ：
- 太多颜色
- 太多背景装饰
- 通用节点图
SaaS- 仪表盘
- 解释性过强的图标
- 顶部和底部堆满信息
- 不够写实的人物剪影
这份清单就是海报的 AI 味来源，一旦 颜色一多 、 装饰一杂 ，杂志感就没了🙅🏻♀️
（4）配色策略
配色逻辑归结起来有四条：
- 白纸作为底色
- 一个主强调色负责情绪
- 选区色可以是低饱和辅助色
- 标签统一色系，不做彩虹式分散
这个策略的核心，是让 配色从多到少 ， 视觉从热闹到克制 。
配色从多到少，视觉从热闹到克制
在文章开头的封面展示中，就用了这些配色，视觉效果都不错：
- 荧光绿：年轻、锋利，设计感强
- 冷蓝：系统、图纸、理性
- 红色：紧迫、提醒、带点批评意味
- 橙色：有行动感和推进感
skill 内一共预设了 16种配色 ，欢迎大家来多多探索🧚🏻♀️
make it pop 色彩预设
这套策略最终沉淀成了一个 Skill ，如今正用在「信息美学家」栏目上。在现在，每期我们只需要把新文章的标题丢给 Agent ，就能产出一张 杂志级 的封面海报。
信息美学家 · 01-20期
06 结束语
回顾整个过程，「杂志封面.skill」做的事情其实是：把我们在「信息美学家」专栏里反复试错沉淀下来的 版式规则 、 视觉语言 和 配色逻辑 ，封装成一个 Agent 可以稳定执行的 Skill 。
对 内容创作者 来说，这背后有一个更值得琢磨的思路： 审美是可以工程化的 。设计 判断 依然由人来做，比如保留什么、避免什么、用哪个强调色；而重复的 执行 环节交给 AI ，让每一期封面都自动继承同一套标准。
设计一次，复用一百次。把封面变成「一套可持续出版的视觉系统」，也非常有利于打造 品牌一致性 。
把重复交给 Agent，让人回归设计创造
以上就是本期的全部内容，我们下期见🦩🦩🦩
07 彩蛋One More Things
如果使用 Youmind ，可以直接从技能中心安装：
https://youmind.com/skills/magazine-cover-poster-generator-o1nIlh5DJY7aPp
