Ian Xhs Carousel

---
name: ian-xhs-carousel
description: 把文章、案例拆解、素材、笔记或一个想法排成小红书 3:4 图文（1080×1440 轮播图），用一套产品界面风格：锌灰加一处橙，白页面上垫灰底盘，内容做成带分层阴影的卡片、窗口和对话框，有浅色和深色两版。先消化内容出分镜表，确认后从 20 个母版里排版、用代码画配图，渲染成每页 PNG 和总览图。只要用户提到小红书图文、小红书轮播、做成小红书、出图文、XHS carousel、排几页图、把这篇做成图，或者给了一篇内容想发小红书，都应该用这个 skill，哪怕没说"轮播"或"版式"。不负责小红书的帖子标题、正文和话题标签。
---

# 小红书图文（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. 渲染和自查

```bash
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`：渲染、检查、出总览