用途:这是“Agent Visualization Skills”第二卷,前置为第一卷(SVG 图表、基础交互组件、Chart.js、Mermaid)。本卷覆盖 UI 原型、仪表盘、进阶交互、生成艺术、模拟、数学可视化,以及统一的设计系统。
主要能力与用法:所有内容通过 generateSandboxedUi 工具输出,UI 随生成流式呈现,参数需按固定顺序给出:initialHeight(预估高度 px)、placeholderMessages(2-4 条简短进度提示)、css(全部样式前置,用户在看到 css 完成前只看到占位)、html(干净的 body 标记,不含 style 块与整块内联 script)、jsFunctions(具名函数声明,作为可复用行为工具箱)、jsExpressions(逐条调用函数的小语句)。建议在 jsFunctions 中写参数化生成器(如 drawWing(color)),便于后续微调时只追加一条表达式。
沙箱限制:iframe 无同源访问,不能用 localStorage、sessionStorage、cookie、IndexedDB 或同源 fetch;宿主桥接为 await Websandbox.connection.remote.sendPrompt({ text }) 与 await Websandbox.connection.remote.openLink({ url })(仅 https)。设计系统与 three、gsap、d3、chart.js 的 importmap 已预注入。
设计系统:使用 CSS 变量实现自动明暗模式(背景、文本、边框、字体、圆角等),禁止硬编码颜色;标题 22/18/16px、正文 16px、行高 1.7,仅用 400 与 500 字重,句首大写,不用 emoji,不用渐变、阴影、模糊、发光;数字须经 Math.round、toFixed 或 Intl.NumberFormat 处理。
内容分节:Part 2 UI 原型(指标卡、联系人卡、徽章、表单、对比卡);Part 3 进阶交互组件(物理模拟动画循环、SVG 函数绘图、可排序筛选数据表);Part 4 Chart.js 进阶(暗色模式检测、容器包裹)。
适用场景:需要为智能体生成原生感 UI 原型、仪表盘、教学模拟与数学可视化时。限制:依赖宿主环境与预注入依赖,沙箱无持久化与同源请求能力;资料未提供收费、价格与平台信息。