边聊天边出图

痛点：概念表达与工具切换的割裂

在写技术博客或解答问题时，常需绘制流程图、架构图或对比表。传统做法是打开画图软件，调整布局、连线、对齐，再截图贴回对话。这种来回切换不仅打断思路，且产出的多是静态位图，无法在对话中直接交互或修改。当需要展示交互原型或适配深色模式时，手动调整的工作量极大。

核心能力：对话内直接渲染矢量与交互组件

该技能将“想法到图”的链路缩短至对话框内，不生成位图，而是直接输出 矢量 SVG 或 可交互 HTML 组件。

• 结构化输出：支持横向流程图、容器嵌套结构图、对比表和竖向时间线。给出如 三层记忆系统 等明确节点描述，即可生成对应拓扑图。
• 交互与数据：可输出基于 Chart.js 的柱状图或能点能选的 HTML 选择器，适合在对话中直接进行原型演示。
• 自动主题适配：所有模板内置 CSS 变量与 @media 查询，自动跟随界面的 light/dark 主题切换，无需手动改配色。

适用边界与注意点

• 插画风格分流：本技能专注扁平化、治愈系矢量插画。若需胶片质感、真实摄影或特定 IP 形象的位图，应使用 ImageGen 等工具，两者互补而非替代。
• 发布平台限制：输出虽为无水印、可无限缩放的 SVG，但多数图文平台（如微信公众号）正文仅支持 PNG/JPG 等位图格式。直接上传 SVG 会失败，需在对话中要求导出为指定宽度的 PNG 图片。
• 描述精度要求：模糊指令易导致出图翻车。提供具体的层级关系和节点名称，能显著提升出图准确率。