generative-ui

仓库创建 2026年3月14日最近提交 1 个月前SkillHot 收录 21 天前

▸ 精选理由

对需在 Claude 中产出高质量交互/可视化输出的开发者特别有用。

这个 Skill 做什么

提供 Claude show_widget 的完整设计系统与生成可视化组件的指南。

提供 Claude 的 show_widget 可视化组件的完整设计规范，指导生成交互式 HTML/SVG 小部件，比如图表、仪表盘、流程图或示意图。你在需要把数据可视化、做交互原型或生成嵌入式图形时会用到它。特点是包含 Anthropic 的 Imagine 设计规则，能直接产出高质量 widget，无需额外说明书。

▸ 展开 SKILL.md 英文原文

Design system and guidelines for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Use this skill whenever the user asks to visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer, or produce any visual content beyond plain text or markdown. Triggers include: "show me", "visualize", "draw", "chart", "dashboard", "diagram", "flowchart", "widget", "interactive", "mockup", "illustrate", "explain how X works" (with visual), or any request for visual/interactive output. Also triggers when the user wants to display financial data visually, create comparison grids, or build tools with sliders, toggles, or live-updating displays.

Skill 开发管理可视化组件Claude专用设计系统Claude Code

3.0k

Stars

334

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/himself65/finance-skills/main/plugins/ui-tools/skills/generative-ui/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/himself65/finance-skills/main/plugins/ui-tools/skills/generative-ui/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# 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**,

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有