# From Figma to code in minutes: How I built UI Studio with AI

DevFeed: [From Figma to code in minutes: How I built UI Studio with AI](<https://devfeed.tech/articles/from-figma-to-code-in-minutes-how-i-built-ui-studio-with-ai-22592.md>)

Original publisher: [Read original article](<https://medium.com/amex-gbt-technology/from-figma-to-code-in-minutes-how-i-built-ui-studio-with-ai-68f4cbfa0b8e?source=rss----60a0578f4096---4>)

Author: Jayant Kumar

Published: 2026-06-18T07:01:03Z

Content type: tutorial

Language: en

Sources: [Amex GBT Technology](<https://devfeed.tech/sources/amex-gbt-technology.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [ui](<https://devfeed.tech/topics/ui.md>), [React](<https://devfeed.tech/topics/react.md>), [Anthropic Claude](<https://devfeed.tech/topics/anthropic-claude.md>), [Prompt Engineering](<https://devfeed.tech/topics/prompt-engineering.md>), [repo](<https://devfeed.tech/topics/repo.md>), [Terminal](<https://devfeed.tech/topics/terminal.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [anthropic-claude](<https://devfeed.tech/tags/anthropic-claude.md>), [figma](<https://devfeed.tech/tags/figma.md>), [frontend-development](<https://devfeed.tech/tags/frontend-development.md>), [prompt-engineering](<https://devfeed.tech/tags/prompt-engineering.md>), [react](<https://devfeed.tech/tags/react.md>), [repo](<https://devfeed.tech/tags/repo.md>), [software-development](<https://devfeed.tech/tags/software-development.md>), [terminal](<https://devfeed.tech/tags/terminal.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>)

## AI overview

This tutorial explains how the author built UI Studio, a tool that generates UI code using Egencia's internal UITK React components from a prompt, a Figma URL, or a screenshot. It describes the original feasibility-checking workflow and the tool's progression from a local prototype to a deployable application.

## Source excerpt

Whether you're a developer checking feasibility or a designer wanting to see your Figma come to life in real code, UI Studio is built for both. If you've ever worked on a product team, you know the dance, a designer hands over a Figma file, but before anyone writes a single line of production code, a developer has to answer one question: Is this buildable with our component library? At Egencia by Amex GBT, we use UITK (UI Toolkit), our internal component library built on React. It gives developers a set of standardized components to build consistent UIs across our products. As part of Egencia, that question kicks off a process that can take days. We open the doc site, scan the components, write some test code in the React playground or our own repo, and eventually come back to the designer with a verdict. If something isn't feasible, the design goes back for revisions. Then we check again and finally start building. It works. But it's slow. And I couldn't help but wonder whether there was a better way. The idea Earlier this year, I was doing the Anthropic Claude course and somewhere between learning about prompt engineering and working through the hands-on labs, it clicked. What if I could skip the whole feasibility loop and just generate the UI directly using our actual UITK components, from a prompt, a Figma link, or even a screenshot? That was the seed. A few weeks later, UI Studio was live. Figure 1: UI Studio, describe what you want, drop an image, or paste a Figma URLHow it got built It took about three to four weeks to build, and it wasn't linear. It went through three very different versions before becoming what it is today. Phase 1: The hacky local version The first version was built to prove the idea, not to share it. I cloned the UITK doc site repo locally, fetched component data directly from it, and created a proxy that passed all user input to the model via terminal. It worked on my machine. But getting anyone else to use it would have meant cloning re