generative-ui
Claude 内置生成式 UI 的设计系统和指南——show_widget 工具可在 claude.ai 对话中以内嵌方式渲染交互式 HTML/SVG 小组件。本技能提供完整的 Anthropic“Imagine”设计系统，因此 Claude 无需先调用 read_me 即可生成高质量小组件。当用户要求将数据可视化、创建交互式图表、构建仪表板、渲染示意图、绘制流程图、展示模型图、创建交互式讲解，或生成任何超出纯文本或 Markdown 范畴的视觉内容时，请使用此技能。触发词包括：“展示给我”“可视化”“绘制”“图表”“仪表板”“示意图”“流程图”“小组件”“交互式”“模型图”“说明”“解释 X 的工作原理”（包含视觉内容），以及任何要求生成视觉或交互式输出的请求。当用户希望以视觉方式展示财务数据、创建对比网格，或构建带有滑块、切换开关或实时更新显示的工具时，也会触发此技能。
Generative UI - Claude 生成式 UI 设计系统
技能概述
Generative UI 是 Claude 内置生成式 UI 功能（show_widget 工具）的完整设计系统与开发指南，让 Claude 直接生成可交互的 HTML/SVG 组件并内联渲染在 claude.ai 对话中，无需先调用 read_me 即可产出符合 Anthropic "Imagine" 设计规范的高质量可视化内容。
适用场景
- 数据可视化与图表展示：说一句"show revenue chart"，即可生成基于 Chart.js 的折线图、柱状图，并配上指标卡与参数滑块，适合月度数据汇报、财务数据展示、趋势对比等场景。所有数值会自动取整，避免出现一长串小数。
- 架构图与流程图绘制：描述"X 的架构"或"这个过程有哪几步"，技能会输出内联 SVG 的结构图或流程图，节点统一使用预置配色类，点击节点还能继续追问细节。
- 交互式讲解与方案对比：解释复利、税率、贷款等概念时，生成带滑块、实时重算的交互式讲解器；需要选型时则生成对比网格，把多个方案的差异并列呈现。
核心功能
- 按动词路由视觉类型：技能不按主题、而按用户的实际诉求选择形式——"怎么运作"出说明图，"架构"出结构图，"有哪些步骤"出流程图，"对比这几个选项"出对比网格，"画出日落"出插画。同一个话题问法不同，产出的视觉形态也不同。
- 完整设计规范内置：包含严格的排版（仅 400/500 两档字重、正文 16px/行高 1.7、标题 22/18/16px）、扁平化视觉（禁止渐变、阴影、发光、噪点）、圆角与间距令牌、句式大小写规则，以及全部基于 CSS 变量的配色体系。规范强制要求深色模式可读——HTML 中用 CSS 变量、SVG 中用
c-blue等预置类，都能随明暗模式自动切换。 - 开箱即用的模板与安全约束：提供 Chart.js 图表模板（含
onload脚本加载顺序处理、canvas 尺寸规则、自定义图例）、SVG 图表模板（680px viewBox、坐标安全区、可点击节点）和交互式讲解器模板；同时明确 CDN 白名单（仅cdnjs.cloudflare.com、cdn.jsdelivr.net、unpkg.com、esm.sh可用），并规范了sendPrompt()的用法——筛选、排序、切换、计算在 JS 里完成，只有需要 Claude 思考的下一步才回传对话。
常见问题
generative-ui 技能需要先调用 read_me 吗？
不需要。这个技能已经把 Anthropic "Imagine — Visual Creation Suite" 的设计规则完整提取了出来，包括配色、排版、模板和约束，可以直接产出高质量组件，省掉了 read_me 这一步的设置调用。
生成的组件在深色模式下会正常显示吗？
会，而且这是强制要求。HTML 部分必须使用 CSS 变量（如 --color-text-primary、--color-background-secondary）而非硬编码颜色；SVG 部分使用 c-blue、c-teal 这类预置类，它们自带明暗两套取值。判断标准很简单：假如背景变成近黑色，每个文字元素是否仍然可读。
生成的图表能显示实时数据吗？
不能。组件渲染的是对话中已经给出的静态数据，不会连接数据库或接口拉取实时数据。滑块、开关这类交互是在浏览器端用 JS 重新计算的（例如改利率、改年限后重算曲线），用于探索"如果……会怎样"，而不是读取外部数据源。另外组件内引用的外部资源只能来自 CSP 白名单里的四个 CDN，其他域名会静默加载失败。