svg-card-generator
将结构化内容转换为精美SVG卡片并渲染为高分辨率PNG。适用于知识卡片、信息图、总结海报等场景。支持自定义模板、中文字体、多分辨率输出。
Source facts
- Repository
- Dwsy/svg-card-generator
- Last source activity
- March 13, 2026 at 09:56
- Detected SKILL.md language
- Chinese
- Stars
- 0
- Forks
- 0
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- svg-card-generator
- description
- 将结构化内容转换为精美SVG卡片并渲染为高分辨率PNG。适用于知识卡片、信息图、总结海报等场景。支持自定义模板、中文字体、多分辨率输出。
- emoji
- 🎴
- triggers
- ["制作卡片","SVG卡片","信息图","知识卡片","海报"]
# SVG Card Generator
将Markdown或结构化数据转换为精美SVG卡片，并渲染为高分辨率PNG。
## 功能
- 结构化内容 → SVG卡片 → PNG图片
- 支持中文字体（Noto Sans CJK SC）
- 多分辨率输出（2x/4x/6x）
- 浅色主题，无外部依赖
- 卡片式布局，渐变+阴影
## 使用
```bash
# 基础用法
bun ~/.pi/agent/skills/svg-card-generator/scripts/generate.ts
# 指定输入文件和分辨率
bun scripts/generate.ts --input content.json --scale 4
# 使用自定义模板
bun scripts/generate.ts --template my-template.svg --scale 6
```
## 参数
| 参数 | 说明 | 默认值 |
|------|------|--------|
| `--input, -i` | 输入JSON文件路径 | 交互式输入 |
| `--output, -o` | 输出文件路径 | `./output-{timestamp}.png` |
| `--template, -t` | SVG模板路径 | 使用内置模板 |
| `--scale, -s` | 输出分辨率倍数 | 4 |
| `--format, -f` | 输出格式 (png/svg) | png |
## 内容结构
```json
{
"title": "标题",
"subtitle": "副标题",
"source": "来源",
"sections": [
{
"title": "区块标题",
"type": "list|timeline|points|formula|quote",
"items": [...]
}
],
"footer": "页脚文字"
}
```
## 区块类型
### list - 列表
```json
{
"type": "list",
"items": [
{ "icon": "1", "title": "标题", "desc": "描述" }
]
}
```
### timeline - 时间线
```json
{
"type": "timeline",
"items": [
{ "year": "2026", "text": "事件描述" }
]
}
```
### points - 要点
```json
{
"type": "points",
"items": [
{ "icon": "💡", "title": "标题", "desc": "描述" }
]
}
```
### formula - 公式
```json
{
"type": "formula",
"formula": "作品质量 = 材料 × 品味",
"lines": ["材料来自真实世界", "品味来自长期训练"]
}
```
### quote - 引用
```json
{
"type": "quote",
"text": "引用文字"
}
```
### compare - 对比
```json
{
"type": "compare",
"left": { "label": "错误", "title": "标题", "items": [...] },
"right": { "label": "正确", "title": "标题", "items": [...] }
}
```
## 依赖
```bash
# Node.js依赖
bun add @resvg/resvg-js
# 系统字体（中文）
apt install fonts-noto-cjk
```
## 示例
```bash
# 从JSON生成卡片
echo '{
"title": "AI使用指南",
"subtitle": "把AI接进工作流程",
"sections": [
{
"title": "核心原则",
"type": "list",
"items": [
{ "icon": "1", "title": "可追溯", "desc": "不要黑箱" },
{ "icon": "2", "title": "可操纵", "desc": "控制过程" }
]
}
]
}' | bun scripts/generate.ts --scale 4
```
## 自定义模板
模板使用标准SVG，支持以下占位符：
- `{{title}}` - 标题
- `{{subtitle}}` - 副标题
- `{{source}}` - 来源
- `{{sections}}` - 区块列表
- `{{footer}}` - 页脚
模板需定义以下CSS变量或样式：
- 中文字体回退：`Noto Sans CJK SC, sans-serif`
- 强调色：`#e85d04`
- 背景色：`#faf9f7`
View on GitHub