用途：把用户描述的概念做成静态视觉图，以 HTML/CSS/SVG 作为可迭代的中间层，最终导出 PNG 或 SVG。相比直接生成图片，用户可以先看到 HTML 成品并提出修改（放大标题、换配色、加一列），确认后再导出。
主要能力：按意图选择视觉形式，如流程图/管道图、对比矩阵、层级树、图表或信息图、社交营销卡片、图标徽章、带标注的教学图。设计规则要求单文件自包含（CSS 内联、图形用内联 SVG、无外部依赖）、根容器固定宽高、避免居中一切、紫色渐变、统一圆角等“AI 味”套路，颜色控制在 3-4 个色相加中性色。提供参考文件：references/design-guide.md（设计模式与反模式、配色、字体、布局）、scripts/render_to_image.py（基于 Playwright 的导出脚本）、assets/template.html（含 .canvas 容器与 CSS 变量的基础模板）。
使用方式：概念 → HTML 产物（预览与修改）→ 导出。导出命令：python3 scripts/render_to_image.py <input.html> <output.png|.svg> [--width 1200] [--height 630] [--scale 2] [--selector ".canvas"]。PNG 用无头 Chromium 截图 .canvas 元素，默认 scale 2 输出视网膜质量；SVG 导出自动选择策略：若 .canvas 内是单个根 <svg> 则直接提取为真矢量，否则回退为 PNG 并提示需改用 SVG 原生设计。建议同时交付 HTML（便于后续编辑）和图片（最终成品）。
适用场景：社交媒体图（1200×630）、竖版信息图（800×1200）、演示幻灯片（1920×1080）、方形帖（1080×1080）、图标徽章（256×256 或 512×512）、宽幅图（1600×900）。
限制：需要可用的 Playwright + Chromium；无头导出仅支持 macOS 与 Linux（WSL 可用，原生 Windows 可能需额外配置）；SVG 导出为尽力而为，复杂 HTML/CSS 布局会回退 PNG；视口最大 4096×4096；不支持动画，导出为静态快照；字体访问有限，需使用 Web 安全字体栈。常见错误包括未安装 Playwright、找不到 .canvas 选择器、渲染超时等，资料给出了对应处理建议。