Claude生成式UI技能指南：使用show_widget工具创建交互式HTML/SVG小组件

generative-ui by himself65/finance-skills

101 周安装量

489 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/himself65/finance-skills --skill generative-ui

AI/机器学习数据可视化开发

🇨🇳中文介绍

生成式 UI 技能

此技能包含 Claude 内置 show_widget 工具的完整设计系统——该生成式 UI 功能可在 claude.ai 对话中内联渲染交互式 HTML/SVG 小组件。以下指南是实际的 Anthropic "Imagine — Visual Creation Suite" 设计规则，提取出来以便您无需 read_me 设置调用即可直接生成高质量小组件。

工作原理：在 claude.ai 上，Claude 可以访问 show_widget 工具，该工具可在对话中内联渲染原始 HTML/SVG 片段。此技能提供了良好的设计系统、模板和模式来使用它。

步骤 1：选择正确的视觉类型

根据动词而非名词进行路由。同一主题，根据所问内容采用不同的视觉呈现：

用户说	类型	格式
"X 如何工作"	说明性图表	SVG
"X 架构"	结构图	SVG
"步骤是什么"	流程图	SVG
"解释复利"

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

867,400 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

283,600 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

228,700 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

157,400 周安装

无  或 /* 注释 */（浪费令牌，破坏流式传输）
字体大小不小于 11px
无表情符号——使用 CSS 形状或 SVG 路径
无渐变、投影、模糊、发光或霓虹效果
外部容器无深色/彩色背景（仅透明——宿主提供背景）
排版：仅使用两种字重：400 常规，500 中等。切勿使用 600 或 700。标题：h1=22px，h2=18px，h3=16px——全部字重 500。正文文本=16px，字重 400，行高 1.7
始终使用句子大小写。切勿使用标题大小写，切勿全部大写
无句中加粗——实体名称使用 代码样式 而非加粗
无 <!DOCTYPE>、<html>、<head> 或 <body>——仅内容片段
无 position: fixed——使用正常流布局
流式传输期间无标签页、轮播或 display: none 部分
无嵌套滚动——自动适应高度
圆角：卡片使用 border-radius: var(--border-radius-lg)，元素使用 var(--border-radius-md)
单边边框（border-left，border-top）无圆角
对所有显示的数字进行四舍五入——使用 Math.round()、.toFixed(n) 或 Intl.NumberFormat

背景：--color-background-primary（白色），-secondary（表面），-tertiary（页面背景），-info，-danger，-success，-warning 文本：--color-text-primary（黑色），-secondary（柔和），-tertiary（提示），-info，-danger，-success，-warning 边框：--color-border-tertiary（0.15α，默认），-secondary（0.3α，悬停），-primary（0.4α），语义 -info/-danger/-success/-warning 排版：--font-sans，--font-serif，--font-mono 布局：--border-radius-md（8px），--border-radius-lg（12px），--border-radius-xl（16px）

参数	类型	必需	描述
`title`	字符串	是	小组件的蛇形命名标识符
`widget_code`	字符串	是	HTML 或 SVG 代码。对于 SVG：以 `<svg>` 开头。对于 HTML：内容片段

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;">
  <div style="background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem;">
    <div style="font-size: 13px; color: var(--color-text-secondary);">标签</div>
    <div style="font-size: 24px; font-weight: 500;" id="stat1">—</div>
  </div>
</div>

<div style="position: relative; width: 100%; height: 300px; margin-top: 1rem;">
  <canvas id="myChart"></canvas>
</div>

<div style="display: flex; align-items: center; gap: 12px; margin-top: 1rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">参数</label>
  <input type="range" min="0" max="100" value="50" id="param" step="1" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 32px;" id="param-out">50</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  const slider = document.getElementById('param');
  const out = document.getElementById('param-out');
  let chart = null;

  function update() {
    const val = parseFloat(slider.value);
    out.textContent = val;
    document.getElementById('stat1').textContent = val.toFixed(1);

    const labels = [], data = [];
    for (let x = 0; x <= 100; x++) {
      labels.push(x);
      data.push(x * val / 100);
    }

    if (chart) chart.destroy();
    chart = new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: { labels, datasets: [{ data, borderColor: '#7F77DD', borderWidth: 2, pointRadius: 0, fill: false }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { grid: { display: false } } }
      }
    });
  }

  slider.addEventListener('input', update);
  update();
}
if (window.Chart) initChart();
</script>

Canvas 无法解析 CSS 变量——使用硬编码的十六进制值
仅在包装器 div 上设置高度，绝不在 canvas 本身上设置
始终设置 responsive: true, maintainAspectRatio: false
始终禁用默认图例，构建自定义 HTML 图例
数字格式：-$5M 而非 $-5M（负号在货币符号之前）
在 CDN 脚本标签上使用 onload="initChart()" + if (window.Chart) initChart(); 作为后备

<svg width="100%" viewBox="0 0 680 H">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- 单行节点（44px 高） -->
  <g class="node c-blue" onclick="sendPrompt('告诉我更多关于这个的信息')">
    <rect x="250" y="40" width="180" height="44" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">步骤一</text>
  </g>

  <!-- 连接箭头 -->
  <line x1="340" y1="84" x2="340" y2="120" class="arr" marker-end="url(#arrow)"/>

  <!-- 两行节点（56px 高） -->
  <g class="node c-teal" onclick="sendPrompt('解释此步骤')">
    <rect x="230" y="120" width="220" height="56" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="140" text-anchor="middle" dominant-baseline="central">步骤二</text>
    <text class="ts" x="340" y="158" text-anchor="middle" dominant-baseline="central">处理输入</text>
  </g>
</svg>

ViewBox 始终为 680px 宽（viewBox="0 0 680 H"）。设置 H 以适应内容 + 40px 内边距
安全区域：x=40 到 x=640，y=40 到 y=(H-40)
预构建类：t（14px），ts（12px 次要），th（14px 中等 500），box，node，arr，c-{color}
每个 <text> 元素必须携带一个类（t，ts 或 th）
在框内垂直居中文本使用 dominant-baseline="central"
连接路径需要 fill="none"（SVG 默认为 fill: black）
描边宽度：边框和边缘为 0.5px
使所有节点可点击：onclick="sendPrompt('...')"

<div style="display: flex; align-items: center; gap: 12px; margin: 0 0 1.5rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">年数</label>
  <input type="range" min="1" max="40" value="20" id="years" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 24px;" id="years-out">20</span>
</div>

<div style="display: flex; align-items: baseline; gap: 8px; margin: 0 0 1.5rem;">
  <span style="font-size: 14px; color: var(--color-text-secondary);">$1,000 →</span>
  <span style="font-size: 24px; font-weight: 500;" id="result">$3,870</span>
</div>

<div style="margin: 2rem 0; position: relative; height: 240px;">
  <canvas id="chart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  // 滑块逻辑，图表渲染，sendPrompt() 用于后续问题
}
if (window.Chart) initChart();
</script>

references/design_system.md —— 完整的调色板（9 个渐变 × 7 个色阶）、CSS 变量、UI 组件模式、指标卡片、布局规则
references/svg_and_diagrams.md —— SVG viewBox 设置、字体校准、预构建类、带有示例的流程图/结构图/说明性图表模式
references/chart_js.md —— Chart.js 配置、脚本加载顺序、canvas 尺寸、图例模式、仪表板布局

🇺🇸English

Generative UI Skill

This skill contains the complete design system for Claude's built-in show_widget tool — the generative UI feature that renders interactive HTML/SVG widgets inline in claude.ai conversations. The guidelines below are the actual Anthropic "Imagine — Visual Creation Suite" design rules, extracted so you can produce high-quality widgets directly without needing the read_me setup call.

How it works : On claude.ai, Claude has access to the show_widget tool which renders raw HTML/SVG fragments inline in the conversation. This skill provides the design system, templates, and patterns to use it well.

Step 1: Pick the Right Visual Type

Route on the verb , not the noun. Same subject, different visual depending on what was asked:

User says	Type	Format
"how does X work"	Illustrative diagram	SVG
"X architecture"	Structural diagram	SVG
"what are the steps"	Flowchart	SVG
"explain compound interest"	Interactive explainer	HTML
"compare these options"	Comparison grid	HTML
"show revenue chart"	Chart.js chart	HTML
"create a contact card"	Data record	HTML
"draw a sunset"	Art/illustration	SVG

Step 2: Build the Widget

Structure (strict order)

<style>  →  HTML content  →  <script>

Output streams token-by-token. Styles must exist before the elements they target, and scripts must run after the DOM is ready.

Philosophy

Seamless : Users shouldn't notice where the host UI ends and your widget begins
Flat : No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces
Compact : Show the essential inline. Explain the rest in text
Text goes in your response, visuals go in the tool — all explanatory text, descriptions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element

Core Rules

No  or /* comments */ (waste tokens, break streaming)
No font-size below 11px
No emoji — use CSS shapes or SVG paths
No gradients, drop shadows, blur, glow, or neon effects
No dark/colored backgrounds on outer containers (transparent only — host provides the bg)
Typography : two weights only: 400 regular, 500 medium. Never use 600 or 700. Headings: h1=22px, h2=18px, h3=16px — all font-weight 500. Body text=16px, weight 400, line-height 1.7
Sentence case always. Never Title Case, never ALL CAPS
No mid-sentence bolding — entity names go in code style not bold
No <!DOCTYPE>, <html>, <head>, or <body> — just content fragments
No position: fixed — use normal-flow layouts

CDN Allowlist (CSP-enforced)

External resources may ONLY load from:

cdnjs.cloudflare.com
cdn.jsdelivr.net
unpkg.com
esm.sh

All other origins are blocked — the request silently fails.

CSS Variables

Backgrounds : --color-background-primary (white), -secondary (surfaces), -tertiary (page bg), -info, -danger, -success, -warning Text : --color-text-primary (black), -secondary (muted), -tertiary (hints), -info, , , : (0.15α, default), (0.3α, hover), (0.4α), semantic : , , : (8px), (12px), (16px)

All auto-adapt to light/dark mode.

Dark mode is mandatory — every color must work in both modes:

In HTML: always use CSS variables for text. Never hardcode colors like color: #333
In SVG: use pre-built color classes (c-blue, c-teal, etc.) — they handle light/dark automatically
Mental test: if the background were near-black, would every text element still be readable?

`sendPrompt(text)`

A global function that sends a message to chat as if the user typed it. Use it when the user's next step benefits from Claude thinking. Handle filtering, sorting, toggling, and calculations in JS instead.

Step 3: Render with `show_widget`

The show_widget tool is built into claude.ai — no activation needed. Pass your widget code directly:

{
  "title": "snake_case_widget_name",
  "widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}

Parameter	Type	Required	Description
`title`	string	Yes	Snake_case identifier for the widget
`widget_code`	string	Yes	HTML or SVG code. For SVG: start with `<svg>`. For HTML: content fragment

For SVG output: start widget_code with <svg — it will be auto-detected and wrapped appropriately.

Step 4: Chart.js Template

For charts, use onload callback pattern to handle script load ordering:

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;">
  <div style="background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem;">
    <div style="font-size: 13px; color: var(--color-text-secondary);">Label</div>
    <div style="font-size: 24px; font-weight: 500;" id="stat1">—</div>
  </div>
</div>

<div style="position: relative; width: 100%; height: 300px; margin-top: 1rem;">
  <canvas id="myChart"></canvas>
</div>

<div style="display: flex; align-items: center; gap: 12px; margin-top: 1rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">Parameter</label>
  <input type="range" min="0" max="100" value="50" id="param" step="1" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 32px;" id="param-out">50</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  const slider = document.getElementById('param');
  const out = document.getElementById('param-out');
  let chart = null;

  function update() {
    const val = parseFloat(slider.value);
    out.textContent = val;
    document.getElementById('stat1').textContent = val.toFixed(1);

    const labels = [], data = [];
    for (let x = 0; x <= 100; x++) {
      labels.push(x);
      data.push(x * val / 100);
    }

    if (chart) chart.destroy();
    chart = new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: { labels, datasets: [{ data, borderColor: '#7F77DD', borderWidth: 2, pointRadius: 0, fill: false }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { grid: { display: false } } }
      }
    });
  }

  slider.addEventListener('input', update);
  update();
}
if (window.Chart) initChart();
</script>

Chart.js rules:

Canvas cannot resolve CSS variables — use hardcoded hex
Set height ONLY on the wrapper div, never on canvas itself
Always responsive: true, maintainAspectRatio: false
Always disable default legend, build custom HTML legends
Number formatting: -$5M not $-5M (negative sign before currency symbol)
Use onload="initChart()" on CDN script tag + if (window.Chart) initChart(); as fallback

Step 5: SVG Diagram Template

For flowcharts and diagrams, use SVG with pre-built classes:

<svg width="100%" viewBox="0 0 680 H">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- Single-line node (44px tall) -->
  <g class="node c-blue" onclick="sendPrompt('Tell me more about this')">
    <rect x="250" y="40" width="180" height="44" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">Step one</text>
  </g>

  <!-- Connector arrow -->
  <line x1="340" y1="84" x2="340" y2="120" class="arr" marker-end="url(#arrow)"/>

  <!-- Two-line node (56px tall) -->
  <g class="node c-teal" onclick="sendPrompt('Explain this step')">
    <rect x="230" y="120" width="220" height="56" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="140" text-anchor="middle" dominant-baseline="central">Step two</text>
    <text class="ts" x="340" y="158" text-anchor="middle" dominant-baseline="central">Processes the input</text>
  </g>
</svg>

SVG rules:

ViewBox always 680px wide (viewBox="0 0 680 H"). Set H to fit content + 40px padding
Safe area: x=40 to x=640, y=40 to y=(H-40)
Pre-built classes: t (14px), ts (12px secondary), th (14px medium 500), box, node, arr, c-{color}
Every <text> element must carry a class (t, ts, or )

Step 6: Interactive Explainer Template

For interactive explainers (sliders, live calculations, inline SVG):

<div style="display: flex; align-items: center; gap: 12px; margin: 0 0 1.5rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">Years</label>
  <input type="range" min="1" max="40" value="20" id="years" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 24px;" id="years-out">20</span>
</div>

<div style="display: flex; align-items: baseline; gap: 8px; margin: 0 0 1.5rem;">
  <span style="font-size: 14px; color: var(--color-text-secondary);">$1,000 →</span>
  <span style="font-size: 24px; font-weight: 500;" id="result">$3,870</span>
</div>

<div style="margin: 2rem 0; position: relative; height: 240px;">
  <canvas id="chart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  // slider logic, chart rendering, sendPrompt() for follow-ups
}
if (window.Chart) initChart();
</script>

Use sendPrompt() to let users ask follow-ups: sendPrompt('What if I increase the rate to 10%?')

Step 7: Respond to the User

After rendering the widget, briefly explain:

What the widget shows
How to interact with it (which controls do what)
One key insight from the data

Keep it concise — the widget speaks for itself.

Reference Files

references/design_system.md — Complete color palette (9 ramps × 7 stops), CSS variables, UI component patterns, metric cards, layout rules
references/svg_and_diagrams.md — SVG viewBox setup, font calibration, pre-built classes, flowchart/structural/illustrative diagram patterns with examples
references/chart_js.md — Chart.js configuration, script load ordering, canvas sizing, legend patterns, dashboard layout

Read the relevant reference file when you need specific design tokens, SVG coordinate math, or Chart.js configuration details.

Weekly Installs

101

Repository

himself65/finance-skills

GitHub Stars

489

First Seen

11 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

codex91

gemini-cli89

opencode89

cursor89

github-copilot88

kimi-cli88

Claude生成式UI技能指南：使用show_widget工具创建交互式HTML/SVG小组件

🇨🇳中文介绍

生成式 UI 技能

步骤 1：选择正确的视觉类型

相关 Skills

步骤 2：构建小组件

结构（严格顺序）

设计理念

核心规则

CDN 允许列表（CSP 强制执行）

CSS 变量

`sendPrompt(text)`

步骤 3：使用 `show_widget` 渲染

步骤 4：Chart.js 模板

步骤 5：SVG 图表模板

步骤 6：交互式解释器模板

步骤 7：响应用户

参考文件

🇺🇸English

Generative UI Skill

Step 1: Pick the Right Visual Type

Step 2: Build the Widget

Structure (strict order)

Philosophy

Core Rules

CDN Allowlist (CSP-enforced)

CSS Variables

`sendPrompt(text)`

Step 3: Render with `show_widget`

Step 4: Chart.js Template

Step 5: SVG Diagram Template

Step 6: Interactive Explainer Template

Step 7: Respond to the User

Reference Files

最新 Skills

Claude生成式UI技能指南：使用show_widget工具创建交互式HTML/SVG小组件

🇨🇳中文介绍

生成式 UI 技能

步骤 1：选择正确的视觉类型

相关 Skills

步骤 2：构建小组件

结构（严格顺序）

设计理念

核心规则

CDN 允许列表（CSP 强制执行）

CSS 变量

sendPrompt(text)

步骤 3：使用 show_widget 渲染

步骤 4：Chart.js 模板

步骤 5：SVG 图表模板

步骤 6：交互式解释器模板

步骤 7：响应用户

参考文件

🇺🇸English

Generative UI Skill

Step 1: Pick the Right Visual Type

Step 2: Build the Widget

Structure (strict order)

Philosophy

Core Rules

CDN Allowlist (CSP-enforced)

CSS Variables

sendPrompt(text)

Step 3: Render with show_widget

Step 4: Chart.js Template

Step 5: SVG Diagram Template

Step 6: Interactive Explainer Template

Step 7: Respond to the User

Reference Files

最新 Skills

`sendPrompt(text)`

步骤 3：使用 `show_widget` 渲染

`sendPrompt(text)`

Step 3: Render with `show_widget`