You might have seen flashy videos on YouTube or viral tweets on Twitter where AI looks at a Figma design and magically turns it into a working web app. The demo looks incredible: a few clicks, some AI prompts, and a web UI appears out of thin air.

But here’s the catch — that magic works mostly for tiny, static pages with minimal logic. In real-world applications, where there are multiple pages, conditional rendering, reusable components, and UX nuances, things begin to fall apart. AI-generated UI starts to feel more like a fragile prototype than production-ready code.

This is where most devs (including me) hit the wall. What follows is how I made peace with those limitations and turned the process into something practical and scalable for my real-world use case.

”UI development with AI looks magical until you try to plug it into a real project.”

For anyone who’s seen AI generate backend code or test cases with ease, the expectation is: why not do the same with UI? Just feed the Figma design, sprinkle in some Tailwind, and voilà — code. But it’s not quite that simple. Here’s my experience pairing with an AI coding assistant to build a real-world page from Figma, and what it takes to make it work.

The Challenge with UI & Existing Codebases

In greenfield projects, AI can work well with Figma images or Tailwind-based design references. It scans the visual cues and builds something presentable — enough for prototypes or internal tools. I had success with this in earlier projects.

However, things change dramatically in brownfield projects — where components already exist, styles are predefined, and new UI must integrate cleanly with the system. This is where AI falls short, often making assumptions or duplicating existing functionality.

Where It Breaks: Misunderstanding Design Systems

Take an example from my recent work on that was to build a page to manage a reservation/booking. The AI would:

• Ignore that we already have a Button component
• Recreate it using Tailwind from scratch
• Miss out on context-specific classnames defined in the style files.

Instead of leveraging the existing system, the AI would introduce inconsistency.

The Fix: A Better Prompting Strategy

I realized we needed a structured, reproducible way to help the AI understand just enough to assist — without assuming or overstepping. So I built a prompt system with this core idea:

“AI should only read the Figma file and generate a JSON map of the components it sees — nothing more. Filling in the actual React paths is my job as the developer.”

The JSON Format

{
  "Figma/Card/Default": {
    "react-component-description": "",
    "react-component-file-path": ""
  },
  "Figma/Typography/H2": {
    "react-component-description": "",
    "react-component-file-path": ""
  }
}

This format keeps the AI focused on identifying what’s in the Figma file — not implementing the components. I provided the Tailwind config, package.json, and SCSS files for additional context so it could match the tags, variants, and typography from the Figma to my system. The idea here is to make AI understand the available components and their styles. And then build the page, more like just assembling the pieces.

Pairing with AI Like a Teammate

Once the prompt and setup were ready:

• I passed the Figma URL
• AI read the structure using MCP (Figma’s plugin to expose layers)
• It generated a clean component map

Now it was my turn. I filled in paths like:

• input.tsx
• form-field.tsx
• button.tsx
• Native h1, h2 HTML tags

And that’s when the magic began.

Feedback Loop: AI As a Design Reviewer

When I mistakenly mapped both the input field and the email input field to input.tsx, the AI nudged me:

“You have a email-input.tsx. Should this map to that instead?”

It even asked follow-up questions:

• “Does your button component handle variants via props?"
• "Where are the classes defined — Tailwind or SCSS?”

This is where AI shines — not as a code generator, but as a reviewer and pair programmer.

Implementation with Confidence

After finalizing the map, I asked the AI to build only one section of the entire page. The AI followed through perfectly:

• Rendered the correct structure from Figma
• Didn’t over-style the elements
• Created a new TaskCard component where needed

And finally — it looked exactly like the Figma design.

Conclusion: AI for UI Needs Guardrails

If you’re working on a serious frontend, especially with a design system in place, treat AI like an intern who’s great at execution — not decision-making. Here’s the recipe that worked:

• ✅ Use Figma MCP to extract component structure
• ✅ Use a structured prompt to create a JSON map
• ✅ You (the dev) control the React mappings
• ✅ Use Tailwind config and SCSS files as context
• ✅ Treat AI as a pair, not a magic wand

With this approach, Figma to code becomes not just possible, but practical.