Back office ops · Production

StackBlitz builds a design system agent in Bolt on Claude Agent SDK to generate production-ready, on-brand prototypes

The problem

Companies lack a single, unified design system: typography lives in Google Docs, components are scattered across Figma files, Storybook instances, and GitHub repositories, and spacing guidelines may exist only in an engineer's head. Without access to a company's actual design language, AI-generated prototypes look generic and end up as throwaways that engineers must rewrite entirely before anything can ship.

Workflow diagram · grounded in source
1
Design sources submitted
Trigger
Users point the agent at all their design system sources.
▾ source quote
“Users point the agent at all their sources”
2
Multi-source ingestion and analysis
Ai action
The agent takes in everything a company has—Storybook sites, GitHub repositories, npm packages, Figma tokens, and documentation files—doing a thorough pass across each one.
▾ source quote
“It starts by taking in everything a company has: Storybook sites, GitHub repositories, npm packages, Figma tokens, documentation files. Users point the agent at all their sources and it does a thorough pass across each one, resolving conflicts, mapping design …”
3
Sustained reasoning with Claude Opus 4.7
Ai action
The agent uses Claude Opus 4.7 for sustained reasoning across a research phase averaging around 53 minutes.
▾ source quote
“The agent uses Claude Opus 4.7, which Elm said "showed the best results overall" for the sustained reasoning this research phase demands. This research phase can run for 40 minutes to an hour and a half depending on how many …”
4
Parallel sub-agent processing
Ai action
Custom sub-agents handle parallel tasks while keeping the main agent's context clean.
▾ source quote
“Custom sub-agents handle parallel tasks while keeping the main agent's context clean”
5
Design system library built in Bolt
Output
The result lives inside Bolt as a browsable library of all the company's components, sections, and pages in one place.
▾ source quote
“The result lives inside Bolt as a browsable library of all the company's components, sections, and pages in one place”
6
User prompts prototype generation
Trigger
A user selects the design system and prompts Bolt to build something like a car configurator or a comparison page.
▾ source quote
“a user selects it, prompts Bolt to build something, say a car configurator or a comparison page”
7
On-brand code generation
Ai action
The output follows the company's actual components, typography, and spacing.
▾ source quote
“the output follows the company's actual components, typography, and spacing”
8
Agent self-review loop
Validation
The agent checks its own work in a review loop to verify whether the output matches what it is supposed to look like.
▾ source quote
“The agent then checks its own work in a review loop. "You build something and then you check again: does this match what it's supposed to look like?"”
9
Production-ready prototype delivered
Output
The generated code can be handed to an engineer to ship almost as-is to production.
▾ source quote
“You can take it and hand it to an engineer and they can ship that code almost as-is to production”
Reported outcome

The design system agent generates a consolidated design system in an autonomous run averaging 53 minutes.
From that point, any team member can produce on-brand prototypes in roughly five minutes, with code that can go to production with minimal rework. StackBlitz sees roughly 90% cache efficiency on the Agent SDK, and more than 10,000 users have already uploaded their own design systems to Bolt.

Reported metrics
Research phase duration (range)40 minutes to an hour and a half
Research phase duration (average)averaging around 53 minutes
cache efficiency on Agent SDKroughly 90%
users who uploaded design systems to BoltMore than 10,000
Show all 6 reported metrics
research phase duration (range)40 minutes to an hour and a half
research phase duration (average)averaging around 53 minutes
cache efficiency on Agent SDKroughly 90%
users who uploaded design systems to BoltMore than 10,000
on-brand prototype generation timeroughly five minutes
prototype rework required for productionship that code almost as-is to production
Reported stack
BoltClaude Agent SDKClaude Opus 4.7StorybookGitHubFigmanpm
◆ Does this fit your context?

Compare to your context

Tell us your scale, team, and constraints. We'll show what changes at your size, what fails at your scale, and whether this case is a fit, needs adaptation, or won't scale to you. Free demo, no signup.

Compare to your context →
~30 seconds · free
Source
https://www.anthropic.com/customers/bolt
Read source ↗

Frequently asked questions

What did this team achieve with this AI workflow?

The design system agent generates a consolidated design system in an autonomous run averaging 53 minutes.

What tools did this team use?

Bolt, Claude Agent SDK, Claude Opus 4.7, Storybook, GitHub, Figma, npm.

What results were reported?

Research phase duration (range): 40 minutes to an hour and a half; Research phase duration (average): averaging around 53 minutes; cache efficiency on Agent SDK: roughly 90%; users who uploaded design systems to Bolt: More than 10,000 (source-reported, not independently verified).

How is this back office ops AI workflow structured?

Design sources submitted → Multi-source ingestion and analysis → Sustained reasoning with Claude Opus 4.7 → Parallel sub-agent processing → Design system library built in Bolt → User prompts prototype generation → On-brand code generation → Agent self-review loop → Production-ready prototype delivered.

Related back office ops cases

WHAT TO DO WITH THIS

Now compare it to your context

This case is one data point. Whether its pattern fits you depends on your volumes, your stack, and your exception load — that comparison is the step no case study can do for you.

Browse the Back office ops cases →