图像与视频

小红书封面skill_视频配套资料包

仓库地址：https://github.com/captain nook/nook skills/tree/main/nook cover

2026-06-18飞书同步约 24 分钟

来自视频：为什么AI出图总把字画歪？我把封面拆成两层来解决

文档插图

小红书封面 skill：详细操作手册

配套开源 skill： nook cover 仓库地址：https://github.com/captain nook/nook skills/tree/main/nook cover 适用版本：v0.2 alpha

这份资料包能让你做什么

把"一句主题 → 一张可发布的小红书封面"这条流水线，从原理到操作，全部讲清。拿到手后能自己跑、自己改、自己出新图。

需要准备的东西：

一台装了 Node.js（≥18）的电脑，Windows / Mac / Linux 都行
一个 AI 编程助手：Codex Desktop、Claude Code、Cursor、ZCode 任选
（可选）至少一个出图工具的 API key
不用会 Photoshop，不用会写代码

一、三句话先理解原理

大模型的中文是"画"出来的，不是"写"出来的。中文笔画多、字形复杂，让模型既画图又写字，几乎一定会翻车。
这套 skill 把封面拆成两层：底层交给出图模型画氛围、人物、产品；上层用 HTML 渲染控制字号、位置、描边、阴影、倾斜。各司其职。
小红书爆款封面的核心是构图，不是颜色。4 套视觉系统 = 4 种构图机制，每套的人物占比、标题位置、装饰密度都不同。

二、四套视觉系统（核心）

怎么选：先看你要做的内容属于哪类，再选对应的视觉系统。

2.1 人脸冲击封面

适合：副业、成长、情绪钩子、职业转型、口播类、需要"被看到人"的内容。

硬规则：

真人半身或三分之二身（从腰到头，带上躯干和手），不能是头像
人物占画面 40%-55%，偏右或偏下
标题占画面 35%-50%，是第一眼视觉
标题三层效果：红/黑高对比字色 + 厚白描边 + 黑色硬阴影
标题分 2-3 行，局部重叠、轻微倾斜
人物必须有动作或表情（张嘴、指、拿物），不是安静生活照
标题绝对不能压住眼睛、鼻子、嘴巴
装饰元素（星星、箭头、便签、胶带、贴纸）必须围绕标题，不能只撒在角落

禁用：底部三等分按钮、菜单式菜谱卡、App 首页式布局、证件照居中。

内部别名：人物冲击贴纸风（项目代码里的命名，看到它指同一套）。

减脂 / 食谱 / 健身餐专题补充：菜品必须贴纸化、前景化、有白描边和投影；不要做成菜谱 App 的截图；底部不要绿色三按钮。

2.2 手账拼贴种草

适合：探店、书单、护肤、生活方式、旅行、收藏清单。

硬规则：

真实撕纸毛边、纸张纹理、胶带、便签、手账材料感
撕纸边缘至少 8 个不规则凹凸点，不能是规整矩形
至少 2 层纸片，角度分散
至少 2 条胶带，压住纸片边角
标题写在撕纸上，但必须可读
至少 3 个手绘元素：箭头、圈画、虚线短线
背景要有生活细节（咖啡、桌面、产品、店招），不是空背景

禁用：一张大白纸承载全部标题、所有元素平行居中、PPT 卡片感。

内部别名：撕纸手账种草风。

2.3 产品截图主视觉

适合：AI 工具、教程、效率工作流、软件方法、内容生产流程。

硬规则：

产品 / UI / 工具截图占比大（占画面 35%-55%）
人物在右或右下，占 30%-45%，只做引导或指向
标题必须大、贴在截图边缘或背后，不放在顶部小标题
标题压过截图细节，不能被 UI 抢走
允许霓虹、斜切框、警示贴、箭头、霓虹字效
避免假 UI 小字堆画面

禁用：SaaS 官网 hero、假 UI 密密麻麻的"截图"、规整软件框。

内部别名：科技教程爆款风。

2.4 近大远小对比封面

适合：健身、自律、逆袭、前后变化、避坑、方法论对比。

硬规则：

黑橙高对比、斜向动势
前景必须有一张近大远小的对比卡或道具（带透视）
中景人物推出前景卡
标题大而斜，斜压进画面，带硬阴影
可用 before/after、粗箭头、刷痕、贴纸便签
人物完整可识别，不能只剩头或局部身体

禁用：没有透视卡的普通对比列表、人物被卡遮挡。

内部别名：黑橙冲击对比风。

三、出图工具路由

整套 skill 默认提供三套出图原子工具（外加 Codex Desktop 内置 image2.0），分工和优先级如下。

3.1 优先级

Codex Desktop 内置 image2.0
> 用户自带素材（人物照、产品图、截图）
> nook-image2-gpt（图生图、参考图保持、生产级收尾）
> nook-qwen-image（中文海报、中文视觉、中文文字参与画面）
> nook-zimage（快速草图、低成本背景探索、亚洲人物）
> HTML / Playwright 文字排版证明（兜底）

注意：Codex Desktop 内置 image2.0 不是所有 AI 助手都有。ZCode / Claude Code / Cursor / 普通命令行默认没有。

3.2 三套原子工具的分工

3.3 API key 放哪

nook-cover 不接管任何 API key。三套原子工具的 key 放在各自目录的 .env 中（脚本引导输入）。nook-cover 自己的 .env 只记录三个原子工具的路径，是路由表，不存 key。

绝对不要把 key 写进文档、截图、提交到 Git。

3.4 路径判断

在 Codex Desktop 里：默认走内置 image2.0，效果最好。
在 ZCode / Claude Code / Cursor / 命令行：必须先 node scripts/setup-provider.cjs 配置至少一个外部原子工具，或者让用户提供素材。
如果都没有：只能跑 HTML / Playwright 文字排版证明。这不是完整小红书爆款封面，缺少真实主视觉，但能验证中文、层级和构图。

四、部署（Windows / Mac / Linux 通用）

4.1 准备环境

Node.js ≥ 18（去 nodejs.org 装 LTS）
Git
一个 AI 编程助手（Codex Desktop、Claude Code、Cursor、ZCode 任选）

4.2 把仓库交给 AI 助手

git clone https://github.com/captain-nook/nook_skills.git
cd nook_skills/nook-cover

然后对 AI 助手说：

请阅读 SKILL.md 和 references/v04-2-workflow.md，
帮我用 nook-cover 跑一张小红书封面。
主题：。
请按四套视觉系统选一套。

助手会自动装依赖、装 Playwright、跑通流程。你坐在旁边看。

4.3 自己跑命令（不想用 AI 助手也行）

npm install
npx playwright install chromium
npx playwright install chromium-headless-shell

跑一张样张：

node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/face-diet-brief.json output/v05-face-diet

输出在 output/v05-face-diet/，里面有 index.html 和 cover.png。

4.4 Windows 上常见坑

npm 缓存权限报错：

npm install --cache ./.npm-cache

Playwright 浏览器下载太慢：让 AI 助手指定本机 Chrome / Chromium。

PowerShell：

$env:PLAYWRIGHT_CHROMIUM_EXECUTABLE="C:\Path\To\chrome.exe"
node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/face-diet-brief.json output/test

报 chromium_headless_shell 不存在：

npx playwright install chromium-headless-shell

4.5 配置出图工具

node scripts/setup-provider.cjs

脚本会寻找同级目录的 nook-zimage、nook-qwen-image、nook-image2-gpt，把路径写入 nook-cover/.env。接着会让你到每个原子工具目录里运行 node setup.js，由各工具引导你填入自己的 key（魔搭的 MS_API_KEY，GPT 中转的 IMAGE_API_KEY 等）。

4.6 跑通验证

跑完四套模板，每套出一张：

node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/face-diet-brief.json output/v05-face-diet
node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/scrapbook-cafe-brief.json output/v05-scrapbook-cafe
node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/product-ai-brief.json output/v05-product-ai
node scripts/render-xhs-v05-contract.cjs examples/xhs-v05/compare-fitness-brief.json output/v05-compare-fitness

四张 PNG 出来，部署就算跑通。

五、怎么用：一句主题到一张 PNG

5.1 给一句主题

例如"副业"、"AI 绘画"、"工具测评"。

5.2 系统自动生成 brief

brief 是一份结构化的设计需求单，包括：

标题、副标题、标签
视觉风格（暖色大字 / 科技冷色等）
是否有人物
推荐构图（4 套视觉系统选 1）
目标平台

brief 定稿后，同一批次的文案锁定，出图和渲染过程中逐字一致，不能边出边改。

5.3 自动选构图

系统按 brief 调性选布局：

副业 / 成长 / 情绪 → 人脸冲击封面
探店 / 书单 / 护肤 → 手账拼贴种草
AI 工具 / 教程 → 产品截图主视觉
健身 / 逆袭 / 避坑 → 近大远小对比封面

5.4 调对应工具跑底图

Codex Desktop 用户：默认走内置 image2.0。

其他环境：走配置好的 nook-image2-gpt / nook-qwen-image / nook-zimage。

5.5 HTML 叠文字 + Playwright 截图

HTML 控制中文、字号、描边、阴影、倾斜、撕纸、贴纸、箭头、便签。

Playwright 在后台打开 HTML、截图、输出 PNG。

5.6 QA 检查

每张图必须过：

中文标题是否正确
标题是不是第一视觉
人物是否完整（半身以上）
标题有没有遮眼、鼻、嘴
四套风格是否真不同（不是换颜色）
缩略图下能不能读出标题
画面有没有有效信息密度（不是死留白）

5.7 必要时用 HTML 复刻标题层

如果出图模型中文写错了：

保留图作视觉候选
走 HTML / 后处理重建标题层
底图不重出，只重渲染文字

9 张样张（看完心里有数）

演示用的 9 张成品样张，分组如下。

人脸冲击封面（4 张）：

普通人转型路径：暖橙撕纸背景，真人半身指向超大标题，强表情
30 岁别再内耗：红黄高饱和撕纸 + 真人张嘴惊讶，标题三层效果
副业系列：下班后 2 小时 / 普通人也能跑通的副业思路
减脂 30 天：撕纸 + 菜品贴纸前景，30 天挑战徽章

手账拼贴种草（2 张）：

女生必备书单：3 层撕纸承载书名，手绘箭头圈画
敏感肌别乱买：纸片 + 胶带 + 撕纸毛边的种草感

产品截图主视觉（2 张）：

AI 工作流别再乱搭：深色科技背景，截图框占主视觉
剪辑课别乱买：斜切框 + 警示贴 + 大标题

近大远小对比封面（1 张）：

早睡 7 天变化 / 普通人自律逆袭：黑橙高对比，前景对比卡带透视

样张里的人物、菜品、店招都是真实主视觉（由 image2.0 生成），HTML 只负责标题、贴纸、箭头、撕纸的语言。

六、失败处理和返工指令

出图后改图，不要重新描述画面，按编号或按点重跑。

6.1 中文写错了

底图满意，标题压到脸了。请只重渲染文字层：
- 标题上移到人物上方
- 人脸安全区不动
- 底图不重出

6.2 标题不够大

这张不错，但标题不够大。请在同一套布局下重新渲染：
- 标题区域加大到 45%
- 人物保持不变
- 其他不动

6.3 撕纸太规整

撕纸太规整了，一眼假。请重做这张：
- 撕纸边缘至少 8 个不规则凹凸点
- 加毛边纹理、贴纸投影、纸片角度分散
- 其他不动

6.4 出图模型给了"PPT 卡片感"

不要只改颜色。重新选视觉系统，重新写提示词。

6.5 没有图像通道

只能跑 HTML / Playwright 文字排版证明。明确告诉用户：这不是完整爆款封面，缺少真人 / 产品 / 场景主视觉，但中文、层级、构图可以验证。

6.6 人物变头像（只剩头）

重新生成，提示词必须写明：

upper body from waist to head,
visible torso and hands,
not a headshot

七、关键避坑（封面的硬性判断标准）

这一节是封面的硬性判断标准，必须遵守。

撕纸：边缘必须有不规则凹凸、毛边、颗粒、阴影，规整矩形一眼假。
人脸：标题、贴纸、便签绝对不能压眼、鼻、嘴。安全区是默认约束。
标题大小：必须占画面 35%-50%，是缩略图下第一眼看到的元素。顶部小标题不算。
风格差异：四套视觉系统靠构图机制区分（人物位置、标题位置、装饰密度、对比卡），不是靠换颜色。
真实感：减脂 / 食谱不要做成菜谱 App；工具不要做成 SaaS hero；探店不要做成空背景 + 大字。
信息密度：死留白 = 失败。画面 70% 以上必须被强视觉占满（人物、大字、撕纸、贴纸）。
主视觉来源：HTML 路线做不到真人、产品、场景。必须用 image2.0、外部原子工具、用户素材三者之一。

附录：

附录 A：brief 模板

{"platform": "xiaohongshu","canvas": { "width": 1080, "height": 1440, "ratio": "3:4" },"topic": "","visual_system": "","layout_contract": "","title": "","title_lines": ["", "", ""],"badges": ["", ""],"foreground_stickers": ["", ""],"eyebrow": "","main_visual_image": "","html_primitives": {"title": "title-sticker","papers": ["torn-paper:title-back", "torn-paper:badge"],"decor": ["arrow:title", "star:title-left", "star:title-right", "tape:paper-corner"],"foreground": ["", ""]},"composition_contract": {"title_box": { "x": 0.05, "y": 0.07, "w": 0.68, "h": 0.44 },"person_box": { "x": 0.50, "y": 0.23, "w": 0.38, "h": 0.56 },"foreground_box": { "x": 0.05, "y": 0.62, "w": 0.62, "h": 0.24 }},"qa_contract": ["title_area >= 35%","not app menu","not quiet lifestyle photo","has sticker title, torn paper, arrows, stars and foreground stickers"]}

附录 B：四套视觉系统的完整 brief 示例

B1 人脸冲击封面（减脂）

{"platform": "xiaohongshu","canvas": { "width": 1080, "height": 1440, "ratio": "3:4" },"topic": "减脂30天·家常菜谱","visual_system": "人脸冲击封面","layout_contract": "face-impact-v05","title": "减脂30天 家常菜谱 不挨饿","title_lines": ["减脂30天", "家常菜谱", "不挨饿"],"badges": ["30天挑战", "吃饱也能瘦"],"foreground_stickers": ["鸡胸沙拉", "西兰花豆腐", "糙米蛋饭"],"eyebrow": "封面避坑指南","qa_contract": ["title_area >= 35%","person upper body, not headshot","no text over eyes, nose, mouth","has sticker title, torn paper, arrows, stars"]}

B2 手账拼贴种草（咖啡店）

{"platform": "xiaohongshu","canvas": { "width": 1080, "height": 1440, "ratio": "3:4" },"topic": "咖啡厅去了20次","visual_system": "手账拼贴种草","layout_contract": "scrapbook-collage-v05","title": "这家咖啡店 我去了20次","title_lines": ["这家咖啡店", "我去了20次"],"eyebrow": "宝藏小店","small_notes": ["dirty必点", "角落窗位最佳", "营业到凌晨"],"qa_contract": ["at least 3 torn-paper layers","at least 2 tape strips","real fibrous torn edges","hand-drawn arrows and circles"]}

B3 产品截图主视觉（AI 工具）

{"platform": "xiaohongshu","canvas": { "width": 1080, "height": 1440, "ratio": "3:4" },"topic": "AI工作流别再乱搭","visual_system": "产品截图主视觉","layout_contract": "product-hero-v05","title": "AI工作流 别再乱搭","title_lines": ["AI工作流", "别再乱搭"],"eyebrow": "一条链路搞定","secondary_labels": ["step 1", "step 2", "step 3"],"qa_contract": ["product/screenshot area >= 35%","title attached to product edge","no fake UI text clutter","neon or angular panel design"]}

B4 近大远小对比封面（自律逆袭）

{"platform": "xiaohongshu","canvas": { "width": 1080, "height": 1440, "ratio": "3:4" },"topic": "普通人自律逆袭","visual_system": "近大远小对比封面","layout_contract": "perspective-compare-v05","title": "普通人 自律逆袭","title_lines": ["普通人", "自律逆袭"],"compare_labels": ["以前", "现在"],"eyebrow": "坚持 90 天","qa_contract": ["foreground compare card with perspective","diagonal dynamic composition","title hard shadow + diagonal","person complete, not obscured"]}

附录 C：返工指令清单（粘贴即用）

# 标题大小
这张不错，但标题不够大。请在同一套布局下重新渲染：
- 标题区域加大到 45%
- 人物保持不变
- 其他不动

# 撕纸毛边
撕纸太规整了，一眼假。请重做这张：
- 撕纸边缘至少 8 个不规则凹凸点
- 加毛边纹理、贴纸投影、纸片角度分散
- 其他不动

# 重渲染文字层
底图满意，标题压到脸了。请只重渲染文字层：
- 标题上移到人物上方
- 人脸安全区不动
- 底图不重出

# 换视觉系统
这张风格不对。请从 4 套视觉系统重选 1 套：
- 人脸冲击封面（副业 / 成长 / 情绪）
- 手账拼贴种草（探店 / 书单 / 护肤）
- 产品截图主视觉（AI 工具 / 教程）
- 近大远小对比封面（健身 / 逆袭 / 避坑）
明确说明选哪套、为什么。

# 人物变头像
人物只剩头了。请重出：
- upper body from waist to head
- visible torso and hands
- not a headshot
- 标题和装饰不能压眼鼻嘴

附录 D：提示词骨架（人脸冲击 + 减脂）

当你直接用 image2.0 或外部原子工具出图时，可以按这个骨架改：

Use case: 小红书爆款封面
Asset type: vertical 3:4 mobile cover
Style: 人脸冲击封面（内部别名：人物冲击贴纸风）
Topic: 
Title (verbatim): "\n\n"
Small labels: "", ""

Scene: bright high-saturation Xiaohongshu cover, warm coral and matcha green accents, visible stickers and torn paper layers
Subject: Asian  creator, , upper body from waist to head with torso and hands visible, expressive surprised / excited / confident face, actively pointing or holding a foreground object, not a headshot
Composition: person on right or center-right occupying 40%-50%; huge headline on left and upper center occupying 40%-50%; foreground sticker object close to camera; no dead empty space
Typography: huge bold simplified Chinese, red / white / hot pink, thick black outline, hard sticker shadow, slight perspective tilt, title larger than the face
Design details: irregular torn-paper stickers, star stickers, hand-drawn arrows, highlight strokes, speech bubbles, energetic Xiaohongshu style
Constraints: exact readable Chinese text; no text covering eyes / nose / mouth; no watermark; no QR code; no English text; no neat bottom menu buttons; not a quiet lifestyle photo

其他三套（手账拼贴 / 产品截图 / 近大远小对比）的提示词骨架结构一致，按各自硬规则改写 scene、composition、design details 即可。

附录 E：项目文件结构（知道东西在哪）

nook-cover/
├── SKILL.md              # AI 助手入口
├── README.md             # 快速开始
├── package.json          # 依赖（Playwright）
├── .env.example          # 路由表模板（不存 key）
├── references/           # 关键文档
│   ├── v04-2-workflow.md            # 当前主流程
│   ├── v05-html-visual-contracts.md # 4 套 HTML 视觉合同
│   ├── v05-template-map.md          # 4 套模板入口
│   ├── v04-2-prompt-recipes.md      # 4 套提示词模板
│   ├── image2-direct-cover-contract.md
│   ├── html-sketch-to-image2-workflow.md
│   ├── provider-routing.md          # 3 套原子工具分工
│   ├── deployment.md                # 部署说明
│   └── usage-for-agents.md          # AI 助手执行流程
├── examples/             # brief 示例
│   ├── xhs-v05/                     # 4 套视觉系统各 1 个完整 brief
│   ├── N1-prompt-pack/              # 提示词合集封面
│   ├── F1-ai-sidehustle/            # 副业（人脸冲击）
│   ├── F2-thirty-lessons/           # 30 堂课（手账）
│   ├── F3-meal-prep/                # 备餐（手账）
│   ├── M1-ai-tools/                 # AI 工具（产品主视觉）
│   ├── M2-sidehustle/               # 副业（人脸）
│   ├── M3-muscle-gain/              # 增肌（对比）
│   ├── N2-booklist/                 # 书单（手账）
│   └── N3-ai-top10/                 # AI Top10（产品主视觉）
├── scripts/              # 渲染器
│   ├── render-xhs-cover.cjs         # 通用封面渲染
│   ├── render-xhs-v05-contract.cjs  # V05 4 套合同渲染
│   ├── render-xhs-photo-overlay.cjs # 照片叠加
│   ├── render-xhs-poster-system.cjs # 旧版 4 色系统
│   ├── setup-provider.cjs           # 交互式配置
│   └── export-*.py                  # 导出与联系表
├── assets/               # 效果预览图
└── output/               # 你的输出（不进 Git）

结尾

工具不是 Photoshop，模板不是提示词合集。这套 skill 的核心是：先选视觉系统，再选出图工具，最后做 QA。中文不准就 HTML 复刻标题层，构图不对就重新选视觉系统。

跑通、试改、试错，比想清楚再动手重要。

文档插图