https://github.com/zai-org/ZCode/tree/main/apps/zcode-cli/packages/visualize-plugin/skills/visualize阅读一下skill.md

读完了，这份 SKILL.md 内容比较长，我挑重点说。 这个 skill 叫 visualize，作用是：直接在对话里当场生成可交互的图形化解释和小工具，而不是把文件保存到项目里。它适合回答“这东西是怎么运作的”“如果把参数改成 X 会怎样”“帮我理解一下”“比较或查看一下”这类问题，可以生成图表、地图、流程图、模拟器和 UI 草稿。如果是你要新建网站、页面、组件或修改现有工程，那就不归它管，它仍然按照正常生成文件的流程处理。 关键边界和规则大致是： 产物是一段 HTML 片段，会被写入宿主指定的可视化目录，由对话界面在消息里内联渲染；正文中使用::visualize{"path":"..."} 这样的引用让它出现。用户没有特别要求保存或导出时，就不生成独立网站；如果用户明确说“导出/发布”，才用 scripts/render.py 把它包装成可以独立打开的 HTML。 它要求内容只用于可视化本身，不要在片段里写解释段落；配色和字号走主题变量，并跟随明暗主题切换；CSS 和 JS 尽量少写，外部资源只能使用固定的 CDN 白名单，禁止 fetch 和 WebSocket。 它还规定什么时候不该用它：用户想要普通表格，就返回 Markdown 表格；如果静态结构和带标签的节点图已经足够说明问题，就使用 Mermaid，不生成可视化文件；只有需要动态或可调整参数时，才使用 HTML。 另外，它会和宿主 API 通信，例如通过 window.zcode.sendFollowUpMessage 把“对选中数据的进一步追问”发回对话，通过 setWidgetState 记录交互状态。UI mockup 部分还连带了 tweak.md 里的多方案切换，可以让用户预先探索几版设计。 一句话总结：它把“在聊天里画一个能操作的解释图”规范化成一个带严格输出约定和视觉规范的技能包；这份文件本质上就是给模型读的行为规范，而不是运行代码。