用途:生成可直接使用的 SVG 与 HTML 信息图,强调品牌一致、可访问,并适配网页、打印与社交媒体嵌入。产出的是视觉素材,不是演示文稿或文档。
主要能力:默认输出 SVG,具备可缩放、可嵌入、可打印、可编辑、可访问和体积小等优势;需要交互、响应式重排或实时数据绑定时改用 HTML。支持四类模板:数据可视化(柱状图、折线图、饼图、指标)、流程(工作流、时间线、管线)、对比(优劣、功能矩阵、前后对比)、单指标卡片(核心数字、KPI)。
使用方式:先读取 brand/VISUAL.md 与 brand/BRAND.md 获取主色、辅色、强调色、字体、Logo 路径与风格;缺失时询问 2-3 个颜色并使用简洁默认风格。随后理解数据、关键洞察、受众与投放位置,再按数据类型选模板。生成时设置合适 viewBox(如博客 1200x800、社交 1080x1080),用 CSS 自定义属性管理颜色,嵌入品牌字体与 Logo,并添加 title、desc 等无障碍信息。交付前检查关键洞察是否突出、对比度是否达 WCAG AA、颜色不超过 5-6 种、文字可读、品牌元素正确、SVG 有效。
设计原则:提高数据墨水比,去除装饰性边框、阴影、3D 效果与无意义纹理;颜色用于编码信息而非装饰,且不能作为唯一区分手段;标题陈述洞察而非图表类型;最多三级文字层级;用留白与网格对齐组织版面。
限制:无数据时需向用户索取,不生成占位假数据;类别过多时建议换格式或分组;品牌文件缺失时使用简洁风格;数据无明确故事时应先确认核心结论。社交分享可建议将 SVG 以 2 倍分辨率渲染为 PNG。