Content
# Tool List
Render a sentence into a high-definition picture PNG. A browser-based visual editor, plus a command-line / MCP image generation tool, designed to solve the problem of wanting to add images to content without opening design software.
**7 Templates × 8 Themes × 6 Textures × 3 Watermarks**, output 3240×4320 @3x high-definition PNG.
🔗 **Try Online (no installation required)**: 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>
---
## Three Usage Methods
| Method | Suitable For | Installation Required |
|------|------|------|
| **Browser Version** `index.html` | Manual content adjustment, real-time preview, button export | No, open and use |
| **Command-line Version** `render-card.js` / `render-set.js` | Batch, scripted, integrate with own content pipeline | Yes, `npm install` |
| **MCP Server** `mcp-server.js` | Let AI assistants like Claude directly generate images | Yes, `npm install` + registration |
The browser version has zero dependencies, and all three methods share the same rendering logic (`index.html` style system), producing identical images.
---
## Browser Version
Open `index.html` (or visit the online address above). Select template, ratio, theme, texture, and watermark on the left, fill in text, and preview in real-time on the right. Click "Export PNG" to download. Based on [html2canvas](https://html2canvas.hertzen.com/), pure front-end, no data uploaded.
## Command-line Version
```bash
git clone https://github.com/yifanliu734-coder/quote-card-factory.git
cd quote-card-factory
npm install # Install puppeteer (Chromium will be downloaded on first run)
```
**Single Image Generation:**
```bash
node render-card.js '{"tpl":"quote","theme":"light","text":"Make content thicker,\n流量自然会来。"}'
```
**Batch Generate a Set of Images** (`theme/texture/watermark/tag/sign` shared, automatic page numbering `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才是你的利润。"}
]
}'
```
You can also pass a `.json` file path: `node render-card.js spec.json`.
### spec Fields
| Field | Value | Description |
|------|------|------|
| `tpl` | `quote` `essay` `formula` `kpi` `social` `note` `quotecard` | Template, default `quote` |
| `ratio` | `portrait` `square` | Default `portrait` (1080×1440) |
| `theme` | `light` `dark` `blue` `gray` `gold` `morandi` `macaron` `ink` | Default `light`, any template can use any theme |
| `texture` | `none` `grid` `dot` `diagonal` `paper` `gradient` | Background texture, default `none` |
| `watermark` | `none` `quote` `brand` | Watermark, default `none`. `quote`=large quote at bottom right, `brand`=vertical brand text at right |
| `author` | string | Author name, top header, used for `social` / `quotecard` |
| `date` | string | Date like `2026/06/30` |
| `tag` | string | Topic tag, automatically rendered as a capsule with `#`; pass `""` to remove |
| `meta` | string | Top small label, like `人效 · 01` |
| `page` | string | Page number like `1/6`, top right small text (automatically written by `render-set`) |
| `title` | string | `essay` large title / `note` center title |
| `text` | string | **Main text**, rich text syntax see below |
| `sign` | string | Signature, default `by Ha & 牢哥` |
| `out` | path | Output path, default `out/card-<timestamp>.png` |
### text Rich Text Syntax
| Syntax | Effect |
|------|------|
| `\n` | Line break |
| `「text」` | Emphasis color (retain quotes) |
| `**text**` | Bold |
| Whole paragraph starts with `- ` | Rendered as a list with emphasis color dots |
| Whole paragraph starts with `> ` | Rendered as a quote block with emphasis color vertical line |
| `formula` template `=` | Equals sign automatically marked red |
| `kpi` template each line `value|label` | Large number + description |
## MCP Server
Let Claude Code / Claude Desktop and other MCP-supported assistants directly generate images. Zero additional dependencies, using stdio JSON-RPC.
Register (take Claude Code as an example, user scope globally available):
```bash
claude mcp add card-factory --scope user -- node /absolute/path/quote-card-factory/mcp-server.js
```
Or write into `claude_desktop_config.json` / project `.mcp.json`:
```json
{
"mcpServers": {
"card-factory": {
"command": "node",
"args": ["/absolute/path/quote-card-factory/mcp-server.js"]
}
}
}
```
Exposes two tools:
- **`render_card`** — Single image generation, parameters same as spec fields above, required `text`
- **`render_set`** — A set of images, required `cards[]`, `theme/texture/watermark/tag/sign` shared + automatic page numbering
After registration, restart the assistant to directly call in the conversation.
---
## Template Overview
| Template | Purpose |
|------|------|
| `quote` | Large centered quote (first cut / ending) |
| `essay` | Title + paragraph text, supports list / quote block / bold / emphasis |
| `formula` | Gray rounded rectangle, equals sign automatically marked red (formula / conversion logic) |
| `kpi` | Data card, large number + label (quantitative comparison / achievement display) |
| `social` | Social long text card: author + date + tag + whole paragraph text |
| `note` | Sticky note card: perforated edge + center title + dashed separator |
| `quotecard` | Dark gold quote card: large quote + author date + excerpt quote |
## Theme Overview
`light` Paper white · `dark` Warm ink · `blue` Blue tone · `gray` Sticky note gray · `gold` Dark gold · `morandi` Morandi · `macaron` Macaron · `ink` Ink yellow high contrast
Each theme uniformly defines background / text / emphasis / label / border and other CSS variables, any template can use any theme, texture, watermark free combination.
---
## Technical Notes
- **Browser Version**: `index.html` + html2canvas, pure front-end, `scale:3` high-definition image output
- **Command-line / MCP**: puppeteer headless loads the same `index.html`, injects parameters then `page.screenshot` screenshot, output consistent with browser version
- **Rendering Core**: `render-core.js` exports `renderCards(specs[], opts)`, shared by `render-card.js`, `render-set.js`, `mcp-server.js`
- Output fixed 1080×1440 @3x → **3240×4320** PNG
## License
[MIT](LICENSE) © 2026 Ha & 牢哥（刘一航）
