SHILIU · 创作资源
小红书3:4图文轮播排版 · 创作技能
把文章、案例或想法排成1080×1440小红书轮播图：先消化内容出分镜表并等用户确认，再从20个母版选版式、用代码画配图、渲染每页PNG与总览图并自查。只管图，不写帖子标题正文和话题标签。
这个技能解决什么问题
把文章、案例或想法排成1080×1440小红书轮播图：先消化内容出分镜表并等用户确认，再从20个母版选版式、用代码画配图、渲染每页PNG与总览图并自查。只管图，不写帖子标题正文和话题标签。
适用任务
将一份已有内容（文章、案例拆解、笔记或想法）转成一组小红书3:4图文轮播，含分镜规划、版式排版、配图准备、渲染与交付自查。
需要的输入
用户提供的内容原文或素材；已有截图、照片、Logo等图片（可选）；主题偏好（浅色/深色，未说明默认浅色）；用户自有文风规则（可选）。运行环境需Python3、playwright及chromium、Pillow；中文需苹方或Noto Sans SC，Inter与Geist Mono需联网从Google Fonts加载。
交付内容
分镜表（页序、母版编号、图上标题、副标题、配图来源）；工作目录内index.html与复制的xhs.css、xhs.js、figure-kit.js及配图；渲染出的01.png…NN.png（1080×1440）与总览.png，深色版另存目录；交付说明含母版使用、扩展理由、代码画图与待补图清单。
任务示例
把这篇讲“小票自动记账工具”的文章做成小红书图文，浅色主题，我只有一张首页截图，其他图你看着办。
输出示例
示意：先返回分镜表（封面T02、原理T04、步骤T06、结尾T18等，标注配图来源为现成/代码画/要你给），用户确认后生成index.html并渲染出01.png至05.png与总览.png，交付时说明各页母版、代码画图页与仍需用户提供的截图。实际页数与内容以真实材料为准。
来源与使用
作者 Ian · helloianneo；许可 MIT。已核对来源与包结构，未据此宣称完成运行实测。
机器可读详情 · 读取 SKILL.md · 下载完整技能包
技能说明全文
--- 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`：渲染、检查、出总览
技能是任务材料，不会自动授予账户权限、付费授权或其他系统权限。请让 Agent 按说明核对依赖，再在授权范围内使用。