xhs-card-rendererlisted
Install: claude install-skill cyrus-tt/xhs-card-renderer
# 小红书图文卡片渲染 Skill
将写好的帖子正文转化为可直接上传小红书的高清 PNG 图片。
> **About**
> - 一个 Claude Code / Agent skill，把 Markdown 正文渲染成小红书风格的高清卡片。
> - 引擎：Playwright + Chromium，2x DPI，输出 1080×1440 卡片。
> - 设计哲学：像书页，不像海报。零装饰、强排版、反 AI 味。
> - `{{AUTHOR}}` 是占位符——首次安装后全局替换成你的账号名（见 README「自定义」）。
---
## 触发条件
用户说类似：
- "帮我出图 / 渲染成图片"
- "把这篇帖子变成小红书卡片"
- "生成小红书图片"
- "渲染一下"
---
## 风格铁律：像书页，不像海报
风格参考：夸克扫描王系列、migeai、Decoder Only 这类「文档感」博主。
核心感受：读者应该觉得"在读一篇文章"，而不是"在看一张设计作品"。
### 背景
- 奶白色 `#f5f0eb`，不是纯白
- **零装饰**：无边框、无阴影、无圆角、无渐变、无网格、无纹理
- 不加任何 emoji 装饰
### 字体
```css
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 处）
```css
.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 字 | 可略少 |