“Wait, can users actually add products to the cart?”Every prototype faces that question or one like it. You start to explain it’s “just Figma,” “just dummy data,” but what if you didn’t need disclaimers?What if you could hand clients—or your team—a working, data-connected mock-up of their website, or new pages and components, in less time than it takes to wireframe?That’s the challenge we’ll tackle today. But first, we need to look at:The problem with today’s prototyping toolsPick two: speed, flexibility, or interactivity.The prototyping ecosystem, despite having amazing software that addresses a huge variety of needs, doesn’t really have one tool that gives you all three.Wireframing apps let you draw boxes in minutes but every button is fake. Drag-and-drop builders animate scroll triggers until you ask for anything off-template. Custom code frees you… after you wave goodbye to a few afternoons.AI tools haven’t smashed the trade-off; they’ve just dressed it in flashier costumes. One prompt births a landing page, the next dumps a 2,000-line, worse-than-junior-level React file in your lap. The bottleneck is still there. Builder’s approach to website mockupsWe’ve been trying something a little different to maintain speed, flexibility, and interactivity while mocking full websites. Our AI-driven visual editor:Spins up a repo in seconds or connects to your existing one to use the code as design inspiration. React, Vue, Angular, and Svelte all work out of the box. Lets you shape components via plain English, visual edits, copy/pasted Figma frames, web inspos, MCP tools, and constant visual awareness of your entire website. Commits each change as a clean GitHub pull request your team can review like hand-written code. All your usual CI checks and lint rules apply.And if you need a tweak, you can comment to @builderio-bot right in the GitHub PR to make asynchronous changes without context switching.This results in a live site the café owner can interact with today, and a branch your devs can merge tomorrow. Stakeholders get to click actual buttons and trigger real state—no more “so, just imagine this works” demos.Let’s see it in action.From blank canvas to working mockup in five promptsToday, I’m going to mock up a fake business website. You’re welcome to create a real one.Before we fire off a single prompt, grab a note and write:Business name & vibe Core pages Primary goal Brand palette & toneThat’s it. Don’t sweat the details—we can always iterate. For mine, I wrote:1. Sunny Trails Bakery — family-owned, feel-good, smells like warm cinnamon. 2. Home, About, Pricing / Subscription Box, Menu (with daily specials). 3. Drive online orders and foot traffic—every CTA should funnel toward “Order Now” or “Reserve a Table.” 4. Warm yellow, chocolate brown, rounded typography, playful copy.We’re not trying to fit everything here. What matters is clarity on what we’re creating, so the AI has enough context to produce usable scaffolds, and so later tweaks stay aligned with the client’s vision. Builder will default to using React, Vite, and Tailwind. If you want a different JS framework, you can link an existing repo in that stack. In the near future, you won’t need to do this extra step to get non-React frameworks to function.(Free tier Builder gives you 5 AI credits/day and 25/month—plenty to follow along with today’s demo. Upgrade only when you need it.)An entire website from the first promptNow, we’re ready to get going.Head over to Builder.io and paste in this prompt or your own:Create a cozy bakery website called “Sunny Trails Bakery” with pages for: • Home • About • Pricing • Menu Brand palette: warm yellow and chocolate brown. Tone: playful, inviting. The restaurant is family-owned, feel-good, and smells like cinnamon. The goal of this site is to drive online orders and foot traffic—every CTA should funnel toward "Order Now" or "Reserve a Table."Once you hit enter, Builder will spin up a new dev container, and then inside that container, the AI will build out the first version of your site. You can leave the page and come back when it’s done.Now, before we go further, let’s create our repo, so that we get version history right from the outset. Click “Create Repo” up in the top right, and link your GitHub account.Once the process is complete, you’ll have a brand new repo.If you need any help on this step, or any of the below, check out these docs.Making the mockup’s order system workFrom our one-shot prompt, we’ve already got a really nice start for our client. However, when we press the “Order Now” button, we just get a generic alert. Let’s fix this.The best part about connecting to GitHub is that we get version control. Head back to your dashboard and edit the settings of your new project. We can give it a better name, and then, in the “Advanced” section, we can change the “Commit Mode” to “Pull Requests.”Now, we have the ability to create new branches right within Builder, allowing us to make drastic changes without worrying about the main version. This is also helpful if you’d like to show your client or team a few different versions of the same prototype.On a new branch, I’ll write another short prompt:Can you make the "Order Now" button work, even if it's just with dummy JSON for now?As you can see in the GIF above, Builder creates an ordering system and a fully mobile-responsive cart and checkout flow.Now, we can click “Send PR” in the top right, and we have an ordinary GitHub PR that can be reviewed and merged as needed.This is what’s possible in two prompts. For our third, let’s gussy up the style.If you’re like me, you might spend a lot of time admiring other people’s cool designs and learning how to code up similar components in your own style.Luckily, Builder has this capability, too, with our Chrome extension. I found a “Featured Posts” section on OpenAI’s website, where I like how the layout and scrolling work. We can copy and paste it onto our “Featured Treats” section, retaining our cafe’s distinctive brand style.Don’t worry—OpenAI doesn’t mind a little web scraping.You can do this with any component on any website, so your own projects can very quickly become a “best of the web” if you know what you’re doing.Plus, you can use Figma designs in much the same way, with even better design fidelity. Copy and paste a Figma frame with our Figma plugin, and tell the AI to either use the component as inspiration or as a 1:1 to reference for what the design should be.(You can grab our design-to-code guide for a lot more ideas of what this can help you accomplish.)Now, we’re ready to send our PR. This time, let’s take a closer look at the code the AI has created.As you can see, the code is neatly formatted into two reusable components. Scrolling down further, I find a CSS file and then the actual implementation on the homepage, with clean JSON to represent the dummy post data.Design tweaks to the mockup with visual editsOne issue that cropped up when the AI brought in the OpenAI layout is that it changed my text from “Featured Treats” to “Featured Stories & Treats.” I’ve realized I don’t like either, and I want to replace that text with: “Fresh Out of the Bakery.”It would be silly, though, to prompt the AI just for this small tweak. Let’s switch into edit mode.Edit Mode lets you select any component and change any of its content or underlying CSS directly. You get a host of Webflow-like options to choose from, so that you can finesse the details as needed.Once you’ve made all the visual changes you want—maybe tweaking a button color or a border radius—you can click “Apply Edits,” and the AI will ensure the underlying code matches your repo’s style.Async fixes to the mockup with Builder BotNow, our pull request is nearly ready to merge, but I found one issue with it:When we copied the OpenAI website layout earlier, one of the blog posts had a video as its featured graphic instead of just an image. This is cool for OpenAI, but for our bakery, I just wanted images in this section. Since I didn’t instruct Builder’s AI otherwise, it went ahead and followed the layout and created extra code for video capability.No problem. We can fix this inside GItHub with our final prompt. We just need to comment on the PR and tag builderio-bot. Within about a minute, Builder Bot has successfully removed the video functionality, leaving a minimal diff that affects only the code it needed to. For example: Returning to my project in Builder, I can see that the bot’s changes are accounted for in the chat window as well, and I can use the live preview link to make sure my site works as expected:Now, if this were a real project, you could easily deploy this to the web for your client. After all, you’ve got a whole GitHub repo. This isn’t just a mockup; it’s actual code you can tweak—with Builder or Cursor or by hand—until you’re satisfied to run the site in production.So, why use Builder to mock up your website?Sure, this has been a somewhat contrived example. A real prototype is going to look prettier, because I’m going to spend more time on pieces of the design that I don’t like as much.But that’s the point of the best AI tools: they don’t take you, the human, out of the loop.You still get to make all the executive decisions, and it respects your hard work. Since you can constantly see all the code the AI creates, work in branches, and prompt with component-level precision, you can stop worrying about AI overwriting your opinions and start using it more as the tool it’s designed to be.You can copy in your team’s Figma designs, import web inspos, connect MCP servers to get Jira tickets in hand, and—most importantly—work with existing repos full of existing styles that Builder will understand and match, just like it matched OpenAI’s layout to our little cafe.So, we get speed, flexibility, and interactivity all the way from prompt to PR to production.Try Builder today.

Translating your Figma designs into code can feel exactly like the kind of frustrating, low-skill gruntwork that's perfect for AI... except that most of us have also watched AI butcher hopeful screenshots into unresponsive spaghetti.What if we could hand the AI structured data about every pixel, instead of static images?This is how Figma Model Context Protocol (MCP) servers work. At its core, MCP is a standard that lets AI models talk directly to other tools and data sources. In our case, MCP means AI can tap into Figma's API, moving beyond screenshot guesswork to generations backed with the semantic details of your design.Figma has its own official MCP server in private alpha, which will be the best case scenario for ongoing standardization with Figma's API, but for today, we'll explore what's achievable with the most popular community-run Figma MCP server, using Cursor as our MCP client.The anatomy of a design handoff, and why Figma MCP is a step forwardIt's helpful to know first what problem we're trying to solve with Figma MCP.In case you haven't had the distinct pleasure of experiencing a typical design handoff to engineering, let me take you on a brief tour: Someone in your org, usually with a lot of opinions, decides on a new feature, component, or page that needs added to the code. Your design team creates a mockup. It is beautiful and full of potential. If you're really lucky, it's even practical to implement in code. You're often not really lucky. You begin to think how to implement the design. Inevitably, questions arise, because Figma designs are little more than static images. What happens when you hover this button? Is there an animation on scroll? Is this still legible in tablet size? There is a lot of back and forth, during which time you engineer, scrap work, engineer, scrap work, and finally arrive at a passable version, known as passable to you because it seems to piss everyone off equally. Now, finally, you can do the fun part: finesse. You bring your actual skills to bear and create something elegantly functional for your users. There may be more iterations after this, but you're happy for now.Sound familiar? Hopefully, it goes better at your org.Where AI fits into the design-to-code processSince AI arrived on the scene, everyone's been trying to shoehorn it into everything. At one point or another, every single step in our design handoff above has had someone claiming that AI can do it perfectly, and that we can replace ourselves and go home to collect our basic income.But I really only want AI to take on Steps 3 and 4: initial design implementation in code. For the rest, I very much like humans in charge. This is why something like a design-to-code AI excites me. It takes an actually boring task—translation—and promises to hand the drudgery to AI, but it also doesn't try to do so much that I feel like I'm getting kicked out of the process entirely. AI scaffolds the boilerplate, and I can just edit the details.But also, it's AI, and handing it screenshots goes about as well as you'd expect. It's like if you've ever tried to draw a friend's face from memory. Sure, you can kinda tell it's them.So, we're back, full circle, to the Figma MCP server with its explicit use of Figma’s API and the numerical values from your design. Let's try it and see how much better the results may be.How to use the Figma MCP serverOkay, down to business. Feel free to follow along. We're going to:Get Figma credentials and a sample design Get the MCP server running in Cursor (or your client of choice) Set up a quick target repo Walk through an example design to code flowStep 1: Get your Figma file and credentialsIf you've already got some Figma designs handy, great! It's more rewarding to see your own designs come to life. Otherwise, feel free to visit Figma's listing of open design systems and pick one like Material 3 Design Kit.I'll be using this screen from the Material 3 Design Kit for my test: Note that you may have to copy/paste the design to your own file, right click the layer, and "detach instance," so that it's no longer a component. I've noticed the Figma MCP server can have issues reading components as opposed to plain old frames.Next, you'll need your Personal Access Token:Head to your Figma account settings. Go to the Security tab. Generate a new token with the permissions and expiry date you prefer.Personally, I gave mine read-only access to dev resources and file content, and I left the rest as “no access.”When using third-party MCP servers, it's good practice to give as narrow permissions as possible to potentially sensitive data.Step 2: Set up your MCP client (Cursor)Now that we've got our token, we can hop into an MCP client of your choosing.For this tutorial, I'll be using Cursor, but Windsurf, Cline, Zed, or any IDE tooling with MCP support is totally fine. (Here’s a breakdown of the differences.) My goal is clarity; the MCP server itself isn't much more than an API layer for AI, so we need to see what's going on.In Cursor, head to Cursor Settings -> MCP -> Add new global MCP server. Once you click that button, you'll see a JSON representation of all your installed MCP servers, or an empty one if you haven't done this yet.You can add the community Figma MCP server like such:{ "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_ACCESS_TOKEN", "--stdio"] } } }To ensure Cursor can use npx, make sure you have Node installed on your system.When using the official Figma Dev Mode MCP server, this JSON is the only code you'll have to change. Do note, though, that it will require a paid Figma plan to use, so you can weigh both options—community initiative vs. standardized support.Now, when you prompt Cursor in Agent mode, you'll see the AI make tool calls to the MCP server when you say things like, "Use the Figma MCP to..."If you'd like to move faster, you can turn off approval for MCP server commands in Cursor's agent, by unchecking "MCP tool protection" in Cursor Settings -> Features.Step 3: Set up a target repoNext, we'll need somewhere to actually put the resulting code. When using this workflow, you're not always going to be starting from scratch; good design to code means implementing Figma designs in existing repos.For our purposes today, I'll just spin up a Next.js starter template, with npx create-next-app@latest.Step 4: ShowtimeOkay, we should be all set. Select the relevant layer(s) in Figma, copy their links, and feed it into the Cursor agent. My prompt is just:Can you replace my homepage with this Figma design? It should be a basic chat interface. Figma frame: <https://www.figma.com/design/CPDcrzkVChAzQ3q1pC5mXd/Figma-MCP-vs.-Builder-Fusion?node-id=2-215&t=K6v805pKyoU4FqdA-4> Please use the Figma MCP server. Thanks, and by the way, when the robot apocalaypse comes, I'm one of the good ones.Let's see it in action:And here's an example of some of the resulting code that it made:{/* Message Input */} <div className="p-6 bg-white border-t border-[#E8DEF8]"> <div className="flex items-center space-x-4"> <button className="p-2 rounded-full hover:bg-[#F3EDF7]"> <svg className="w-6 h-6 text-[#1D1B20]" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/> </svg> </button> <button className="p-2 rounded-full hover:bg-[#F3EDF7]"> <svg className="w-6 h-6 text-[#1D1B20]" fill="currentColor" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/> </svg> </button> <div className="flex-1 relative"> <div className="flex items-center bg-[#ECE6F0] rounded-full px-4 py-3"> <button className="p-1 rounded-full hover:bg-[#D0BCFF] mr-3"> <svg className="w-5 h-5 text-[#4A4459]" fill="currentColor" viewBox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> </button> <input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder="Type a message..." className="flex-1 bg-transparent outline-none text-[#1D1B20] placeholder-[#4A4459]" /> <button onClick={handleSendMessage} className="p-1 rounded-full hover:bg-[#D0BCFF] ml-3" > <svg className="w-5 h-5 text-[#4A4459]" fill="currentColor" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </button> </div> </div> </div> </div>In total, the AI wrote at 278-line component that mostly works, in about two minutes. Honestly, not bad for a single shot.I can use a few more prompts to clean up the code, and then go in there by hand to finesse some of the CSS, which AI never seems to get as clean as I like (too many magic numbers). But it definitely saves me time over setting this all up by hand.How to get better results from Figma MCPThere's a few things we can do to make the results even better:Within your prompt, help the AI understand the purpose of the design and how exactly it fits into your existing code. Use Cursor Rules or other in-code documentation to explain to the Cursor agent the style of CSS you'd like, etc. Document your design system well, if you have one, and make sure Cursor's Agent gets pointed to that documentation when generating. Don't overwhelm the agent. Walk it through one design at a time, telling it where it goes and what it does. The process isn't fully automatic yet.Basically, it all boils down to more context, given granularly. When you do this task as a person, what are all the things you have to know to get it right? Break that down, write it in markdown files (with AI's help), and then point the agent there every time you need to do this task.Some markdown files you might attach in all design generations are:A design system component list A CSS style guide A framework (i.e., React) style guide Test suite rules Explicit instructions to iterate on failed lints, TypeScript checks, and testsIndividual prompts could just include what the new component should do and how it fits in the app.Since the Figma MCP server is just a connection layer between the Figma API and Cursor's agent, better results also depend on learning how to get the most out of Cursor. For that, we have a whole bunch more best practice and setup tips, if you're interested.More than anything, don't expect perfect results. Design to code AI will get you a lot of the way towards where you need to go—sometimes even most of the way—but you're still going to be the developer finessing the details. The goal is just to save a little time. You're not trying to replace yourself.Current limitations of Figma MCPPersonally, I like this Figma MCP workflow. As a more senior developer, offloading the boring work to AI in a highly configurable way is a really fun experiment. But there's still a lot of limitations.MCP is a dev-only playground. Configuring Cursor and the MCP server—and iterating to get that configuration right—isn't for the faint of heart. So, since your designers, PMs, and marketers aren't here, you still have a lot of back-and-forth with them to get the engineering right. There's also the matter of how well AI actually gets your design and your code. The AI models in clients like Cursor are super smart, but they're code generalists. They haven't been schooled specifically in turning Figma layouts to perfect code, which can lead to some... creative... interpretations. Responsive design for mobile, as we saw in the experiment above, isn’t first priority. It's not a deterministic process. Even if AI has perfect access to Figma data, it can still go off the rails. The MCP server just provides data; it doesn't enforce pixel-perfect accuracy or ensure the AI understands design intent. Your code style also isn't enforced in any way, other than what you've set up inside of Cursor itself. Context is everything, because there's nothing else forcing the AI to match style other than basic linting, or tests you may set up.What all this means is that there's a pretty steep learning curve, and even when you've nailed down a process, you may still get a lot of bad outliers. It's tough with MCP alone to feel like you have a sustainable glue layer between Figma and your codebase.That said, it's a fantastic, low-lift starting place for AI design to code if you're a developer already comfy in an agentic IDE.Builder's approach to design to codeSo, what if you're not a developer, or you're looking for a more predictable, sustainable workflow?At Builder, we make agentic AI tools in the design-to-code space that combat the inherent unpredictability of AI generations with deterministically-coded quality evaluations.Figma to code is a solved problem for us already. Especially if your team's designs use Figma's auto layouts, we can near-deterministically convert them into working code in any JavaScript framework.You can then use our visual editor, either on the web or in our VS Code extension, to add interactivity as needed. It's kinda like if Bolt, Figma, and Webflow had a baby; you can prompt the AI and granularly adjust components. Vibe code DOOM or just fix your padding. Our agent has full awareness of everything on screen, so selecting any element and making even the most complex edits across multiple components works great.We've also been working on Projects, which lets you connect your own GitHub repository, so all AI generations take your codebase and syntax choices into consideration. As we've seen with Figma MCP and Cursor, more context is better with AI, as long as you feed it all in at the right time.Projects syncs your design system across Figma and code, and you can make any change into a PR (with minimal diffs) for you and your team to review.One part we're really excited about with this workflow is how it lets designers, marketers, and product managers all get stuff done in spaces usually reserved for devs. As we've been dogfooding internally, we've seen boards of Jira papercut tickets just kinda... vanish.Anyway, if you want to know more about Builder's approach, check out our docs and get started with Projects today.So, is the Figma MCP worth your time?Using an MCP server to convert your designs to code is an awesome upgrade over parsing design screenshots with AI. Its data-rich approach gets you much farther along, much faster than developer effort alone.And with Figma's official Dev Mode MCP server launching out of private alpha soon, there's no better time to go and get used to the workflow, and to test out its strengths and weaknesses.Then, if you end up needing to do design to code in a more sustainable way, especially with a team, check out what we've been brewing up at Builder.Happy design engineering!

GrowthX secures $12M in funding for its "service-as-software" platform that combines AI with human expertise to boost content marketing results by up to 300%.Read More

How every designer’s favorite app is turning design dreams into code nightmares.Image by authorIf you’re a Figma fanatic, you’ve probably heard about the launch of Figma Sites — a new tool that promises to let designers create and publish fully interactive websites directly from the platform.At first glance, it sounds revolutionary. No need to hand off Figma files to a developer or convert them into Framer or Webflow layouts. Just click a few buttons and — boom — instant websites. But if it sounds too good to be true, it probably is.Being the skeptic that I am, I decided to dig into the code it produces. And, not surprisingly, it’s a mess — a sea of <div> and <span> tags and random classes with zero regard for semantic structure.Screenshot of code generated by Figma Sites.For those who don’t know, semantics in code means using HTML elements that clearly describe their purpose — like <header> for page headers, <section> for content sections, and <article> for standalone content.Proper class structures are just as crucial — they should be meaningful, consistent, and follow naming conventions that make the code readable and maintainable.For example, instead of using class="css-z91rnx" which is the kind of autogenerated gibberish Figma Sites spits out, it should be something like class="header-main" or class="btn-primary" to clearly convey the element’s purpose and maintain consistency across the project.And good code isn’t just about neatness. It’s essential for accessibility. Semantic elements like <nav> and <button> aren’t just for show — they help screen readers and assistive technology navigate the page, making it usable for everyone.Then there’s SEO. Search engines rely on semantic structure to properly index content. If your site is a sea of <div> tags with meaningless classes, search engines struggle to understand the hierarchy and relevance of your content. That means your Figma site might look good but rank like garbage.But let’s be real — the biggest red flag here is how Figma Sites feels like another rushed-to-market product. It’s yet another low-code, no-code tool jumping on the “vibe coding” bandwagon — prioritizing drag-and-drop ease over actual code quality. It’s like they’re cashing in on the trend without caring about what’s under the hood.And that’s a problem. I get that a lot of new designers don’t know how to assess front-end code, but Figma should know better.This points to one of two things — either Figma is incompetent, or they’re deliberately misleading designers into thinking this is publishable code. And I’d like to believe a company like Figma isn’t incompetent, which leaves us with the second option — they’re selling a promise that doesn’t deliver.Don’t get me wrong — it does produce code, just in the most rudimentary way possible. By “deliver,” I mean quality code that actually aligns with the standards they claim to uphold.I’m willing to give Figma the benefit of the doubt and assume they have internal developers working on this tool who know what bad code looks like. So maybe Sites was rushed out the door to meet a deadline (cough, Config 2025), even though it wasn’t ready.To be fair, Figma does say Sites is in open beta, but there’s a big difference between a beta release and convincing people it’s nearly production-ready — and Sites is nowhere close to delivering quality websites.But if that’s the case, why not just admit it’s more of a work in progress than something shippable? Oh right, because that would hurt the bottom line. And at the end of the day, that’s what it’s always about.Figma Config 2025Figma Sites, as it stands, is nothing more than a glorified prototyping tool — because no one with an ounce of dignity would launch a site, even a basic landing page, using such atrocious code.But prototyping is what Figma already does best — it’s the platform’s core function. So unless they plan to overhaul Sites, it’s just another excuse to squeeze more money out thier users. Classic corporate move.But it’s not all doom and gloom— Figma just gave us a masterclass in what not to do. If they’re serious about empowering designers to create real websites, there’s a right way to do it.And here’s the kicker — we, as designers, have the power to push them to deliver a tool that actually lives up to the hype. But that means dropping the fanboy mentality and critiquing these features with the same scrutiny we’d apply to our own work.Instead of selling a half-baked solution, Figma could invest in making Sites a real, production-ready tool that generates semantic, accessible, and SEO-friendly code. That would be a game changer — a tool that not only simplifies the design-to-code workflow but actually upholds the standards that matter.Until then, if you care about how your work performs beyond the Figma canvas, it might be time to keep a developer on speed dial. Or better yet, learn some basic front-end code yourself. Because knowing how to spot bad code is the first step in demanding better from companies like Figma.Don’t miss out! Join my email list and receive the latest content.Figma Sites: innovation or exploitation? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

On an unremarkable Monday last February, Andrej Karpathy fired off a tweet that gave the internet its new favorite buzz-phrase: vibe coding.Within hours, people watched tools like Bolt, v0, and Lovable conjure apps from mock-ups never designed or developed.The internet cheered—speed looks spectacular in demo reels—but more senior groups were quietly wincing as AI began to add technical debt to large codebases at previously impossible rates.Why demo-first AI fails mature teamsHere’s how senior designers, developers, and marketers feel the pain.Designers: Prefab design systems ≠ your design systemToday’s one-click generators choose their own colors, border-radii, and fonts. The instant they collide with a house style they don’t recognize, they hard-code new hex values that overwrite your brand tokens, throw off the grid, and leave designers sending screenshots of mismatched styles to the bug tracker.When you draw a picture, you spend your time carefully crafting the shapes and lines. Great design comes from consistency of intention.Today’s AI designers give you a page full of chicken scratches, an eraser, and a “good luck.”Developers: One-shot codegen ≠ production code.A “fully-working” React page arrives as a single 1,200-line component—no tests, no accessibility tags, no separation of concerns. The diff looks like a CVS receipt.The dev who merges it now basically owns a tarball that will resist every future refactor. Code feels like inheriting a junior’s side project, but the junior in this case is an LLM that never sleeps and can’t be taught.Clean, maintainable code is measured by how many lines you can still cut. Without context of your existing codebase or a lot of fine-tuning, AI’s tendency is to be too verbose.Marketers: Fake data ≠ live experiments.Marketing can now crank out a landing page in fifteen minutes, but every testimonial, price, and CTA is still lorem ipsum.Wiring the page to the CMS—and to analytics—means rewriting half the markup by hand. Every 10x sprint lands on an engineering backlog.You can generate pages, sure, but you’re gonna have to wait on the revenue.What’s left for us?Call it all the 80/20 hangover: AI generates the first 80% of the job in 20% of the time… then teams grind through the next 80% of the time patching the final 20% of the work.It’s the perfect inversion of healthy collaboration. Humans drown in drudgery and plead with the machine to handle the craft. But here’s the thing: The lesson isn’t that AI is snake oil; it’s that big team problems aren’t solved by fast AI alone.Sure, “Make me a meal-planning app” is a fun toy, but as we’ve seen, speed without fidelity just moves the bottleneck downstream.What we need is to respect the craft already living in your components, tokens, data, and tests. We need AI for grown-ups.The two-sided contract of AI for grown-upsHere’s the proposal: what if we started building AI with competent teams in mind?For that kind of tooling, two mindset shifts need to happen, both from the builders of AI software and the professionals that use it.Builders need to…Respect the stack. Every pixel, prop, token, schema, and test that already lives in a repo becomes the rails, not a suggestion. Professionals should be able to easily predict what AI outputs will look like. Stay in their lane. Instead of inventing Yet-Another-Canvas, the tooling embeds itself in the software the best teams already use: Figma, IDEs, headless CMSes, etc. Professionals work hard to choose their tools, and AI alone is not a compelling enough reason to switch. Expose control. Codegen happens in daylight—via CLI hooks, readable diffs, and human review gates—so senior engineers can keep the quality bar where it belongs. Professionals are smart enough to handle the machine, so long as it shows them what it’s doing.It’s not up to the professional world to keep perfect pace with the runaway train of AI. It’s the tool builders’ responsibility to stop breaking so much stuff.Professionals need to…Feed the context. Put in the work to document processes, map prototypes to real components, hand over design tokens, and write the first round of tests. Give the model a fighting chance at fidelity. Builders will use this to make AI generations far more deterministic.Stay accountable. A merged PR is still a human name on the line for the most intricate of crafts: UX polish, performance budgets, sparkling copy, etc. Builders don’t have to design all-star AI; they can focus on making it consistent at the grunt-work.Recognize AI limits. Designers, developers, and marketers use AI primarily as the translation layer between deeply skillful fields. Builders don’t need to make AI that replaces teams, but rather AI that fosters communication in the handoffs.It’s not up to the Builders to anticipate every team’s exact use case. Instead, they can trust that professionals will rise to the challenge of adapting AI to their needs. How AI for grown-ups works on a given MondayWell, that’s all great: People focus on people things; AI focuses on AI things. But what does it look like in practice?Let’s take the perspective of our three personas again—designers, developers, and marketers—and see what an ideal world looks like for them.Designers, still in FigmaA designer adjusts the corner radius on the hero card and watches the live hand-off panel flag the exact React prop it will touch.A token audit bot pings him only if the value breaks the design system—no more screenshot spreadsheets.Freed from red-lining, he spends the afternoon nudging micro-interactions and pairing with motion design, really making everything sing.Way more time on polish. No more token-drift bugs filed.Developers, still in the IDEA developer pulls the latest “design-to-code” PR: it’s already split into sensible components, test stubs green-lit, and the diff is small enough to review over coffee.She runs the performance benchmark—numbers hold, thanks to preset budgets the generator never crosses.With boilerplate gone, she dives into accessible keyboard flows and edge-case logic that actually moves the product forward.Review cycles on layout bugs drop by half with AI taking over scaffolding.Marketers, still in the CMSA marketer duplicates last week’s landing page variant, swaps headline copy, and clicks “Stage Experiment.”The AI wires analytics, snapshots the control, and opens a PR tagged for growth-team review—no Jira ticket, no dev backlog delay.They schedule the A/B test in the same dashboard and spend their saved hour crafting social hooks for the launch.Campaign velocity doubles, while engineering time spent on “tiny copy changes” shrinks to near-zero.Same tools, less tedium, deeper ownership. Each role feeds context to the system, stays accountable, and lets the AI do the grunt work—that’s the contract in action.Keep your Cursor, keep your ChatGPT—the glue-layer AI just has to play nice with them while sitting squarely in the team’s shared stack. How we’re building toward AI for grown-upsSo, how close are we to that perfect Monday?At Builder, we find ourselves in a unique position to help, and we’ve been pivoting to meet the demand, especially for large teams.A tiny history lessonBuilder launched in 2019 as a headless CMS plus visual editor whose goal was simple: let developers surface their own JavaScript framework components, and then let non-developers arrange those components without touching code.To pull that off, we built our editor on Mitosis, an open-source layer that describes components once and compiles them to whatever JS framework a team already runs.Because of that early direction, three “grown-up parts” of our product were firmly in place before the generative-AI wave arrived:Fully-featured visual editing: Our Webflow-like editor creates space for designers and marketers to tweak components and pages that compile to any JS framework. Deterministic component mapping: Every Figma frame and its design tokens can round-trip with a real, version-controlled component—not a look-alike snippet. A data source with real content: The CMS holds marketing content, sure, but also all the data engineers need for accurate UI states.So when large language models became practical, we didn’t bolt AI onto a blank slate; we layered it onto an editor, a mapper, and a CMS that were already respecting the stack.That head-start is why our current AI features can focus on removing drudgery instead of reinventing fundamentals.What we’ve made so farOur product works as a bunch of incrementally adoptable layers. No big bang rewrites needed.Visual Editor → Code. Think Bolt or v0, but with Webflow-level tweakability. Prompt the AI to draft a page—or paste any URL for an instant, editable clone—then fine-tune any class, token, or breakpoint by hand. Drop in production-ready components from 21st.dev (or your own repo) and ship designs that respect your CSS, not ours.Figma → Visual Editor (and Code). Install the free Figma Visual Copilot plug-in, draw your frame, and click Export. Copilot converts the frame’s exact Auto-Layout geometry into clean, responsive framework code that can drop straight into the repo or open in Builder’s visual editor for tweaks. Designers still hand over a Figma link; developers run one CLI command to scaffold production-ready code—no guessing, no style drift.Repo → Visual Editor → Repo PR [coming soon]. We’ll be announcing a product shortly that allows anyone to import any GitHub repo to the Visual Editor and make changes that get auto-sent as a PR. Marketers and designers can file engineering tickets with the code already in nice shape.Component Mapping. Tell Builder which Figma button matches which code button once, click “Publish,” and you’re set. From then on, every design export that uses that component drops the real one from your repo into the generated diff—props, tokens, everything—so code reviews focus on ideas, not mismatched styles.Builder Publish: It’s not just a patch for lorem ipsum; it’s your entire headless CMS. Wire any page to real-time content and analytics so marketing can run A/B tests without tapping devs—and get the full schema, versioning, and single-source-of-truth perks that come with a modern CMS, all under the same roof.Where we’re still workingWe’re close, not finished. Next on our list:Less manual context. Auto-detect more tokens and components so mapping feels like autocomplete, not data entry. Deeper control. Let power users crack open every AI draft—props, tests, perf budgets—without leaving the editor. Broader design-system support. Shadcn today, your bespoke kit tomorrow. Mapping should be one click, not a weekend.That “perfect Monday” vision is where we’re headed, and our roadmap will get us there one feature at a time.We’re definitely interested in your feedback: What gaps do you still feel between design, code, and marketing, and where could an “AI for grown-ups” save you the most pain?Drop your thoughts in the comments or tag us on our socials (see footer for links).Turning the 80/20 right-side-upIf Software 2.0 taught us that networks can write code, and the Software 3.0 hype reminds us they can write whole interfaces, then the middle road we’ve walked today—call it Software 2.5—insists that learned programs still deserve linting, budgeting, and daylight.Boring constraints create extraordinary freedom.Speed is intoxicating, but alone it flips the 80/20 rule on its head, leaving humans elbow-deep in cleanup. AI for grown-ups reverses that trade.Tool builders promise rails, not rabbit holes. Professionals promise context and accountability. Every mapped component, every token lock, every human review makes the next generation more predictable—and predictability is what compounds into real velocity.We don’t need to be dragged kicking and screaming into the new world. We’re perfectly capable of walking there at our own pace, spending our hours on craft no model can fake. Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

Figma announced 'Sites' at Config 2025, which lets users create simple static websites from designs. Imagine a website generator like Framer or Webflow, but embedded inside Figma.The buzz is serious. Sites could become the de facto tool for quick marketing campaigns or small personal websites. But what if you need Sites to integrate with your existing design systems, custom components, and production code?Figma SitesFigma Sites is a visual developer tool similar to Webflow or Framer. It's focused on letting designers build websites without coding or leaving Figma.Its greatest strength is its integration with the Figma ecosystem. For designers already comfortable with the platform, Sites offers a path to deploy a design as a live website quickly.Easy interactivity and AI-enhanced codeFigma Sites includes numerous presets for everyday website interactions and effects. For instance, you can add a hover effect to a button or a typewriter effect to a text block.A future version of Sites will also include an AI tool for generating code.Responsive design and hands-off infrastructureFigma Sites can also display your design in desktop, tablet, and mobile layouts side by side. The preview version (press shift + space) and the published version are both fully responsive websites.Press the Publish button in the top-left corner once you’re ready to deploy the design into a working website. After some quick validations (it can even help with auto layout), Figma Sites will deploy your project to a generated URL. For a fee, you can wire up a custom domain.Coming soon: CMS and Code LayersRight now, Figma Sites translates your design into HTML and CSS. The team's future improvement, "Code Layers,” will take a user prompt and transform it into React and Tailwind CSS.Another future improvement is a CMS feature inside Figma Sites. This would allow users to manage their website content more efficiently. The idea of a fully integrated design-to-publish tool with an internal CMS is very appealing.Going from Figma to website to complete applicationSimple site builders are great for getting something online, but aren’t great at creating fully integrated applications that mesh with an existing codebase. This is a familiar problem.The challenge lies in moving beyond a static page built with HTML and CSS. What happens if you need this new site to use the Next.js framework and the App Router patterns that your team has adopted? Can you leverage your company's custom components? Is there a way to add complex user interactions? These limitations become significant hurdles for any product beyond a basic landing page or marketing campaign.Visual Editor: stepping beyond simple sitesBuilder.io's Visual Editor satisfies this larger need. Figma Sites gets you something fast without ever leaving the Figma ecosystem. Visual Editor gets you something nearly as fast, but it connects designs directly to your production codebase on one canvas.The core idea is different. Visual Editor is for feature-rich applications where your existing production codebase and design systems are first-class citizens.Figma Sites was engineered to transform a Figma design into a static site using no third-party tools and the most minimal toolchain possible. Visual Editor was engineered to transform designs into production applications at the enterprise scale:Figma-like precisionVisual Editor gives you a familiar, precise visual editing experience, but you're building interactive applications, not just static mockups. Use prompts to generate UI, then fine-tune it visually. The output isn't just a picture; it's code that works.Solving handoffsImport Figma designs with a click, and Builder translates them into interactive code using your component library. The CLI deeply integrates with your specific framework and codebase patterns, generating clean, maintainable code that developers want to work with. It respects your tech stack.On-brand generation, every timeStop worrying about brand drift. Because Builder understands your codebase, it uses your actual design system context—your colors, typography, spacing, and components—automatically ensuring everything generated is consistent and on-brand. No more manual checking.Dual workflows (develop & publish)Builder offers flexibility. Developers can use it to build new UIs that integrate directly with application code. Marketers or designers can use the 'Publish' workflow to create and update content visually using pre-built components, without needing a developer or a new deployment. This addresses the content bottleneck, too.Smashing workflow silosVisual Editor provides a unified canvas for design, development, and content updates. It fits into existing developer workflows (like Git) rather than trying to replace them, enabling better collaboration across the entire digital team.Getting started with Visual EditorReady to see the difference? You can try Visual Editor and experience how it connects to a real codebase.Open the Visual Copilot Figma plugin. Install it from the Figma Community if you haven't already.Select a layer or design in your Figma file that you want to bring into Builder.io.Click the "Export Design" button within the plugin.Click the "View Code in Builder" button. This will open your design directly in the Builder.io Visual Editor.(Optional) Enhance in the Visual Editor: Use AI prompts or manual controls to add interactivity, connect data, or refine the design within Builder.Generate code with the CLI: Copy the provided CLI command from Builder.io and run it in your local project's terminal. The CLI will analyze your codebase and generate the integrated, production-ready code components.The best way to understand the power of Visual Editor is to experience how it generates code that uses your components and fits your workflow.ConclusionFigma Sites is a big step forward for Figma. If you already work with the platform, you get all your favorite Figma features and a near-frictionless path to simple, real websites.Sites fills an essential market need. But you might find the tool underpowered if your team faces the challenges of integrating designs with a complex codebase, maintaining brand consistency across an extensive application, or enabling collaboration between large, diverse teams. In those cases, Builder's Visual Editor is the enterprise-grade solution. It provides a robust, integrated visual development environment that respects your code and scales with your product.Further reading Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo