Design Interactive Widgets
Turn requests into interactive charts, dashboards, diagrams, and visual explainers using Claude's built-in generative UI. Your AI creates HTML/SVG widgets that match the Imagine design system, for visualizing data or concepts inline.
Try asking: “Show a bar chart comparing Q1 sales by region”
himself65 on GitHub
Curated by PromptsEdge from a public repo · MIT license. All credit goes to the author.
What is this skill?
Sometimes, plain text or markdown isn't enough—especially when you need to visualize data, compare options, or explain complex ideas interactively. With this skill, your AI can turn prompts into interactive HTML/SVG widgets right inside your Claude.ai conversations. Whether you want a live-updating dashboard, a comparison grid, a flowchart, or a visual explainer with sliders and toggles, your AI will use the Imagine design system to ensure widgets look great and work in both light and dark mode. This is perfect for analysts, educators, product teams, and anyone who wants more than just text.
What you can do
- Create interactive charts (line, bar, area) for financial data or comparisons ("Chart revenue growth for 2020–2023").
- Render dashboards with metric cards, grids, or live-updating data ("Show a dashboard for my portfolio").
- Draw flowcharts, architecture diagrams, or illustrative SVG diagrams ("Diagram the user signup flow").
- Build interactive explainers with sliders, toggles, or live calculations ("Visualize option payoff with adjustable strike").
- Generate mockups or UI component previews for product design discussions.
How it works
When you ask for a chart, diagram, or widget, your AI uses the show_widget tool to generate HTML or SVG that follows the Imagine design system. It applies the correct CSS variables for color, typography, and layout, ensuring the widget blends with the Claude UI and works in both light and dark mode. The AI references pre-built patterns for charts and diagrams, so outputs are compact, clear, and visually consistent.
Good to know
- Works only on Claude.ai with the built-in show_widget tool—no extra setup required.
- All widgets are rendered inline; interactive features are limited to what Claude supports (sliders, toggles, live updates).
- No external API keys or installations needed.
Install this skill
- 1
Get the skill — it’s free
Use the Get this skill panel. Unlocked skills stay in My skills. - 2
Download or clone the files
Download the zip, or clone the repo and copy theplugins/ui-tools/skills/generative-uifolder. - 3
Put it where your agent looks for skills
For Claude Code, use your personal skills folder (every project) or a project’s own folder:~/.claude/skills/generative-ui/SKILL.md # all projects .claude/skills/generative-ui/SKILL.md # this project only
- 4
Just ask
No command needed. The agent reads the skill’s description and loads it on its own when your request matches.
SKILL.md frontmatter
What your agent reads to decide when to load this skill.
---
name: generative-ui
description: Design system and templates for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating displays — including financial data shown visually and requests phrased as "show me", "visualize", "draw", or "chart this".
---Files
Open any Markdown file to read it here.
Related skills
View all →- iOS 26 Liquid Glass DesignFreeBuild iOS 26 apps with dynamic Liquid Glass effects using SwiftUI, UIKit, and WidgetKit. It covers blur, reflection, interactive morphing, glass buttons, and customizable shapes and tints for modern UI components.
- Brand Guidelines AuditFreeTurn your AI into a brand guardian: it audits, documents, and applies brand guidelines for any company or product. Get detailed checks on colors, typography, logo usage, tone, and more—ready for designers, marketers, and contractors.
- Video Ingest, Index, and EditFreeYour AI ingests video or live streams, indexes visual and spoken content, and edits timelines with subtitles, overlays, and audio. It supports local files, URLs, RTSP feeds, desktop capture, and real-time alerts.
- Edit and Structure VideoFreeYour AI edits and structures existing video footage into polished content. It manages cutting, overlays, subtitles, voiceovers, and reframing using FFmpeg, Remotion, ElevenLabs, Descript, and CapCut workflows.