# ian-xhs-carousel
Adopt this skill: https://proskills.md/skills/other/helloianneo-ian-xhs-carousel-ian-xhs-carousel
Page: https://proskills.md/skills/other/helloianneo-ian-xhs-carousel-ian-xhs-carousel
This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required.
## File: ian-xhs-carousel/SKILL.md
size: 9019
sha: 62ed4b7ae1f0d18ad9c0b5f573b097ff0244e0d9
upstream: https://github.com/helloianneo/ian-xhs-carousel/blob/main/ian-xhs-carousel/SKILL.md
````text
---
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 | 我做了个
记账小工具 | 拍一下小票，自动记好一笔 | 窗口里放首页截图，现成 |
| 02 | 原理 | T04 | 小票是怎么
变成一笔账的 | 先认字，再挑出金额和日期 | 代码画：三步各一张小图 |
| … |
要你给的图：
- 03 页：<具体要什么、为什么只能你给>
```
配图一栏写清楚来源，三种之一：
- **现成**：用户给的截图、照片、代码效果
- **代码画**：示意图、流程、数据图、图标、概念图，自己画（见第 3 步）
- **要你给**：只有用户能提供的，比如真实产品截图、本人照片、他自己的作品。这类不要自己画个假的冒充，单独列出来问
母版怎么选看 `references/layouts.md`。没有合适的就写"扩展"，用一句话说明打算怎么排。主题没说就用浅色。
用户改完或者说可以，再往下走。
### 3. 准备配图
母版只管把东西摆整齐，一组图好不好看，很大程度看配图。所以动手排版前，先把每张图的质量过一遍：
- 截图要清楚：用高分辨率的，裁掉和这页无关的部分（浏览器工具栏、桌面、别的窗口）；做深色版时尽量换成深色截图
- Logo、图标、品牌素材用官方的矢量文件（SVG），不要截一个糊的小图放大用
- 照片、效果图要挑最好看的那张，不是随手拿第一张
- 自己画的图要往精致里画，规则见下面
手上的图不够好，就在分镜表的"要你给的图"里直接说哪张不行、要什么样的。宁可等用户补一张好图，也不要拿一张糊的、随手截的图凑上去。
用户给的图直接用。缺的图用 canvas 或 SVG 代码画，只用灰和那一处橙，几何精确，从真实数据或真实逻辑生成。不用剪贴画、emoji、装饰渐变。动手前读 `references/figures.md`，那里有具体规则，还有可以直接用的 `assets/figure-kit.js`（颜色跟主题走）。
### 4. 排版填内容
在用户的工作目录里建一个文件夹，用这期内容起名，放进：
- `index.html`：从 `assets/starter.html` 开始，每页一个 ``
- `xhs.css`、`xhs.js`：从 `assets/` 复制，**不要改**。这一期特有的样式写在 `index.html` 的 `
栏目名
封面标题
两行最好看
副标题一句话，二十字以内
栏目名
结尾标题
两行最好看
副标题一句话，二十字以内