UI Studio
UiStudiobeta
+
+
+
+

Figma for your coding agents.

Edit visually on any live React page and let your coding agent handle the diff.

Loved by 0+ founders

Edit live → Clean code diffs → One‑click PRs.

Select any element

[*] UIStudio maps it to the real component in your codebase.

Edit or describe changes

[*] Generate a context‑rich prompt for your coding agent.

Review the diff

[*] Review the diff and merge with confidence in your codebase.

Direct Visual Editing

Select any element on your live webpage with a single click. Our overlay highlights components and extracts context automatically.

Direct visual editing

Your IDE, in sync

Connects to your local codebase, manages repositories, and turns every visual edit into either a direct change or a polished pull request ready for review.

IDE sync

Coding agents you love

All your favorite coding agents connect in one place and work together seamlessly by design.

UI Studio

Smart asset management

Access your component library, drag in reusable blocks, extract colors and fonts from your codebase.

Smart asset management

What other builders are saying

Join the community of devs who love our Figma for coding agents.

"my goal is to essentially find a way to get from dom to working component as fast as possible. i find myself getting there but front end is such a hard process to get it pixel perfect."

@annonymous

Common Questions

WHAT IS UI STUDIO?
UI Studio is a free Chrome extension that lets you click on any element in your React app and send it directly to AI coding agents like Claude Code or Cursor. It extracts the component name, file path, and props so the AI knows exactly what to edit.

Ready to ship faster?

Join the waitlist and be the first to know when we launch.