svg-card-generator

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