iwanalq 豆包可视化回复
概述
本 Skill 用于当用户问题使用可视化回答有收益时，模型能回复安全、真实、可运行、移动端友好的 HTML renderer 可视化内容。核心原则是：只有命中可视化白名单才输出可视化；一旦命中，最终答案必须包含至少 1 个与任务主目标直接对应的 html type="renderer" 模块，并配套简短结论与数据口径说明。
完整规范拆分在 references/ 下的 4 个文件中；生成可视化前必须按场景读取并遵守，不能遗漏触发、格式、设计、稳定性、ECharts、交互、几何、输出示例和移动端规则。
使用场景
使用本 Skill 当用户请求满足任一白名单条件：
- 显式要求可视化：提到可视化、画图、图解、关系图、走势图、趋势图、分布图、占比图、交互演示、动态演示、动画讲解、用图说明、直观一些、清晰看到、方便展示、方便学生理解等。
- 数据图表显著增益：涉及趋势、占比、排名、波动、相关性或多指标对比，如金融价格、空气质量、气候指标、传染病发病、市场份额、财务指标等。
- 教学型动态概念：参数变化会影响曲线、轨迹、分布或空间关系，如运动轨迹、天文地理变化、函数变换、物理过程、算法过程。
- 步骤状态机：算法逐步执行、状态迁移、流程推进，且用户目标是“看过程”。
- 结构化知识展示：人物关系、历史脉络、组织结构、因果链路、流程执行、时间轴、网络扩张、路径演化等，用图能明显提升理解。
- 几何构造与证明题：仅限可视化有显著增益的几何题。
不要使用本 Skill 当：
- 用户只是代码调试、工程实现、文案、总结改写、普通问答检索、静态信息罗列、通用知识解释、闲聊、安全拒答、单纯症状解释或健康建议，且文字或公式已足够清晰。
- 用户要生成、导出、修复 PDF/PPT/Word/Excel/图片/压缩包等附件产物；这类任务必须真实生成文件，不能用 HTML renderer 冒充最终文件。
- 用户请求地图、导航、路线、地点查找、地理轨迹、行政区划展示等地图/地理位置可视化；此类需求绝对禁止地图可视化，回退为纯文本、普通列表、非地图型流程图或取数方案。
核心流程
- 判定是否触发：先按白名单判断；未命中时只用 Markdown 回复，禁止为了美化强行输出 renderer。
- 读取相关规则：命中白名单后至少读取
references/visualization-trigger-design.md；涉及脚本、公式、ECharts、交互、几何或移动端输出时，继续读取对应 reference，按完整规则执行。 - 核验事实与数据：需要实时、权威或历史真实数据时，先用可用的搜索、链接访问或数据工具核验；取不到可靠数据时，不能编造数值，只能输出空态图、示例结构、可复用模板或下一步取数方案，并明确标注“未取得可靠数据，以下为示例结构”。
- 选择表现形式：优先纯 SVG/Canvas/JS；通用数据图表可用 ECharts 或 Chart.js；仅 2D 无法表达关键关系时才用 Three.js 等专用库；地图相关组件和库始终禁止。
- 生成 renderer：用 Markdown 文本与
html type="renderer"代码块交替输出。命中白名单时必须包含：简短文字结论、至少 1 个可运行 renderer、关键数据口径/假设/来源说明。 - 做稳定性自检：检查 HTML 结构、内联样式、脚本 IIFE、try-catch、DOM 存在性、CDN 降级、无解析期错误、无死循环高度写法、无地图组件、无文本重叠或截断。
- 做移动端自检：使用响应式布局，禁止固定列数，交互元素不小于
44×44px，正文不低于 14px，图表轴标签不低于 12px，控件不覆盖核心内容。
输出形式
命中可视化白名单时，进行文本和可视化混合的方式进行详细回复，可视化模块稳定输出：
固定结构（交替输出）：
文字结论或上下文说明（说明数据口径、假设、来源）
<html style="margin:0;padding:0;">
<div style="background-color:transparent;box-sizing:border-box;">
<!-- 真实 UI 容器；禁止 <head>/<body>；禁止 100vh / 固定大高度 -->
</div>
</html>
必要的解读、关键峰谷/拐点、最大最小项、下一步建议等
命中白名单的最终答案应该同时包含
- 文字回复或结论；
- 一个或多个与任务主目标直接对应的 HTML renderer 可视化；
- 关键数据口径、假设或来源说明。
- 其他详细的文本回复内容
单个 HTML 代码块 ≤ 300 行，超出拆为多个模块。
强制规则：
- 必须直接在回复正文中使用
```html type="renderer"代码块输出可视化内容，由消息渲染器就地渲染 - 禁止使用 CanvasCreateFile 创建文件
- 禁止使用任何文件生成工具输出可视化，注意，禁止使用 如CanvasCreateFile / CanvasStrReplace 等文件工具输出可视化
- 所有可视化均以
```html type="renderer"代码块直接嵌入回复正文中，不要在回复额外交付HTML产物
关键格式约束：
- 最外层必须使用
<html style="margin:0;padding:0;">与透明div包裹；禁止<head>、<body>、<TEXT>。 - CSS 全部内联，禁止
<style>标签。 - 单个 HTML 代码块不超过 300 行，超出时拆成多个模块。
- 根容器不得写死
height、min-height:100vh、height:100%或100vh；高度必须由内容自然撑开。 - 外部库优先 jsDelivr，严禁 BootCDN；外部依赖失败时必须显示可读回退内容，不能空白。
- 当代码中存在交互操作逻辑按钮等，确保对应可交互。
安全边界
- 不编造统计数据、财报营收、行业报告、历史事件、病例数、股价、排名或来源，如果需要展示客观数据，可以前置使用搜索工具进行数据准备。
- 不输出地图可视化，不调用 Leaflet、ECharts
geo/map、地图注册数据、行政区划数据、瓦片地图、坐标点或地理轨迹能力。 - 不用 renderer 代替真实附件文件交付。
- 不把示例数据伪装成真实数据；涉及真实世界数据时，明确区分“已核验数据”“估算/示例数据”“无法取得数据”。
- 不写入或回显 token、cookie、AK/SK、JWT、私钥；不绕过登录、权限、审批、审计或风控。
参考文件
references/visualization-trigger-design.md：触发白名单、禁止边界、决策树、设计哲学、设计令牌、图表库分层、配色、核心格式约束和可视化设计原则；命中任何可视化场景时必读。references/visualization-stability-math.md：脚本稳定性、降级策略、防死循环高度约束、动态/静态数学公式规则；输出任何带脚本或公式的 renderer 时必读。references/visualization-echarts-interaction.md：ECharts 专项规范、安全模板、交互式教育演示和几何证明专项；使用 ECharts、交互控件或几何图示时必读。references/visualization-output-mobile.md：输出结构示例和移动端适配规则；生成最终 renderer 前必读，用于核对结构、响应式、触控和性能要求。
参考案例
应触发
- 用户：“把这组季度收入做成趋势图，直观一点。”
- 用户：“用动画讲解冒泡排序每一步怎么交换。”
- 用户：“画一个可拖拽的三角形，辅助证明内角和。”
不应触发
- 用户：“帮我 debug 这段 React 代码为什么报错。”
- 用户：“导出一份 PPT/Excel/PDF 文件给我。”
- 用户：“在地图上标出这些城市的路线。”