一键在 Manus 中运行任何 Skill

开始使用

doubao-visualization

星标2

分支0

更新时间2026年6月24日 11:52

当用户的需求依赖可视化展示、画图、图解、趋势图、关系图、交互/动态演示、动画讲解，或数据趋势占比排名、多指标对比、算法状态机、参数变化教学、结构化知识、几何构造证明需要图示时使用；地图、附件生成、纯文字足够场景不使用。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

IWanalq

IWanalq/doubao-office-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

豆包可视化回复

概述

本 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 文件给我。”
用户：“在地图上标出这些城市的路线。”

同仓库更多 Skills

同仓库

browser-task

IWanalq/doubao-office-skills

浏览器自动化任务处理技能。仅在以下情况使用：1) 其他 skill/工具（搜索、API、数据接口等）都无法满足需求，需要通过真实浏览器 GUI 兜底执行；2) 任务必须在具体网站完成登录 / 授权 / 账号内动作（点赞 / 收藏 / 评论 / 发布 / 加购）；3) 命中白名单网站（淘宝/天猫、微博、小红书）的站内检索 / 互动 / 发布需求。当用户仅需要信息检索、文本生成、代码或数据处理时，不要使用本 skill。

2026-06-242

doubao-app-builder

IWanalq/doubao-office-skills

统一处理网页应用的生成、编辑，以及围绕已生成产物的问答。既负责把自然语言需求端到端转成可运行、可预览、可交付的网页应用产物，也负责在用户追问产物时基于真实产物作答。当用户要生成网站、H5、网页应用、管理后台、数据看板时使用。当用户要编辑已有网页应用、做功能新增、页面调整或 Bug 修复时使用。当用户提供 PRD、文档、截图或素材包并要求产出可预览网页应用时使用。当用户针对已生成的网页应用，要求总结或解读网页内容、查看或分析源码、解释或排查运行报错、查询访问量/用户量/数据报表/发布状态等运营信息时同样使用。

2026-06-242

doubao-creative-drama

IWanalq/doubao-office-skills

当用户提出短剧、动画、微电影、剧情视频、AI视频、电影、影视化、动态漫、宣传片、预告片等制作需求，或包含“做个短剧”、“弄个动画片”、“写个剧本”、“画个分镜”、“搞个人设/场景资产”、“出个关键帧”、“写图生视频提示词/Seedance提示词”等表达时调用。适用于需要按“规划-剧本-分镜-资产-关键帧-视频生成”推进完整视频生产流程的任何场景。

2026-06-242

doubao-creative-video

IWanalq/doubao-office-skills

当用户需要通用视频生成、视频创作、视频提示词规划或文生/图生视频时使用，包括创意视频、产品广告、商品广告、UGC口播/带货/信息流视频、marketing/TVC风格广告、企业宣传片、商务视频、品牌形象片、产品功能介绍、带旁白视频，以及带 ref/参考素材的视频生成。禁止用于短剧创作、剧情脚本、分集剧情、角色扮演故事或影视叙事创作；此类需求应调用 doubao-creative-drama。仅当用户明确要求把短剧/剧情素材改造成普通视频、商业广告、UGC 或企业宣传视频时，才使用本 skill。

2026-06-242

doubao-daily-stock

IWanalq/doubao-office-skills

用于单一上市股票或二级市场公司的当日/近期个股日报，解释涨跌和异动原因，梳理行情、资金流、新闻公告、板块联动、技术面、预期与风险。适用于“某股今天为什么涨跌”“做个日报”“近期表现”“资金面和消息面”等问题；默认先输出结构完整、观点深入的对话版分析，并询问是否继续生成自包含投行风格 HTML 完整报告；不用于长期商业模式/护城河、财报业绩、行业/板块、多股主题、一级市场或大盘事件解读。

2026-06-242

doubao-finance-sector

IWanalq/doubao-office-skills

对【板块/概念/主题/题材】的短期市场热度做专业、可证伪的深度分析。分两阶段交付：先在对话框输出中文分析，用户回复『生成HTML』后再渲染可交互的热度仪表盘。触发场景：当用户问某板块/概念/题材现在热不热、能不能追、为什么走强或降温、持续性如何、成交主要活跃在哪些方向、内部谁强谁弱时触发。不适用场景：行业长期趋势、单股行情、公司基本面/财报、大盘/宏观等话题，不触发本skill。

2026-06-242

name	doubao-visualization
description	当用户的需求依赖可视化展示、画图、图解、趋势图、关系图、交互/动态演示、动画讲解，或数据趋势占比排名、多指标对比、算法状态机、参数变化教学、结构化知识、几何构造证明需要图示时使用；地图、附件生成、纯文字足够场景不使用。

豆包可视化回复

概述

使用场景

使用本 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 文件给我。”
用户：“在地图上标出这些城市的路线。”