SuperAPI AI 工具集

show-me-how

前端与建站

查看项目

更新于 10-16 07:27

技能介绍

用途:Show Me How 用于在聊天中直接生成可交互的 HTML 小组件,例如图表、仪表盘和数据可视化讲解。它适合需要把数据或流程转成可操作可视界面的场景。

主要能力:输出以 ```widget 代码块包裹的 HTML,作为沙箱 iframe 内联渲染,而非保存成文件。生成前必须选定一种美学(如 editorial、blueprint、paper-ink、mono-terminal、data-dense 等)与一套字体搭配,通过 data-aesthetic 和 data-font 属性指定,由前端解析颜色与字体。样式必须使用 --widget-* CSS 变量,禁止硬编码颜色,从而自动支持深色/浅色模式。图表库默认用 Chart.js 4,复杂可视化可选 D3、ECharts、Three.js、Mermaid、GSAP、p5.js、anime.js,并从 CDN 加载。

使用方式:先决定美学与字体,再按模板写自包含 HTML(内联 CSS/JS,无 React、无打包器),响应式布局且无固定像素宽度。小组件总大小须低于 5 MB,超出时先用 embed-assets 技能压缩并 base64 编码。图表、动画、缩放控件等均按文档指引实现,Mermaid 图必须带缩放控制。

适用场景:报告与叙述、架构与系统图、教程与讲解、命令行演示、仪表盘与数据表、通用可视化等。

限制:禁止硬编码颜色与字体链接,禁止使用 Inter、Roboto、Arial;输出不得保存为文件;须避免横向滚动与文本溢出;动画需尊重 prefers-reduced-motion。资料未提供具体收费、价格、平台支持范围与效果数据。