小红书图文（3:4）

把一份内容做成一组 1080×1440 的小红书图。风格已经定好：锌灰中性色加一处橙，白页面上垫一块灰底盘，内容做成一张张带分层阴影的卡片、窗口、对话框，像从一个精致软件里截出来的。有 20 个母版，浅色深色都能出。

母版是起点。内容需要的时候可以出血、错落、放大、增减行，只要底下那套颜色、字号、阴影和卡片样式还守着。

这个 skill 只管图。帖子标题、正文、话题标签不归它管，用户没要就不写。图上的字（每页标题、副标题、卡片里的字）归它管。

流程

一共六步，中间只停一次：分镜表出来以后，等用户确认。

1. 消化内容

先把材料读完，想清楚三件事再动手：

• 这组图要让看的人带走什么，用一句话说出来
• 材料里哪些是硬货（数据、步骤、对比、截图、代码、具体做法），哪些是铺垫，可以丢
• 用户手上已经有哪些图，还缺哪些

2. 分镜表（停下来等确认）

一页只讲一件事，用最少的页数讲完，一般 5 页左右：封面、三四页内容、结尾。图上只放看得见的东西：数字、对比、产品、做法。纯观点、来龙去脉、作者的心路，留给正文，最多留一页观点页（T15）。宁可少一页，让人划完还意犹未尽；长文里每个论点都做成一页，用户会觉得太复杂。

内容里的引子、铺垫，还有那些需要额外配图才讲得清的旁支，直接删，在分镜表下面说一句删了什么。

照这个格式给用户：

这组图想让人带走：<一句话>
主题：浅色 / 深色

| 页 | 这页讲什么 | 母版 | 图上标题 | 副标题 | 配图 |
|---|---|---|---|---|---|
| 01 | 封面 | T02 | 我做了个<br>记账小工具 | 拍一下小票，自动记好一笔 | 窗口里放首页截图，现成 |
| 02 | 原理 | T04 | 小票是怎么<br>变成一笔账的 | 先认字，再挑出金额和日期 | 代码画：三步各一张小图 |
| … |

要你给的图：
- 03 页：<具体要什么、为什么只能你给>

配图一栏写清楚来源，三种之一：

• 现成：用户给的截图、照片、代码效果
• 代码画：示意图、流程、数据图、图标、概念图，自己画（见第 3 步）
• 要你给：只有用户能提供的，比如真实产品截图、本人照片、他自己的作品。这类不要自己画个假的冒充，单独列出来问

母版怎么选看 references/layouts.md。没有合适的就写"扩展"，用一句话说明打算怎么排。主题没说就用浅色。

用户改完或者说可以，再往下走。

3. 准备配图

母版只管把东西摆整齐，一组图好不好看，很大程度看配图。所以动手排版前，先把每张图的质量过一遍：

• 截图要清楚：用高分辨率的，裁掉和这页无关的部分（浏览器工具栏、桌面、别的窗口）；做深色版时尽量换成深色截图
• Logo、图标、品牌素材用官方的矢量文件（SVG），不要截一个糊的小图放大用
• 照片、效果图要挑最好看的那张，不是随手拿第一张
• 自己画的图要往精致里画，规则见下面

手上的图不够好，就在分镜表的"要你给的图"里直接说哪张不行、要什么样的。宁可等用户补一张好图，也不要拿一张糊的、随手截的图凑上去。

用户给的图直接用。缺的图用 canvas 或 SVG 代码画，只用灰和那一处橙，几何精确，从真实数据或真实逻辑生成。不用剪贴画、emoji、装饰渐变。动手前读 references/figures.md，那里有具体规则，还有可以直接用的 assets/figure-kit.js（颜色跟主题走）。

4. 排版填内容

在用户的工作目录里建一个文件夹，用这期内容起名，放进：

• index.html：从 assets/starter.html 开始，每页一个 <section class="slide" data-layout="T04 步骤 · 文档">
• xhs.css、xhs.js：从 assets/ 复制，不要改。这一期特有的样式写在 index.html 的 <style> 里
• figure-kit.js（要画图的话）、配图的 JS、图片素材

母版的 HTML 结构从 assets/templates.html 里抄对应那段，把虚线占位 .ph 换成真内容（图片放进 .fig）。完整规则在 references/design-system.md，排版前读一遍。要点：

• 标题组下面垫底盘（.stage），卡片放在底盘上；观点页不要底盘
• 字号只用字号表里的几档，中文苹方，数字 Inter，代码 Geist Mono
• 橙一页只用一处（栏目标签前的小圆点不算），绿只表示"对、完成"
• 卡片描边 2、圆角 32，卡片里的分区用细线隔开，卡片之间留 24
• 截图放进窗口、手机或图槽，看起来像在真界面里显示
• 深色版：<body data-theme="dark">，或者渲染时加 --theme dark，版式不用动

图上文案：口语、平实，像熟人讲给熟人听。88 号标题每行最多 8 个字，64 号标题每行 9 个字左右，最多两行，用 <br> 手动断行，不留孤字。副标题一行，20 字以内；卡片里的说明 15 字以内。不写先否后肯（"不是…而是…"）、排比、冒号结论、金句结尾、反转。英文能不用就不用。用户有自己的文风规则的话，照那个来。

5. 渲染和自查

python3 <这个 skill 的目录>/scripts/render.py <文件夹>/index.html
python3 <这个 skill 的目录>/scripts/render.py <文件夹>/index.html <文件夹>/深色 --theme dark

脚本把 01.png … NN.png（1080×1440）和 总览.png 输出到同一个文件夹，第二行是深色版。它会顺带检查这些问题，有就打印出来：

• 文字溢出画布，或者贴到了底边
• 字号不在字号表里，字体不对
• 一页超过一处橙
• 还有没换掉的占位

要先装好 playwright（再跑一次 playwright install chromium）和 Pillow。Inter 和 Geist Mono 要联网从 Google Fonts 加载，没加载上时脚本会提示。中文用苹方，不在 Mac 上的话会退回思源黑体（Noto Sans SC），要自己装。

可选的页面属性：

• data-hover=".tile:nth-child(2)"：截图前把鼠标移到这个元素上，用来拍悬停状态
• data-wait="3000"：截图前多等一会儿，让动画跑完（默认 800 毫秒）
• 页内元素加 data-poke：截图前会收到一个 poke 事件，用来触发演示状态
• 元素加 data-art：这是图（卡片效果、截图、代码画的东西），里面的字号和颜色不按版式规则查
• 元素加 data-accent：里面的橙色算同一处，比如截图上的编号和下面列表的编号

脚本报的问题全部改掉，然后自己看一遍每页图，对着 references/checklist.md 过一遍。看得出来的问题自己改，不要留给用户挑。

6. 交付

把 总览.png 和各页发给用户，说一下：

• 每页用了哪个母版，哪页做了扩展，为什么
• 哪些图是代码画的，哪些还是占位，等他给
• 拿不准、想让他看一眼的地方，最多两三个

扩展版式

20 个母版覆盖不了的时候可以自己排，用 xhs.css 里现成的卡片、行、零件拼。新排法只能用同一套颜色、字号、阴影和圆角，data-layout 写成 扩展 · 时间轴对比 这样。同一种扩展用顺了两次以上，就建议用户把它收进版式库（templates.html 和 layouts.md）。

文件

• references/design-system.md：颜色、字号、底盘、卡片的固定规则，以及哪些地方可以放开。排版前读
• references/layouts.md：20 个母版各适合什么、怎么变，以及常见页序。选母版时读
• references/figures.md：代码画图的风格和做法。画图前读
• references/checklist.md：交付前自查
• assets/xhs.css、assets/xhs.js、assets/templates.html：版式库（样式、图标、20 个母版的 HTML）
• assets/版式总览.png、assets/版式总览-深色.png：20 个母版长什么样
• assets/starter.html：新一期的起始页
• assets/figure-kit.js：画图用的小工具
• scripts/render.py：渲染、检查、出总览