xiaohongshu-card-publish

小红书文案 → 成品配图流水线

本 skill 是这条流水线的唯一事实源：版式模板、变量契约、结构约定、导出规范都在这里（模板文件在 assets/，导出脚本在 scripts/）。仓库根没有独立的 template/ 目录，dist/ 下全是一次性产物，可随时删掉重生成、不手工长期维护。

这个 skill 在做什么

把小红书文案渲染成 HTML 卡片，再截图导出为成品图片。成品尺寸固定 1080×1440 px（3:4 竖版），是小红书配图的硬性规格。

整条结果链：

文案  ──填充──▶  dist/<系列>/<卡片>/index.html   （由 assets/default.html 复制 + 填充而来）
                        │
              pages.json 声明顺序
                        │
            dist/<系列>/index.html （由 assets/app.html 复制而来，iframe 预览整组）
                        │
              playwright 截 .card
                        ▼
            dist/<系列>/snapshot/NN.webp  （2x 超采样 + 无损 WebP 成品）

两条主流程：A 生成预览（文案 → 卡片产物 + 系列预览）和 B 导出成品图（系列 → WebP）。用户说「生成预览/做卡片」走 A，说「导出/截图」走 B；两者常先后发生。

skill 自带的事实源文件

复制与填充时只用这两个模板，它们随 skill 走、就是唯一权威：

• assets/default.html — 纯卡片模板（1080×1440 版式）。其顶部注释块是变量映射的权威说明：每个 {{变量}} 叫什么、是单值/内联 HTML/块结构、有什么字数与格式约束，都以它为准；本文档下面的清单只是摘要，冲突时听模板注释的。
• assets/app.html — 系列预览应用壳：读 pages.json，用 <iframe> 逐张浏览，PPT 式翻页 + iPhone 设备框开关 + 浏览器内 JS 导出（降级备用）。

各「不触发」项的去向：改卡片版式/CSS、新增模板主题 = 改 assets/ 里的模板（这就是改事实源本身，单独发起）；定义文案输入格式/分页规则等数据建模、选型构建工具链 = 本流水线之外的设计决策，单独发起、不在本 skill 内处理；与本仓库无关的通用 HTML/截图任务 = 不适用本 skill。日常生成只复制、不改模板。

不可逾越的护栏

这些约束破一条就会让下游全部失效，写代码前先内化：

• NEVER 改卡片真实尺寸 1080×1440（3:4）。 由 CSS 变量 --card-w / --card-h 固定，是小红书成品规格，改它会破坏所有导出。预览缩放由 app 壳承担，不动真实尺寸。
• NEVER 把预览专用东西混进卡片产物或成品图。 卡片模板与每张卡片产物里 不得出现 .ruler（标尺）、.stage（占位容器）、--scale（预览缩放）；iPhone 设备框只是 app 壳里的纯预览开关。成品图只应是 .card 本身——无背景、无标尺、无设备框。
• NEVER 让导出反向依赖文案结构。 域依赖方向是 content → render → export，单向。导出只接收渲染好的 HTML/DOM，逐张加载卡片 index.html 截 .card，不感知文案有几节、什么字段。
• 画质规范（任何导出方式都必须满足）：2x 超采样 + WebP 无损。 直接 1x 渲染或有损 WebP 会让文字/终端边缘发糊。
• NEVER 把截图产物（.png/.jpg/.webp）或密钥提交进仓库。

卡片与系列的结构约定

填充和组织系列时遵守，省得撑破版面或破坏预览/导出：

• 一张卡片三段结构：顶栏（品牌 + 页码）→ 标题区（大序号 + 标题，可带终端块）→ 正文小节 → 页脚（账号 + 引导）。缺字段时按可缺省规则省略对应元素（KICKER、副标等可缺省；标题、正文、页码不可缺）。
• 颜色与字号集中在模板 :root 的 CSS 变量里（如 --accent、--ink、--card-w），不要在元素上散落硬编码色值/尺寸。
• 页码连续性：PAGE_NO 从 01 递增，PAGE_TOTAL = 系列卡片总数；当前页 ≤ 总页数，总页数 = 卡片序列长度。
• pages.json 结构：{ "series": "<系列展示名>", "pages": [ { "src": "<slug>/index.html", "title": "NN · <标题或命令>" }, … ] }。pages 数组顺序就是浏览顺序和导出顺序。
• 改系列内容 = 只改 pages.json：增删卡片、调顺序，MUST 只编辑 pages.json，MUST NOT 去改 app 壳或卡片 HTML。app 壳只通过 iframe 引用卡片，不内联卡片 HTML。