Create a full design system just by chatting with Claude
title: "Create a full design system just by chatting with Claude" description: "A conversational flow for building a design system: Claude proposes tokens, you confirm per category, and the result becomes Figma styles and variables." publishedAt: "2026-04-16" author: name: "AI To Design" url: "https://ai-to-design.com" tags: [feature, design-system] coverImage: "/terminal.png" coverAlt: "A terminal showing a chat with Claude proposing colour, typography, and spacing tokens for a new design system." relatedSlugs: [figma-design-system-support]
Setting up a design system is one of those day-one tasks that often never happens. You know you should pick a palette, define a type scale, lock in spacing — but when you're trying to ship, it's always the thing that gets pushed to "next sprint". So projects keep accumulating one-off hex values and ad-hoc font sizes, and by the time someone finally sits down to consolidate, there's a month of cleanup to do.
What changed
Interactive Design System Creation turns that task into a short conversation. Ask Claude to set up a design system for your project and it sends a full proposal to the plugin: a curated palette organised by semantic role, a type scale, a spacing scale, radius and shadow tokens, and a list of foundational components with their variants.
The proposal lands in the Design System tab. Nothing has touched the canvas yet. You review each category with visual pickers — real swatches for colours, live font previews for typography, visual bars for spacing. Edit a value, add a token you want, remove one you don't. Every change stays local until you're happy.
When you click Confirm, the plugin creates the matching Figma shared styles and variables in a single transaction, persists the confirmed set to clientStorage scoped to your file, and from that point on every render_html call uses your tokens instead of auto-extracting new ones from the CSS.
The proposal shape looks like this:
interface DesignSystemProposal {
colors: Array<{ name: string; value: string; role: ColorRole }>;
typography: Array<{
name: string;
fontFamily: string;
fontSize: number;
lineHeight: number;
fontWeight: number;
}>;
spacing: Array<{ name: string; value: number }>;
radius: Array<{ name: string; value: number }>;
shadows: Array<{ name: string; x: number; y: number; blur: number; spread: number; color: string }>;
components: Array<{
name: string;
variants: Record<string, string[]>;
}>;
}Every token is editable before confirmation. Every token is namespaced under ai.to.design/ so it lives peacefully alongside anything you've hand-authored. Confirming twice is idempotent — existing styles are updated, not duplicated — so you can iterate without fear of polluting the file.
The value isn't the generation. Claude can propose tokens all day. The value is the curation step: you get to feel like the design system is yours, not the AI's, while keeping the time investment down to minutes.
