← All Blueprints
Design

Design Studio

Read Figma designs and generate code, push prototypes back to Figma, extract design tokens — a full design-to-code and code-to-design workflow

2 min setup 3 steps Requires: figma

Live Preview

The actual scene layout from the app. Click tabs to see it evolve. Tap a job to see what AI did.

Setup

1

Connect Figma

Link your Figma account so the agent can read designs and push prototypes.

2

Read a design

Paste a Figma frame URL. The agent reads the design context, takes a screenshot, and extracts design tokens.

3

Generate code

The agent generates code from the extracted design — React, SwiftUI, HTML/CSS, or any framework.

What you can ask

Implement this Figma design
Push this to Figma
Extract design tokens
Create design system rules
Get the component map
Screenshot this frame
What does this page look like?

Try this blueprint

Create a scene and add Design Studio. The agent guides you through setup.

Get early access