| name | xhs-card-renderer |
| description | 将 Markdown 正文渲染为小红书风格的高清图片卡片（1080×1440，2x DPI）。当用户需要"出图""渲染卡片""生成小红书图片""把文章变成图片"时触发。覆盖：风格规范、HTML 生成、Playwright 高清导出。 |
小红书图文卡片渲染 Skill
将写好的帖子正文转化为可直接上传小红书的高清 PNG 图片。
About
- 一个 Claude Code / Agent skill，把 Markdown 正文渲染成小红书风格的高清卡片。
- 引擎：Playwright + Chromium，2x DPI，输出 1080×1440 卡片。
- 设计哲学：像书页，不像海报。零装饰、强排版、反 AI 味。
{{AUTHOR}} 是占位符——首次安装后全局替换成你的账号名（见 README「自定义」）。
触发条件
用户说类似：
- "帮我出图 / 渲染成图片"
- "把这篇帖子变成小红书卡片"
- "生成小红书图片"
- "渲染一下"
风格铁律：像书页，不像海报
风格参考：夸克扫描王系列、migeai、Decoder Only 这类「文档感」博主。
核心感受：读者应该觉得"在读一篇文章"，而不是"在看一张设计作品"。
背景
- 奶白色
#f5f0eb，不是纯白
- 零装饰：无边框、无阴影、无圆角、无渐变、无网格、无纹理
- 不加任何 emoji 装饰
字体
font-family: 'PingFang SC', -apple-system, 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: antialiased;
| 元素 | 字号 | 字重 | 颜色 |
|---|
| 正文 | 38px | 400 | #1a1a1a |
| 加粗强调 | 38px | 700 | #1a1a1a |
| 小字/补充 | 34px | 400 | #888 |
| 水印 | 22px | 400 | rgba(0,0,0,0.10) |
行高 1.85，段间距 margin-bottom: 40px，字间距 0.8px。
强调方式（只有两种，不允许发明新的）
1. 加粗（主力，无限制使用）
直接 font-weight: 700，不改颜色、不加背景。
2. 荧光笔划线（点睛，每页最多 1 处）
.hl {
background: linear-gradient(to top, rgba(255,183,77,0.35) 0%, rgba(255,183,77,0.35) 35%, transparent 35%);
font-weight: 700;
}
效果：文字下方 35% 有淡橙色色带，像荧光笔划过。只用于全页最核心的金句。
绝对禁止
- ❌ 彩色边框 / 左边框
- ❌ 背景色块（紫色、蓝色、任何颜色）
- ❌ 圆角卡片 / 阴影
- ❌ 分割线
<hr>
- ❌ 不同颜色的文字
- ❌ Emoji 点缀
- ❌ 任何让人一眼看出"这是 AI 做的"的设计元素
内容密度规范
原则：宁满勿空
| 页面类型 | 建议字数 | 段落数 |
|---|
| 纯文字页 | 180-280 字 | 5-8 段 |
| 图文混合页 | 80-150 字 + 截图 | 截图占 30-50% |
| CTA 结尾页 | 120-200 字 | 可略少 |
如果一页不到 120 字，必须和相邻页合并。绝不允许一页只有 2-3 行。
截图嵌入
- 截图作为
<img> 直接插入正文流
- 无边框、无阴影、无圆角：
width: 100%; margin: 24px 0 32px;
- 截图前后要有文字解释
执行步骤
Step 1：分析正文，规划分页
读取用户提供的正文（Markdown 或纯文本），按以下规则分页：
- 计算每页文字量，确保 180-280 字/页
- 将稀疏页面合并
- 第 1 页带作者头像 + 名字 + 日期
- 最后一页放 CTA
输出分页方案给用户确认：
第 1 页（引入）：xxx - xxx（约 220 字）
第 2 页（结构）：xxx - xxx（约 250 字）
...
共 N 页，是否 OK？
Step 2：生成 HTML 文件
创建 HTML 文件，文件名格式：YYYYMMDD-标题关键词.html（建议放在一个 output/ 或工作目录下）。
生成前必做（防止印错日期）：
- 先跑
date +%Y-%m-%d 取当天真实日期，把模板里第 1 页的 __DATE__ 占位符替换掉。绝不允许直接沿用模板里的旧日期。
- 文件名里的
YYYYMMDD 同样用当天日期。
- 作者名 / 水印用你的账号名替换
{{AUTHOR}}（或安装时已全局替换好）。
HTML 模板结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'PingFang SC', -apple-system, 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: #ddd;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px;
}
.slide {
width: 1080px;
height: 1440px;
background: #f5f0eb;
padding: 80px 88px 64px;
display: flex;
flex-direction: column;
justify-content: flex-start;
: relative;
: hidden;
}
{
: ;
: ;
: ;
: ;
: ;
: ;
}
, { : ; }
{ : ; : ; }
{
: (to top, (,,,) , (,,,) , transparent );
: ;
}
{ : ; : ; }
{ : flex; : center; : ; : ; }
{
: ; : ; : ;
: (, , );
: flex; : center; : center;
: ; : ; : ; : ;
}
{ : ; : ; : ; }
{ : ; : ; : ; }
{
: absolute; : ; : ;
: ; : (,,,);
}
C
{{AUTHOR}}
__DATE__
正文内容...
加粗内容...
@{{AUTHOR}}
正文...
荧光笔高亮金句
@{{AUTHOR}}
Step 3：渲染高清 PNG
用本仓库的渲染脚本导出 2x DPI 图片：
test -f scripts/render-cards.js || echo "⚠️ 找不到渲染脚本，确认路径/工作目录"
node scripts/render-cards.js path/to/YYYYMMDD-xxx.html path/to/output-dir/
输出：slide-01.png ~ slide-0N.png，每张 2160×2880 实际像素。
把本 skill 装到 Claude Code（~/.claude/skills/xhs-card-renderer/）时，记得让 scripts/render-cards.js 跟着一起，或在上面命令里写脚本的绝对路径。
Step 4：展示给用户确认
只展示第 1 张给用户看，等确认后再渲染剩余。
绝对不要一口气渲染所有页面。先出 1 张，用户说 OK 再继续。
质检清单（渲染前必查）
依赖
- Node.js
- Playwright（
npm install + npm run setup 装 Chromium）
- 渲染脚本：
scripts/render-cards.js
