内容
# 金句卡工厂 · Quote Card Factory
把一句话渲染成小红书高清配图 PNG。一个浏览器可视化编辑器，加一套命令行 / MCP 出图工具，专门解决「写完内容想配图，却不想打开设计软件」的问题。
**7 模板 × 8 主题 × 6 底纹 × 3 水印**，输出 3240×4320 @3x 高清 PNG。
🔗 **在线试用（无需安装）**：https://yifanliu734-coder.github.io/quote-card-factory/
<table>
<tr>
<td><img src="assets/cover-quote.png" width="220"></td>
<td><img src="assets/cover-essay.png" width="220"></td>
<td><img src="assets/cover-kpi.png" width="220"></td>
<td><img src="assets/cover-quotecard.png" width="220"></td>
</tr>
</table>
---
## 三种用法
| 方式 | 适合 | 是否需要安装 |
|------|------|------|
| **浏览器版** `index.html` | 手动调内容、即时预览、点按钮导出 | 不需要，打开就用 |
| **命令行版** `render-card.js` / `render-set.js` | 批量、脚本化、接进自己的内容流水线 | 需要 `npm install` |
| **MCP server** `mcp-server.js` | 让 Claude 等 AI 助手直接出图 | 需要 `npm install` + 注册 |
浏览器版零依赖，三种方式共用同一套渲染逻辑（`index.html` 的样式系统），出图完全一致。
---
## 浏览器版
直接打开 `index.html`（或访问上方在线地址）。左侧选模板 / 比例 / 主题 / 底纹 / 水印，填文字，右侧实时预览，点「导出 PNG」下载。基于 [html2canvas](https://html2canvas.hertzen.com/)，纯前端，不上传任何数据。
## 命令行版
```bash
git clone https://github.com/yifanliu734-coder/quote-card-factory.git
cd quote-card-factory
npm install # 安装 puppeteer（首次会下载 Chromium）
```
**单张出图：**
```bash
node render-card.js '{"tpl":"quote","theme":"light","text":"把「内容」做厚，\n流量自然会来。"}'
```
**批量出一套图集**（`theme/texture/watermark/tag/sign` 整套共享，自动写页码 `i/N`）：
```bash
node render-set.js '{
"theme":"gold","texture":"diagonal","tag":"人效","outDir":"out/set-人效",
"cards":[
{"tpl":"quotecard","watermark":"quote","text":"忙，不等于产出。"},
{"tpl":"kpi","text":"168|每周小时\n40|真正高产\n128|被消耗"},
{"tpl":"essay","title":"怎么算人效","text":"用一个简单的比值：\n\n- 分子是你交付的东西\n- 分母是你搭进去的时间\n\n> 比值上去，人效才上去"},
{"tpl":"quote","watermark":"brand","text":"省下的时间，\n才是你的利润。"}
]
}'
```
也可传入 `.json` 文件路径：`node render-card.js spec.json`。
### spec 字段
| 字段 | 取值 | 说明 |
|------|------|------|
| `tpl` | `quote` `essay` `formula` `kpi` `social` `note` `quotecard` | 模板，默认 `quote` |
| `ratio` | `portrait` `square` | 默认 `portrait`（1080×1440） |
| `theme` | `light` `dark` `blue` `gray` `gold` `morandi` `macaron` `ink` | 默认 `light`，任意模板可套任意主题 |
| `texture` | `none` `grid` `dot` `diagonal` `paper` `gradient` | 背景底纹，默认 `none` |
| `watermark` | `none` `quote` `brand` | 水印，默认 `none`。`quote`=右下大引号，`brand`=右侧竖排品牌字 |
| `author` | 字符串 | 作者名，顶部头部，`social` / `quotecard` 用 |
| `date` | 字符串 | 日期如 `2026/06/30` |
| `tag` | 字符串 | 话题标签，自动加 `#` 渲染成胶囊；传 `""` 去掉 |
| `meta` | 字符串 | 顶部圆点小标，如 `人效 · 01` |
| `page` | 字符串 | 页码如 `1/6`，右上角小字（`render-set` 自动写） |
| `title` | 字符串 | `essay` 大标题 / `note` 居中便签头 |
| `text` | 字符串 | **主文本**，富文本语法见下 |
| `sign` | 字符串 | 署名，默认 `by Ha & 牢哥` |
| `out` | 路径 | 输出路径，默认 `out/card-<时间戳>.png` |
### text 富文本语法
| 写法 | 效果 |
|------|------|
| `\n` | 换行 |
| `「文字」` | 强调色（保留引号） |
| `**文字**` | 加粗 |
| 整段每行 `- ` 开头 | 渲染成要点列表（强调色圆点） |
| 整段以 `> ` 开头 | 渲染成引用块（左侧强调色竖线） |
| `formula` 模板里的 `=` | 等号自动标红 |
| `kpi` 模板每行 `数值\|标签` | 大数字 + 说明 |
## MCP server
让 Claude Code / Claude Desktop 等支持 MCP 的助手直接出图。零额外依赖，走 stdio JSON-RPC。
注册（以 Claude Code 为例，user scope 全局可用）：
```bash
claude mcp add card-factory --scope user -- node /绝对路径/quote-card-factory/mcp-server.js
```
或写进 `claude_desktop_config.json` / 项目 `.mcp.json`：
```json
{
"mcpServers": {
"card-factory": {
"command": "node",
"args": ["/绝对路径/quote-card-factory/mcp-server.js"]
}
}
}
```
暴露两个工具：
- **`render_card`** — 单张出图，参数同上方 spec 字段，必填 `text`
- **`render_set`** — 一套图集，必填 `cards[]`，`theme/texture/watermark/tag/sign` 整套共享 + 自动页码
注册后重启助手即可在对话里直接调用。
---
## 模板一览
| 模板 | 用途 |
|------|------|
| `quote` | 金句大字居中（开头第一刀 / 结尾收尾） |
| `essay` | 标题 + 分段正文，支持列表 / 引用块 / 加粗 / 强调 |
| `formula` | 灰底圆角框，等号自动标红（公式 / 兑换逻辑） |
| `kpi` | 数据卡，大数字 + 标签（量化对比 / 成果展示） |
| `social` | 社交长文卡：作者 + 日期 + 标签 + 整段正文 |
| `note` | 便签卡：齿孔边 + 居中标题 + 虚线分隔 |
| `quotecard` | 暗金引号卡：大引号 + 作者日期 + 摘录金句 |
## 主题一览
`light` 纸白 · `dark` 暖墨 · `blue` 蓝调 · `gray` 便签灰 · `gold` 暗金 · `morandi` 莫兰迪 · `macaron` 马卡龙 · `ink` 墨黄高对比
每个主题统一定义背景 / 文字 / 强调 / 标签 / 边框等一组 CSS 变量，任意模板套任意主题、底纹、水印自由组合。
---
## 技术说明
- **浏览器版**：`index.html` + html2canvas，纯前端，`scale:3` 出高清图
- **命令行 / MCP**：puppeteer headless 加载同一个 `index.html`，注入参数后 `page.screenshot` 截图，输出与浏览器版一致
- **渲染核心**：`render-core.js` 导出 `renderCards(specs[], opts)`，被 `render-card.js`、`render-set.js`、`mcp-server.js` 共用
- 输出固定 1080×1440 @3x → **3240×4320** PNG
## License
[MIT](LICENSE) © 2026 Ha & 牢哥（刘一航）
