本技能围绕 Claude 内置的 show_widget 生成式 UI 工具展开，提供完整的设计系统，用于在 claude.ai 对话中内联渲染交互式 HTML/SVG 组件。
用途与定位 该技能把 Anthropic 的“Imagine — Visual Creation Suite”设计规则整理成可执行的指南、模板与模式，使用户无需先执行 read_me 初始化调用，即可直接产出高质量组件。
主要能力
- 视觉类型选择：根据用户的动词而非名词判断应输出哪种视觉形式，如说明性图示、结构图、流程图、交互式讲解、对比网格、Chart.js 图表、数据记录卡片、艺术插画等，并对应指定 SVG 或 HTML 格式。
- 组件构建规范：规定严格的结构顺序为 <style> → HTML 内容 → <script>，并给出无缝、扁平、紧凑的设计原则；要求全部说明文字写在工具调用之外的正文中，组件内只放视觉元素。
- 核心约束：禁止注释、小于 11px 字号、表情符号、渐变/阴影/模糊/发光、外层深色或彩色背景、固定定位、标签页/轮播/隐藏区块、嵌套滚动等；排版仅用 400 与 500 两种字重，标题字号 h1=22px、h2=18px、h3=16px，正文 16px、行高 1.7；统一使用句式大小写；不使用 DOCTYPE/html/head/body；圆角使用 CSS 变量。
- CDN 白名单：外部资源仅允许 cdnjs.cloudflare.com、cdn.jsdelivr.net、unpkg.com、esm.sh，其余来源会被 CSP 静默拦截。
- 配色与暗色模式：提供背景、文本、边框、字体与布局相关的 CSS 变量，并按要求同时适配明暗两种模式；HTML 中须使用 CSS 变量，SVG 中使用预置颜色类。
- 交互能力：提供全局函数 sendPrompt(text)，可将消息以用户输入的形式发送至聊天，用于引导 Claude 进一步思考；筛选、排序、切换与计算则应在 JS 中处理。
- show_widget 调用：该工具内置于 claude.ai，无需激活；传入 title（snake_case 标识）与 widget_code（HTML 或 SVG 代码），SVG 以 <svg 开头会自动识别并包装。
- 模板：给出 Chart.js 图表模板（含 onload 回调、响应式设置、自定义图例、数字格式化等规则）、SVG 流程图模板（680px 宽 viewBox、预置类、可点击节点）以及交互式讲解模板（滑块、实时计算、内联图表、sendPrompt 追问）。
- 收尾建议：组件渲染后，简要说明其展示内容、交互方式与一条关键洞察，保持简洁。
使用方式 在 claude.ai 对话中借助 show_widget 工具，按本技能的结构与约束编写组件代码，并根据需要加载 CDN 资源、绑定交互逻辑。
适用场景 需要以可视化方式解释概念、展示流程与架构、对比选项、呈现数据图表、制作可交互计算器或信息卡片的对话场景。
限制 本技能依赖 claude.ai 内置的 show_widget 工具；外部资源受 CDN 白名单约束；设计上禁止较多视觉效果与布局形式。关于收费、价格与具体平台支持范围，资料未提供。