AI-Powered Design System Tooling

Generate perfect prompts
for any component

Connect to any Storybook or upload a screenshot. DS Builder instantly generates Figma Make, Claude & Codex prompts for every component variant — in seconds.

⚡ Try it free

No signup required  ·  Works in the browser  ·  Cancel anytime

◎ storybook.yourapp.com — DS Builder
Connect
Components · 24
Button
Input
Modal
Card
Badge
Dropdown
Table
Toast
Avatar
Checkbox
Tabs
Tooltip
Button · 4 variants
Primary Button
FIGMA
CLAUDE
CODEX
FIGMA MAKE
CLAUDE
CODEX
// Button component — Figma Make prompt
Create a Button component with the
following design tokens:

variants: ['primary', 'ghost',
  'danger', 'outline']
sizes: ['sm', 'md', 'lg']
states: ['default', 'hover',
  'disabled', 'loading']

// Design tokens extracted from Storybook
background: #1EAA5C
border-radius: 6px
font: 600 13px SF Mono
⚡ Generate
⎘ Copy
✨ Improve
How it works

From component to prompt
in three steps

No config, no API setup. Works with any Storybook, public or private.

01
🔗
Connect your Storybook
Paste your Storybook URL, use the bookmarklet for private instances, or upload a screenshot directly to the canvas.
02
🎯
Select a component
Browse your full component library in the sidebar. Click any component to load it onto the canvas with all its variants.
03
⚡
Generate & copy prompts
Hit Generate to get AI-powered Figma Make, Claude, and Codex prompts — tailored to your exact component and design tokens.
Features

Everything you need to
ship design systems faster

✦ Figma Make
Pixel-perfect Figma prompts
Claude Vision analyses your component screenshot and generates Figma Make prompts that replicate every spacing, colour, and interaction detail.
// Figma Make — Button/Primary
Create a Button component · radius 6px
background #1EAA5C · padding 0 20px
States: default · hover · disabled · loading
→ Includes auto-layout + variants
◆ Claude Vision
AI that sees your components
Upload any screenshot to the canvas. Claude Vision reads the visual design and extracts tokens, structure, and behaviour — no code needed.
// Claude — screenshot analysis
Detected: Card component
Shadow: 0 4px 16px rgba(0,0,0,.4)
Border: 1px solid #242540 · radius 10px
→ Ready to generate prompts
{ } Codex
Production-ready Codex prompts
Generate OpenAI Codex prompts that produce React TypeScript components with correct prop types, accessibility, and your design token values baked in.
// Codex — React TypeScript
interface ButtonProps {
  variant: 'primary' | 'ghost'
  size: 'sm' | 'md' | 'lg'
}
🧠 Memory
Prompts that learn over time
Rate prompts with 👍 or 👎. DS Builder stores your feedback and uses it to improve future generations — getting smarter the more you use it.
// Prompt memory active
Remembered: prefer compact padding
Remembered: always include dark mode
Remembered: Tailwind over inline styles
→ Applied to new generation
Token efficiency

Save thousands of tokens
on every AI call

DS Builder pre-processes your components before they ever touch an AI model — extracting only what matters. You pay for signal, not noise.

Colour extraction
~369
tokens
DS Builder eyedrops every colour in your screenshot and returns a structured JSON palette — for less than the cost of a paragraph of text.
vs ~12,000 raw paste
📸 as seen in the app
Figma Make prompt
~800 max output tokens
FIGMA
Colour extraction feeds directly into the Figma Make prompt — no manual token lookup, no copy-pasting hex values.
Claude component prompt
~3,000 max output tokens
CLAUDE
Screenshot analysis + pre-extracted tokens = a tightly scoped prompt. No rambling context, no wasted input.
Codex / OpenAI prompt
~2,000 max output tokens
CODEX
TypeScript interfaces, design tokens, and file structure — all pre-structured so Codex doesn't have to guess.
WITHOUT DS BUILDER
😩 Paste raw Storybook JSON into prompt
😩 Manually describe colours & tokens
😩 ~12,000+ tokens of noise per call
😩 Vague output — AI has to guess structure
😩 £££ API cost burns fast
VS
WITH DS BUILDER
✦ Auto colour extraction — ~369 tokens
✦ Design tokens pre-extracted, no guessing
✦ Scoped, structured prompts only
✦ Precise output every time
✦ 97% fewer tokens. Same result.
FAQ

Common questions

Do I need an API key to use DS Builder? +
Template prompts work with no API key. For AI-powered generation (Claude Vision, improved prompts, memory), you need your own Anthropic API key. You're billed directly by Anthropic at their standard rates.
Does it work with private Storybooks? +
Yes. Use the included bookmarklet — drag it to your bookmarks bar, open your private Storybook, click the bookmark, and it copies your component index to the clipboard. Then paste it into DS Builder.
What frameworks does it support? +
DS Builder works with any Storybook regardless of framework — React, Vue, Angular, Svelte, Web Components, or anything else. The generated Codex prompts default to React TypeScript but you can specify any framework in the prompt.

Ready to ship faster?

Join developers and designers who use DS Builder to go from component to production prompt in seconds.

⚡ Try DS Builder free