菜单
将 Markdown 正文渲染为小红书风格的高清图片卡片（1080×1440，2x DPI）。当用户需要"出图""渲染卡片""生成小红书图片""把文章变成图片"时触发。覆盖：风格规范、HTML 生成、Playwright 高清导出。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/cyrus-tt/xhs-card-renderer --skill xhs-card-renderer命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | xhs-card-renderer |
| description | 将 Markdown 正文渲染为小红书风格的高清图片卡片（1080×1440，2x DPI）。当用户需要"出图""渲染卡片""生成小红书图片""把文章变成图片"时触发。覆盖：风格规范、HTML 生成、Playwright 高清导出。 |
将写好的帖子正文转化为可直接上传小红书的高清 PNG 图片。
About
- 一个 Claude Code / Agent skill，把 Markdown 正文渲染成小红书风格的高清卡片。
- 引擎：Playwright + Chromium，2x DPI，输出 1080×1440 卡片。
- 设计哲学：像书页，不像海报。零装饰、强排版、反 AI 味。
{{AUTHOR}}是占位符——首次安装后全局替换成你的账号名（见 README「自定义」）。
用户说类似：
风格参考：夸克扫描王系列、migeai、Decoder Only 这类「文档感」博主。 核心感受：读者应该觉得"在读一篇文章"，而不是"在看一张设计作品"。
#f5f0eb，不是纯白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>| 页面类型 | 建议字数 | 段落数 |
|---|---|---|
| 纯文字页 | 180-280 字 | 5-8 段 |
| 图文混合页 | 80-150 字 + 截图 | 截图占 30-50% |
| CTA 结尾页 | 120-200 字 | 可略少 |
如果一页不到 120 字，必须和相邻页合并。绝不允许一页只有 2-3 行。
<img> 直接插入正文流width: 100%; margin: 24px 0 32px;读取用户提供的正文（Markdown 或纯文本），按以下规则分页：
输出分页方案给用户确认：
第 1 页（引入）：xxx - xxx（约 220 字）
第 2 页（结构）：xxx - xxx（约 250 字）
...
共 N 页，是否 OK？
创建 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}}
用本仓库的渲染脚本导出 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跟着一起，或在上面命令里写脚本的绝对路径。
只展示第 1 张给用户看，等确认后再渲染剩余。
绝对不要一口气渲染所有页面。先出 1 张，用户说 OK 再继续。
#f5f0eb，无任何装饰rgba(0,0,0,0.10)__DATE__ 或旧日期）{{AUTHOR}}npm install + npm run setup 装 Chromium）scripts/render-cards.js