用途：为 Claude 内置的 show_widget 工具提供设计系统、模板与模式，使模型能直接在 claude.ai 对话中渲染高质量的内联交互式 HTML/SVG 组件，无需先读取设置文档。
主要能力：按动词选择视觉类型，例如“如何运作”对应 SVG 示意图、“架构”对应 SVG 结构图、“步骤”对应 SVG 流程图、“解释复利”对应 HTML 交互说明、“比较选项”对应对比网格、“收入图表”对应 Chart.js 图表、“名片”对应数据记录、“画日落”对应 SVG 插画。组件结构须严格按 style → HTML → script 顺序（因输出逐 token 流式生成）。
设计规则：扁平风格，无渐变、阴影、模糊、发光等；外层容器背景必须透明，由宿主提供；字体仅用 400 与 500 两个字重，正文 16px/1.7，标题 500；全部句子式大小写；无 HTML/SVG 注释；字号不低于 11px；不用 emoji；不用固定定位、标签页、轮播或嵌套滚动；圆角用 CSS 变量。颜色须同时适配明暗模式，HTML 用 CSS 变量，SVG 用内置颜色类。显示数字须取整。
外部资源仅限 cdnjs.cloudflare.com、cdn.jsdelivr.net、unpkg.com、esm.sh，其他来源会被 CSP 静默拦截。提供 CSS 变量清单（背景、文本、边框、字体、圆角）。
用法：show_widget 内置于 claude.ai，无需激活，传入 {"title":"snake_case_widget_name","widget_code":"..."}；SVG 以 <svg 开头会自动识别。提供 Chart.js 模板（onload 回调、canvas 高度只设在包裹层、responsive: true、禁用默认图例、负数格式 -$5M）、SVG 流程图模板（viewBox 固定 680 宽、安全区 x=40 到 640、text 必须带 class、连线 fill="none"、节点可点击调用 sendPrompt()）与交互说明模板（滑块实时计算，用 sendPrompt() 引导追问）。另有 references 参考文件可查设计令牌、SVG 坐标与 Chart.js 配置。
适用场景：在 claude.ai 对话中生成图表、流程图、结构图、示意图、对比网格、数据卡片与交互式说明。
限制：show_widget 仅在 claude.ai 可用；外部资源受 CSP 白名单限制；资料未提供离线使用、其他平台支持或收费信息。