Generative UI - Claude Generative UI Design System

Skill Overview

Generative UI is a comprehensive design system and development guide for Claude’s built-in generative UI functionality (the show_widget tool). It enables Claude to directly generate interactive HTML/SVG components and render them inline in claude.ai conversations, without first calling read_me, producing high-quality visual content that conforms to Anthropic’s “Imagine” design guidelines.

Use Cases

1. Data visualization and chart presentation: Simply say “show revenue chart” to generate a Chart.js line or bar chart, accompanied by metric cards and parameter sliders. This is suitable for monthly data reports, financial data presentations, trend comparisons, and similar scenarios. All values are automatically rounded to avoid long strings of decimals.
2. Architecture and process diagrams: Describe “the architecture of X” or “what are the steps in this process,” and the skill will output an inline SVG structural or process diagram. Nodes consistently use predefined color classes, and clicking a node allows users to ask follow-up questions about its details.
3. Interactive explanations and solution comparisons: When explaining concepts such as compound interest, tax rates, or loans, the skill generates interactive explainers with sliders and real-time recalculation. When selecting among options, it generates comparison grids that present the differences between multiple solutions side by side.

Core Features

1. Route visual types based on verbs: The skill chooses a format based not on the topic, but on the user’s actual request—“how it works” produces an explanatory diagram, “architecture” produces a structural diagram, “what are the steps” produces a process diagram, “compare these options” produces a comparison grid, and “draw a sunset” produces an illustration. Different wording about the same topic results in different visual formats.
2. Complete design guidelines built in: These include strict typography rules (only 400/500 font weights, 16px body text with a 1.7 line height, and 22/18/16px heading sizes), a flat visual style (gradients, shadows, glow effects, and noise are prohibited), border-radius and spacing tokens, sentence-case rules, and a color system based entirely on CSS variables. The guidelines require readability in dark mode—HTML uses CSS variables, while SVG uses predefined classes such as c-blue; both automatically adapt between light and dark modes.
3. Ready-to-use templates and safety constraints: The system provides Chart.js chart templates (including onload script-loading order handling, canvas sizing rules, and custom legends), SVG chart templates (with a 680px viewBox, coordinate safe areas, and clickable nodes), and interactive explainer templates. It also clearly defines the CDN allowlist (only cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, and esm.sh are permitted) and standardizes the use of sendPrompt()—filtering, sorting, switching, and calculations are performed in JavaScript, while only the next step requiring Claude’s reasoning is sent back to the conversation.

Frequently Asked Questions

Does the generative-ui skill need to call read_me first?

No. This skill already fully incorporates the design rules from Anthropic’s “Imagine — Visual Creation Suite,” including colors, typography, templates, and constraints. It can directly produce high-quality components, eliminating the need for the read_me setup call.

Will generated components display correctly in dark mode?

Yes, and this is a mandatory requirement. The HTML portion must use CSS variables—such as --color-text-primary and --color-background-secondary—rather than hard-coded colors. The SVG portion must use predefined classes such as c-blue and c-teal, which include values for both light and dark modes. The criterion is simple: if the background changes to near-black, is every text element still readable?

Can generated charts display real-time data?

No. Components render static data already provided in the conversation; they do not connect to databases or APIs to retrieve real-time data. Interactions such as sliders and toggles recalculate results in the browser using JavaScript—for example, recalculating a curve after changing the interest rate or term—and are intended to explore “what if” scenarios rather than read from external data sources. In addition, external resources referenced within components may only come from the four CDNs on the CSP allowlist; resources from any other domain will fail to load silently.