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 sources”
2
Multi-source ingestion and analysis
ai_action
“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 con…”
3
Sustained reasoning with Claude Opus 4.7
ai_action
“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 sources are …”
4
Parallel sub-agent processing
ai_action
“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”
6
User prompts prototype generation
trigger
“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”
8
Agent self-review loop
validation
“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
“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
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