القائمة
将 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.
عرض 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
استنادا إلى تصنيف SOC المهني