svg-card-generator

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）
• 浅色主题，无外部依赖
• 卡片式布局，渐变+阴影

使用

# 基础用法
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

内容结构

{
  "title": "标题",
  "subtitle": "副标题",
  "source": "来源",
  "sections": [
    {
      "title": "区块标题",
      "type": "list|timeline|points|formula|quote",
      "items": [...]
    }
  ],
  "footer": "页脚文字"
}

区块类型

list - 列表

{
  "type": "list",
  "items": [
    { "icon": "1", "title": "标题", "desc": "描述" }
  ]
}

timeline - 时间线

{
  "type": "timeline",
  "items": [
    { "year": "2026", "text": "事件描述" }
  ]
}

points - 要点

{
  "type": "points",
  "items": [
    { "icon": "💡", "title": "标题", "desc": "描述" }
  ]
}

formula - 公式

{
  "type": "formula",
  "formula": "作品质量 = 材料 × 品味",
  "lines": ["材料来自真实世界", "品味来自长期训练"]
}

quote - 引用

{
  "type": "quote",
  "text": "引用文字"
}

compare - 对比

{
  "type": "compare",
  "left": { "label": "错误", "title": "标题", "items": [...] },
  "right": { "label": "正确", "title": "标题", "items": [...] }
}

依赖

# Node.js依赖
bun add @resvg/resvg-js

# 系统字体（中文）
apt install fonts-noto-cjk

示例

# 从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