generative-ui
Claude 内置生成式 UI 的设计系统与指南——show_widget 工具：它会在 claude.ai 对话中以行内形式渲染交互式 HTML/SVG 小组件。该技能提供完整的 Anthropic「Imagine」设计系统，使 Claude 能够产出高质量小组件，而无需先调用 read_me。凡用户提出要求以可视化数据、创建交互式图表、构建仪表盘、渲染图表、绘制流程图、制作模型稿、创建交互式讲解，或生成任何超出纯文本或 Markdown 的可视化内容时，都应使用该技能。触发条件包括：“show me（给我看）”“visualize（可视化）”“draw（绘制）”“chart（图表）”“dashboard（仪表盘）”“diagram（示意图）”“flowchart（流程图）”“widget（小组件）”“interactive（交互式）”“mockup（模型稿）”“illustrate（举例说明/插图）”“explain how X works（解释 X 如何工作）”（且包含可视化），或任何请求视觉/交互输出的表述。当用户希望以可视化方式展示金融数据、创建对比网格，或构建带滑块、开关或实时更新显示的工具时，也同样触发。
分类
金融分析安装
热度:24
下载并解压到你的 skills 目录
复制命令，发送给 OpenClaw 自动安装：
下载并安装这个技能 https://openskills.cc/api/download?slug=himself65-skills-generative-ui&locale=zh&source=copy
generative-ui - Claude 交互式可视化组件技能
技能概述
generative-ui 提供 Claude 内置
show_widget 工具的完整设计系统指南，用于在 claude.ai 对话中直接渲染交互式 HTML/SVG 小部件。适用场景
1. 数据可视化与图表展示
当你需要在对话中展示财务数据、统计指标或趋势分析时，可以生成动态折线图、柱状图或对比表格。用户可以通过滑块、按钮等控件实时调整参数，图表会即时更新。
2. 系统架构与流程说明
解释复杂系统的工作原理时，可以生成交互式的 SVG 流程图或架构图。每个节点都可以点击，触发进一步的说明或追问，让用户按自己的节奏探索。
3. 原型与交互式演示
产品经理或设计师可以快速生成带滑块、开关的交互式原型，演示概念或收集反馈。无需编写代码，直接在对话中完成可操作的界面。
核心功能
1. show_widget 工具集成
直接调用 Claude 内置的
show_widget 工具，传入 HTML 或 SVG 代码片段，即可在对话中渲染为可交互的小部件。支持 HTML（用于图表、表单）和 SVG（用于流程图、示意图）两种格式。2. Anthropic Imagine 设计系统
提供完整的 Anthropic "Imagine" 设计规则，包括 CSS 变量、色彩方案、组件模板和最佳实践。确保生成的小部件与 claude.ai 界面风格统一，自动适配深色模式。
3. Chart.js 与 SVG 模板库
内置 Chart.js 图表模板和 SVG 流程图模板，包含响应式布局、事件处理和
sendPrompt() 交互函数。可直接套用或自定义，大幅降低开发成本。常见问题
什么是 show_widget 工具？
show_widget 是 Claude 在 claude.ai 平台上的内置工具，允许 AI 在对话中直接渲染 HTML/SVG 内容。用户可以与这些小部件交互（如拖动滑块、点击按钮），获得即时的视觉反馈。
如何创建交互式图表？
使用 Chart.js CDN 库结合 HTML 控件。首先用
<style> 定义样式，然后创建包含滑块或按钮的 HTML 界面，最后通过 <script> 加载 Chart.js 并绑定事件监听器。模板中提供了完整的示例代码。generative UI 有哪些使用限制？
position: fixed、渐变、阴影等效果display: none 切换