yuelu-xhs

name	yuelu-xhs
description	小红书图文生成器（代码控图版）。用代码画精确线框 → Playwright 截图 → GPT Image 2 上色 → 输出 1080×1440 成品图。当用户说"/yuelu-xhs"、"做小红书"、"做小红书图文"、"把这篇文章转成小红书"时触发。

月鹿小红书图文生成器（yuelu-xhs）

代码控图版：代码画线框 → 截图 → GPT 上色 → 成品图。

布局由代码精确控制，AI 只负责上色加美感——布局不会跑。

何时触发

• /yuelu-xhs → 启动小红书图文制作
• "做小红书" / "做小红书图文" / "做小红书轮播图"
• "把这篇文章转成小红书"
• "把 xxx 做成小红书图文"

工作流

Step 1：确认输入

用户给了文章路径/内容 → 读取文章 用户没给 → 询问内容来源（md 文件路径、飞书文档、直接粘贴文案）

同时确认：

• 页数：默认 5 页（封面 + 3 页内容 + 收尾），可调整 3~7 页
• 配色：默认橙色系（#FF6B35），可换其他锚点色
• 素材图：文章目录下是否有截图/成品图可嵌入线框

Step 2：规划内容结构

从文章中提取核心信息，规划每页内容：

Page 01 / 封面 / 标题+副标题+核心视觉
Page 02 / 痛点或背景 / 为什么需要这个方法
Page 03 / 方法或流程 / 核心步骤拆解
Page 04 / 案例或证据 / 实测结果/对比/截图
Page 05 / 收尾 / 核心结论+开源/引导

展示给用户确认，用户说"行"或调整后继续。

Step 3：生成 HTML 线框

在文章目录下创建工作目录：

<文章目录>/xhs-图文/
├── 线框/          ← HTML + 截图 PNG
│   ├── screen1-cover.html
│   ├── screen1-cover.png
│   ├── screen2-xxx.html
│   ├── screen2-xxx.png
│   └── ...
├── 成品/          ← GPT 上色后的最终图
├── 素材/          ← 引用的截图/产品图（可选）
├── render-wireframes.mjs
└── colorize.mjs

每张 HTML 线框的关键规范：

项	值
页面尺寸	1080 × 1440（body 固定宽高）
背景色	#f8f6f2（米白）
锚点色	默认 #FF6B35（橙色），可配
字体	PingFang SC / Noto Sans SC
标题字号	80-96px，font-weight: 300
正文字号	22-30px
内边距	72px 80px
页脚	底部左右对齐，20px，灰色，页码+署名

线框设计原则：

• 每页只讲一个核心点，信息密度适中
• 用数字编号（01/02/03）建立视觉节奏
• 用卡片（白底+橙色左边框）承载要点
• 用黑色底条做总结/转折
• 封面必须有视觉钩子（对比图/大标题/数据）
• 收尾页可选暗色底或保持米白，但要与整套风格一致
• 嵌入的截图/素材图用 <img src="../素材/xxx.png"> 引用
• 容器用固定 height + overflow: hidden，img 用 max-height: 100% + object-fit: contain

常用布局组件：

1. 标题区：kicker（橙色小标签）+ 大标题（300 weight）+ 副标题
2. 痛点卡片：白底 + 橙色左边框 + 编号 + 标题 + 描述
3. 流程时间轴：圆形编号 + 竖线连接 + 步骤描述 + 标签
4. 案例卡片：左侧缩略图 + 右侧信息（编号/名称/规格/标签）
5. 黑色总结条：全宽黑底 + 白字 + 橙色强调
6. 引言区块：上下细线 + 居中大字 + 橙色关键词
7. Skill 卡片：橙色图标 + 名称 + 描述 + 右侧标签

Step 4：Playwright 截图

用 render-wireframes.mjs 脚本批量截图：

node <工作目录>/render-wireframes.mjs

脚本逻辑：

• viewport 设 1080×1440
• 遍历线框目录下所有 .html
• 每个文件 goto → waitForTimeout(1000) → screenshot clip 1080×1440
• 输出同名 .png 到线框目录

截图后必须验证：用 Chrome DevTools MCP 或直接 Read 图片检查每张线框的布局是否正确。特别注意：

• 嵌入的图片是否正常显示（不是空框/极小）
• 底部内容是否被截断
• 文字是否溢出

Step 5：GPT Image 2 上色

用 colorize.mjs 脚本并行上色：

node <工作目录>/colorize.mjs

脚本逻辑：

• 读取线框目录下所有 .png
• 并行调用 GPT Image 2 的 /v1/images/edits 接口
• API 配置：
  • Key: sk-gD73ZolpGXA1AzEJIp37UR06r6icZH5kjZsEqfxIPMHShw45
  • Endpoint: https://www.hfsyapi.cn/v1/images/edits
  • Model: gpt-image-2
  • Size: 1024x1536
  • Quality: high
• Prompt 要求：保持完全一样的布局和文字位置，加颜色/质感/光影/装饰
• 强调"Keep all Chinese text exactly as shown"
• 输出到成品目录

上色 prompt 模板：

Transform this wireframe into a polished social media card. Keep the exact same layout, text positions, and structure. Add warm [配色描述] background, subtle textures and shadows for depth. Keep all Chinese text exactly as shown. Style: modern, clean, professional [风格描述] with [锚点色] as accent color.

每张可以根据内容微调 prompt（比如暗色页、有截图的页面）。

上色后处理：

• sips -z 1440 1080 resize 到标准尺寸
• 检查成品效果

Step 6：交付

• 弹出 Finder 展示成品目录
• 报告总页数、输出路径
• 用户在 Finder 按空格预览
• 不满意的页面 → 改线框 HTML → 重新截图 → 重新上色单张

Playwright 依赖

脚本需要 playwright，通过软链接使用全局安装：

mkdir -p node_modules
ln -sf /Users/moondeer/.npm-global/lib/node_modules/playwright node_modules/playwright

改图

如果用户对某页不满意：

• 改布局/文字 → 改对应的线框 HTML → 重新截图 → 重新上色
• 只改上色效果 → 调整 prompt → 重新上色单张
• 不要直接改成品 PNG，所有改动从线框驱动

不该做的事

❌ 不要用旧的 md 切页模式——已废弃 ❌ 不要用旧的 JSON+模板卡片模式——已废弃 ❌ 不要跳过线框验证——直接上色前必须确认线框正确 ❌ 不要让一页放太多信息——每页一个核心点 ❌ 不要用 flex:1 撑图片容器——给固定 height ❌ 不要用 width:100% height:100% 在 flex 子元素的 img 上——用 max-height + object-fit

历史踩坑

• img 在 flex 容器里不给固定高度会显示为极小或空框
• GPT Image 2 API 输出 1024×1536，需要 sips resize 到 1080×1440
• API 偶尔超时，脚本需要支持单张重试
• 暗色页（黑底）上色后风格会跟浅色页不一致，尽量全套保持统一色调
• 素材图用相对路径 ../素材/xxx.png，Playwright 能正确解析 file:// 协议下的相对路径