Xhs Cards

---
name: xhs-cards
description: 小红书图文卡片/封面图——3:4 竖版（封面+内页多张）。两条路：HTML 排版截图（字清晰）或 AI 生图（画面有质感），开工前先问用户走哪条
---

# 小红书图文卡片技能

## 适用场景
「做一组小红书图文」「把这篇内容做成卡片图」「出个封面图」。产出 = 一组 1242x1656（3:4 竖版）PNG 卡片 + 一份发布文案。也适用于公众号次条卡片、朋友圈长图（改尺寸即可）。

## 第 0 步：先问一句走哪条路（用户已点名的跳过这步）
卡片图有两条路，成品完全不是一个东西，挑错了整套返工：
- **HTML 排版截图（html_to_image）**：文字清晰、版式配色全听你的、一套卡片风格统一——带大标题的卡片默认推荐这条。
- **AI 生图（generate_image）**：画面有质感有氛围，一张出片；风格随机、改一个字要重生。
  中文大标题能不能写对看渠道——豆包 Seedream 5 实测能写对，老模型和多数海外模型仍会糊。

用户没表态就用 `ask_user` 摆出这两条（各一句话说清代价）再动手。用户点名了要哪条（"用生图 API 做"）就照做，
哪怕要在图上放字也照生——先生一张看效果，糊了再用排版那条补一版，**不许拿「字会糊」当理由偷偷换成另一条**。

## 走 HTML 排版这条路的流程
1. 先出**文案结构**：1 张封面（大标题钩子）+ 3~6 张内页（每张一个要点）+ 1 张结尾（总结/行动号召）。
2. 每张卡片写一个独立 HTML 文件（`card_01.html`、`card_02.html`…），用 write_file 存入工作空间。
3. 一次调用 `html_to_image` 截整套：html_files=["card_01.html","card_02.html",…]（按顺序，最多 30 个），width=1242，height=1656；出图名跟 HTML 走（card_01.png…）。回执里列出没成的那几张，改完单张用 html_file 重截。
4. 有品牌档案时，交付前 `brand_kit_read` check 一遍（文案、HTML、PNG 各查一次），按它列的问题改完再交。
5. 最后交付：全部 PNG + 一段发布文案（标题 20 字内带钩子、正文 100~300 字、5~8 个话题标签）。

## 卡片 HTML 硬约束
- `<style>` 内联全部样式；画布定死：`body{width:1242px;height:1656px;margin:0;overflow:hidden}`。
- 字号要大：正文 ≥ 44px，标题 64~120px——手机上是缩略图，小字等于没写。
- 只用系统字体栈：`-apple-system,"PingFang SC","Microsoft YaHei",sans-serif`（网络字体加载不稳定，截图会缺字）。有品牌档案时先 `brand_kit_read` get，把它返回的本地 @font-face 放在字体栈最前，系统字体垫底；仍然不许引网络字体。
- 一套卡片一个视觉系统：同一主色、同一版式骨架，只换内容；页码放角落（如 02/06）。
- 配色 ≤ 4 色（主色 + 深灰文字 + 浅背景 + 一个点缀色）——有品牌档案就只用档案里的色；间距用 4 的倍数；中文不加字距（letter-spacing 0）。
- 封面卡要「一眼钩子」：一句话大标题 + 一行副题，不要堆内容。
- 可以塞 emoji 当视觉锚点，不要引用外链图片（截图时可能没加载完）；确需配图先 generate_image 生成到工作空间，再用相对路径引用并把 wait_ms 加到 2000。

## 快速自检
截完每张图后用 read_file 确认 PNG 存在且 > 20KB；不确定排版是否溢出时，可对首张卡片再截一次 full_page=true 对比高度是否一致（不一致=内容溢出，删减文字或缩字号）。

## 走 AI 生图这条路（用户点名要生图时）
1. 提示词写具体：主体 + 风格 + 构图 + 光线 + 配色，并写明「竖版 3:4 构图，画面上下留白给标题」。
2. `generate_image` 带上 size（能生效的渠道用 1024x1365 这类 3:4 比例；不支持的就生方图，事后裁）。
3. 中文标题先直接写进提示词试一张（Seedream 5 这类新模型能写对）。真糊了再走两步走：生一张无字底图，
   然后写一个透明背景的 HTML 把大标题叠上去截图，画面和文字两头都要。
4. 交付时如实说明用的是哪条路、字是生的还是叠的。