我们开发了一个「杂志封面.skill」

01 前言

经常看我们公众号的小伙伴，应该对星期一研究室 的「信息美学家」栏目不陌生。它已经更新了很多期，而每一期，我们都会给它配一张新的封面。

在以前，我们是在「稿定设计」里手动在模板上修改好，然后再下载下来作为本期封面。

但后来我们觉得说，这个版面可能已经不太符合 AI 时代的审美，于是我们用Codex做了一版新的封面。希望把版面设计成一个非常有国际范 、且高美观度的杂志封面。

6月初，第一版封面发到社群后，很多小伙伴都觉得非常好看。

后来做着做着，我们又琢磨：这套设计能不能延展出更多比例？于是 1:1、3:4、横版竖版......各种尺寸都试了一遍。

再后来，又觉得说好像还可以把不同的强调色 也抽离出来，让同一套版式装下完全不同的情绪。慢慢地，经过很多轮的迭代之后，我们把这些规则都沉淀成了一个可复用的 Skill。在之后的每一期主题里，只要把新文章的相关信息给到这个skill，就能自动产出一张同系列的杂志封面。

随着每周一 在群里推送的期数越来越多，来问「这套封面到底是怎么做出来的」小伙伴也越来越多。于是我们决定：把它开源，让更多人都能用上。

这期内容，就带大家看看这个 Skill 的效果、它能解决的问题、怎么安装使用，以及它背后的核心设计策略～

02 先看效果

让我们直接上图😆

下面这些封面，都是把文章内容丢给「杂志封面.skill」之后生成的：

可以看出，同一套版式语言，用不同的主强调色 ，就是完全不同的情绪，但放在一起依然是一个系列 ，形成了视觉一致性。

03 这个 Skill 解决什么问题

看完效果，你可能会想：这能帮我解决什么问题？

做封面最烦的，一般有两件事：一是每次都要从零设计 ，二是每期版式不统一。

而这个 Skill 要解决的，就是这两个问题。

它会提前把版式和规则定好，你只需要每期换换主题句 和配色氛围，一张新封面就出来了。

（1）适用场景

这些痛点，落到不同群体身上，就成了很具体的场景。包括但不限于：

做固定栏目的主理人 ------公众号、播客、视频专栏，每期都得配一张封面。以前回回从零设计，现在只要换句主题句 、换个强调色，一张新封面就出来了。
长期办线下活动的组织------读书会、沙龙、训练营、行业大会，每场都要一张海报，可版式来来回回就那么几样。把框架定好，每期只换主题句和主色：这期讲增长，上橙色；下期聊 AI，换冷蓝，一张图就出来了。
做系列内容的品牌或团队------一套课程、一个专栏、一整个种草系列，都需要统一视觉。同一套版式延展下去，读者一眼就认出「是同一个系列」，品牌印象也因此顺手解决。
怕中文排版翻车的人 ------不少 AI 生图工具一遇到中文就乱码，而这个 Skill 预置了精确的 HTML/PNG 排版，再复杂的中文文案都可以快速在html里翻译出来。

（2）不同比例

此外，skill让改比例这件事也变得很轻松。这个灵感来自一个平常我们在分发文章时，经常会遇到的一个痛点。一篇文章往往要分发到好几个平台，但每个平台的封面比例都不一样，每回都要重新做图，实在麻烦。

于是同一套设计，可以一键延展出不同比例，直接适配各个平台：

04 如何安装和使用

既然它能解决这些问题，又已经开源，那把它用起来就非常方便了。只需要两步：安装和调用。

安装时，把下面的提示词发给你的 Agent 即可：

perl 复制代码

请从这个 GitHub 地址安装 make-it-pop-poster：https://github.com/MondayLabOS/magazine-visuals/tree/main/skills/make-it-pop-poster

安装完成后，直接输入以下指令即可开始生成封面：

go 复制代码

请使用 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 菜单、标签贴纸	编辑器和阅读器里的常见元素，呼应信息这个主题
出版质感	纸张纹理、细网格、边注	营造编辑部和印刷品的氛围