القائمة
小红书图文生成器（代码控图版）。用代码画精确线框 → Playwright 截图 → GPT Image 2 上色 → 输出 1080×1440 成品图。当用户说"/yuelu-xhs"、"做小红书"、"做小红书图文"、"把这篇文章转成小红书"时触发。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | yuelu-xhs |
| description | 小红书图文生成器（代码控图版）。用代码画精确线框 → Playwright 截图 → GPT Image 2 上色 → 输出 1080×1440 成品图。当用户说"/yuelu-xhs"、"做小红书"、"做小红书图文"、"把这篇文章转成小红书"时触发。 |
代码控图版：代码画线框 → 截图 → GPT 上色 → 成品图。
布局由代码精确控制，AI 只负责上色加美感——布局不会跑。
/yuelu-xhs → 启动小红书图文制作用户给了文章路径/内容 → 读取文章 用户没给 → 询问内容来源（md 文件路径、飞书文档、直接粘贴文案）
同时确认：
从文章中提取核心信息，规划每页内容：
Page 01 / 封面 / 标题+副标题+核心视觉
Page 02 / 痛点或背景 / 为什么需要这个方法
Page 03 / 方法或流程 / 核心步骤拆解
Page 04 / 案例或证据 / 实测结果/对比/截图
Page 05 / 收尾 / 核心结论+开源/引导
展示给用户确认，用户说"行"或调整后继续。
在文章目录下创建工作目录：
<文章目录>/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，灰色，页码+署名 |
线框设计原则：
<img src="../素材/xxx.png"> 引用常用布局组件：
用 render-wireframes.mjs 脚本批量截图：
node <工作目录>/render-wireframes.mjs
脚本逻辑：
截图后必须验证：用 Chrome DevTools MCP 或直接 Read 图片检查每张线框的布局是否正确。特别注意：
用 colorize.mjs 脚本并行上色：
node <工作目录>/colorize.mjs
脚本逻辑：
上色 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（比如暗色页、有截图的页面）。
上色后处理：
脚本需要 playwright，通过软链接使用全局安装：
mkdir -p node_modules
ln -sf /Users/moondeer/.npm-global/lib/node_modules/playwright node_modules/playwright
如果用户对某页不满意：
❌ 不要用旧的 md 切页模式——已废弃 ❌ 不要用旧的 JSON+模板卡片模式——已废弃 ❌ 不要跳过线框验证——直接上色前必须确认线框正确 ❌ 不要让一页放太多信息——每页一个核心点 ❌ 不要用 flex:1 撑图片容器——给固定 height ❌ 不要用 width:100% height:100% 在 flex 子元素的 img 上——用 max-height + object-fit
../素材/xxx.png，Playwright 能正确解析 file:// 协议下的相对路径