“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.

There’s a problem with today’s AI development tools. Vibe coding platforms are impressive and fun, but net-new code is useless when you already have a production codebase. Meanwhile, AI IDEs are powerful and interface with existing code, but they’re complex and developer-only.Builder fills this gap. It's not another AI coding toy—it's an enterprise-grade development platform and visual canvas that plugs into your existing React and Material UI projects. It understands your code, respects your design decisions, and your whole team can use it, not just devs.Builder: The AI-powered visual canvasBuilder is Git-backed, AI-powered, visually responsive, and capable of Figma-like design edits.Connect existing React and Material UI reposConnect any GitHub repo, including monorepo and multi-repo setups. Builder works from fresh branches (never Main), offers preview URLs, and creates AI-generated PRs.Once your project loads, try writing a prompt like, "make the hero image full-width,” or "add a Users dashboard at the /users route.”Use Material UI and your custom componentsBuilder adheres to your specific design systems and component libraries. Need all your code pinned to MUI v5.1? Should every new button use your team's custom <Button/>? Builder intelligently finds and matches your design system patterns.Wire up all your APIsConnecting APIs is easy with Builder. Its no-code nature empowers the non-developers on your team to build sophisticated solutions, too. Try a prompt like, “Fetch customer data from Supabase and render it as MUI grid."Edit React components visually with pixel-perfect precisionYou can't create truly pixel-perfect UIs with AI prompts alone. Need to subtly adjust a Card's elevation or push a Container five pixels to the left on mobile? Use Builder's visual controls, and it will update the code with the correct MUI props. It’s like an AI-first Figma replacement.Leverage our rich Figma to React integrationBuilder speaks fluent Figma. It can turn individual frames into components, merge multiple frames into complex layouts, or reference designs against existing elements. Builder also maps Figma components to their equivalent Material UI components, saving your devs hours of toil.Drag and drop anything for extra contextDrop in files for extra context—documents, PDFs, and screenshots all work. You can also use the @ keyword to reference other files in your codebase. The AI will analyze your reference materials and suggest appropriate patterns.Push code changes to Github using our agentic PR workflowBuilder both generates code and ships it back to your codebase. It makes intelligent PRs straight to GitHub. Even better, you can then tag @builderio-bot in your comments, and then the agent will handle feedback, make updates, and even fix build issues.Built for whole team collaborationBuilder works for everyone and solves problems across your entire organization:Designers can ensure design consistency, validate responsiveness, and eliminate the endless "that's not quite right" feedback cycles. Developers can connect existing repos to a powerful AI agent and visual assistant, turbocharging their cycles and creating high-quality UIs without design support. Product managers can create quick iterations, A/B test different layouts, and keep momentum on product improvements. Design system teams can enforce consistency across large teams, onboard new developers, and ensure design system adoption succeeds at scale.Getting Started with Builder and React + MUI appsThere are two ways to start developing React and Material UI apps with Builder. First, navigate to the sidebar menu inside your Builder account. Then choose the Projects menu (the icon looks like GitHub’s Octocat). Then you can either:Connect your existing repositoryConnect your GitHub repo to Builder and start editing visually right away. Give it a prompt, like "Create a new admin dashboard. Use our styling patterns and existing components..." Now, try tweaking the output in the visual canvas or pushing an AI-generated PR back to GitHub.Start fresh with an ideaDon't have a project yet? No worries. Write a prompt like "Create a contact form with validation using react-hook-form and MUI best practices." Builder will generate everything from scratch using your specified framework, component library, and unique design languageTry Builder with your next project.

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!

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

Figma's Config 2025 just dropped some major news, and a key highlight is the new AI product: Figma Make. With Make, Figma enables users to take existing designs and, through prompting, transform them into fully coded, interactive prototypes. The goal is to let you quickly experience how your designs feel and iterate on their interactivity.This is a big deal for rapidly prototyping and validating ideas inside Figma. But it gets us thinking—once you have that AI-enhanced prototype from Figma Make, how does it become a maintainable part of your existing, external production codebase?Figma Make First, let's break down what Figma Make brings to the table. Powered by Anthropic's Claude Sonnet, Make allows you to take a design you've already created in Figma and bring it to life:Select an existing Figma design frame.Paste it into the Make prompt box.Describe the interactivity you want (e.g., "animate the bars so they smoothly grow upwards from the x-axis to their respective values when the graph first becomes visible").Figma Make then interprets your design (passing structure and metadata, not just an image) and your prompt to generate a coded, interactive prototype. Rapid prototyping: Quickly turn static screens into something users can click, interact with, and experience. Data-driven prototypes: Upload files (like a GPX for a cycling app) or connect to real APIs (like a map API for a clinic finder) to make prototypes feel more real. Targeted edits: Point and edit tool: Directly manipulate properties like size, color, and font of elements within the Make environment. Point and prompt: Select a specific part of the design and prompt changes just for that area. Collaboration: Since it's within the Figma ecosystem, teams can collaborate on these interactive prototypes. Integration with Figma Sites: Make is also shown to integrate with the "Code Layers" feature within Figma Sites, allowing designs to be turned into React code and then further brought to life with Make for more complex interactions within that environment. Figma Make is positioned as a tool for exploration, for quickly getting a sense of how a design should look and feel, and for prototyping complex interactions or even more experimental UI/UX concepts. It's excellent for designers, product managers, and teams looking to validate ideas and iterate on the experience of a design rapidly. The reality of generated code in productionThe interactive prototypes generated by Figma Make are fantastic for quickly validating ideas and exploring how something feels within the Figma environment. This truly lowers the barrier to bringing concepts to life and testing interactivity.But, as developers and designers focused on shipping large, scalable, maintainable products, we know the journey doesn't end with these prototypes.The critical question remains: How do these AI-generated prototypes become a maintainable part of your existing, external production codebase? Does the code underlying a Figma Make prototype:Know about your team's carefully crafted Button component in your React library?Understand your Tailwind config or specific CSS variable naming conventions (-color-primary-500, not #3B82F6)?Use the right framework-specific patterns (like adding "use client" for Next.js App Router)?Slot neatly into your established file structure and adhere to your linting rules?This isn't a criticism of Figma's groundbreaking work with Make; it's a fantastic tool for its intended purpose of rapid, interactive prototyping. However, it highlights the classic challenge of bridging the gap between a design/prototyping environment (even one that generates code for its prototypes) and a complex, established production codebase. Developers often spend significant time manually translating, refactoring, and integrating code from prototypes to meet these production requirements.As products scale and teams grow, the need shifts towards something different — not better, just better suited for enterprise complexity and deep integration.Going from Figma designs to integrated codeThis exact challenge—moving from design intent to production-ready, context-aware code—is precisely what we've engineered to solve at Builder.io.Our approach centers around generating code that doesn't just look right or feel right in a prototype, but integrates right, using your existing standards, components, and codebase architecture.Import Figma Designs into Builder.io's Visual Editor:Start by easily exporting your designs from Figma directly into our Visual Editor using the Visual Copilot Figma plugin. This brings your familiar design environment into a space where it begins its journey to production code.Visually refine designs and build prototypes:Within the Visual Editor, you're not just manipulating pixels; you're visually writing actual code. You can fine-tune layouts with Figma-like precision and leverage AI to generate or modify UI elements.Integrate and iterate with the Visual Copilot CLI:Visual Copilot CLI automatically analyzes your existing codebase (no setup needed!) to understand your specific frameworks, styling conventions, and component libraries, ensuring the generated code fits perfectly.You can leverage the component mapping feature for even greater precision when translating design elements to your existing coded components. The CLI also enables surgical updates when designs change, keeping your design and code synchronized without requiring manual refactoring.Here’s a GIF showing how an onboarding design in Figma transforms into a functioning prototype in the Visual Editor and then seamlessly converts to implementation code in an existing project:The key difference is that it does not generate isolated, generic code for a prototype that you'll need to rewrite heavily for production. Instead, it creates code that looks, feels, and integrates as if it were written by your own developers, respecting your project's unique context and standards.The goal isn't just faster prototypes; it's faster, more reliable production code that lives and evolves within your existing systems.Why we love both approachesAs developers ourselves, we're genuinely excited about Figma Make. It democratizes interactive prototyping and helps creators of all kinds explore and validate ideas more effectively and quickly. For designers, PMs, and anyone wanting to make designs "feel" real without deep coding, it's a powerful new tool in the Figma ecosystem.At Builder.io, we've focused on solving the unique challenges that teams face when building and maintaining production software at scale. This means needing to ensure consistency across large codebases, leveraging existing well-architected components, and moving quickly without sacrificing quality or integration. Our tools are built specifically for teams who need to generate code that integrates deeply and intelligently with these existing systems.Figma Make helps you explore what to build and how it should feel. Builder.io helps you take that vision and integrate it into your production reality.Getting started with Visual CopilotGetting started with Builder.io's Visual Editor and the Visual Copilot Figma plugin is straightforward: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, always with your production components in mind. 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.If you enjoyed this post, check out these related articles on our blog: Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

Today’s AI agents can solve narrow tasks, but they can’t hand work to each other without custom glue code. Every hand-off is a one-off patch.To solve this problem, Google recently released the Agent2Agent (A2A) Protocol, a tiny, open standard that lets one agent discover, authenticate, and stream results from another agent. No shared prompt context, no bespoke REST endpoints, and no re-implementing auth for the tenth time.The spec is barely out of the oven, and plenty may change, but it’s a concrete step toward less brittle, more composable agent workflows.If you’re interested in why agents need a network-level standard, how A2A’s solution works, and the guardrails to run A2A safely, keep scrolling.Modern apps already juggle a cast of “copilots.” One drafts Jira tickets, another triages Zendesk, a third tunes marketing copy.But each AI agent lives in its own framework, and the moment you ask them to cooperate, you’re back to copy-pasting JSON or wiring short-lived REST bridges. (And let’s be real: copy-pasting prompts between agents is the modern equivalent of emailing yourself a draft-final-final_v2 zip file.)The Model Context Protocol (MCP) solved only part of that headache. MCP lets a single agent expose its tool schema so an LLM can call functions safely. Trouble starts when that agent needs to pass the whole task to a peer outside its prompt context. MCP stays silent on discovery, authentication, streaming progress, and rich file hand-offs, so teams have been forced to spin up custom micro-services.Here’s where the pain shows up in practice:Unstable hand-offs: A single extra field in a DIY “handover” JSON can break the chain.Security gridlock: Every in-house agent ships its own auth scheme; security teams refuse to bless unknown endpoints.Vendor lock-in: Some SaaS providers expose agents only through proprietary SDKs, pinning you to one cloud or framework.That brings us to Agent2Agent (A2A). Think of it as a slim, open layer built on JSON-RPC. It defines just enough—an Agent Card for discovery, a Task state machine, and streamed Messages or Artifacts—so any client agent can negotiate with any remote agent without poking around in prompts or private code.(^A2A use case example from Google’s announcement post.)A2A doesn’t replace MCP; it sits above it, filling the “between-agent” gap that has stalled real-world adoption. Think of agents like workers at an office: MCP gives them employee handbooks, fax machines, and filing cabinets; A2A lets them chit-chat in the break room.The goal of A2A is simple: make multi-agent orchestration feel routine rather than risky, while still giving frameworks and vendors room to innovate under the hood.Before we walk through a full A2A exchange, it helps to tag the two players clearly.This is the side that lives inside your stack—maybe a function in Genkit, a LangGraph node, or even an n8n workflow. It discovers a remote agent’s card, decides whether it can satisfy the announced auth method, and then creates a task by sending a JSON-RPC message such as createTask. From that moment on the client acts as the task’s shepherd: it listens for status events, forwards any follow-up input the remote requests, and finally collects artifacts for downstream use.Think of this as a specialized micro-service that just happens to speak A2A. It might be running in Cloud Run, Lambda, or on a bare VPS. Once it receives a task it owns the heavy lifting—whether that means querying a vector store, fine-tuning a model, or exporting a PDF.Throughout execution, it streams back TaskStatusUpdate and TaskArtifactUpdate events. Crucially, the remote can’t flip the connection: it can ask for more input (status: input-required) from the client, but it never becomes the caller. Only the client initiates JSON-RPC requests. Only the remote updates task state. Either side can terminate the stream if something goes wrong, but responsibility for cleanup (e.g., deleting temp files) lies with the remote.A mental model that works well is “front-of-house vs back-of-house.” The client stays in front, taking new orders and relaying clarifications; the remote is the kitchen, head-down until the dish is ready. (The downsides are true, too: If the remote burns the soufflé, the client still has to smile and comp dessert.)With those lanes marked, we can zoom in on the data structures and security rails that make the hand-off safe.When people first see A2A they often ask, “Wait, doesn’t MCP already cover agent tooling?” Almost—but not quite.A quick map of the layers makes the distinction clear:Inside a single agent (prompt level): Here the agent needs a schema so its model can call a tool. That’s MCP territory: JSON schemas, function names, argument validation, prompt-injection worries. Between agents (network level): As soon as an agent wants to hand the whole task to a peer, MCP has nothing to say about discovery, auth, or streamed artifacts. That gap is what A2A fills with Agent Cards, Tasks, and status events. (More on agentic systems and orchestrators.) Inside your process (workflow level): Frameworks like LangGraph, CrewAI, and AutoGen wire steps together in memory. They’re great for small chains on one machine, but once you need to cross a network boundary—or mix languages and vendors—you step out of their sandbox and into A2A. Think of it like this:MCP is the API contract inside a single micro-service. A2A is the HTTP layer between micro-services. LangGraph et al. are the workflow engine that decides when each micro-service gets called.At scale, most real systems end up using all three. A LangGraph flow might call an internal Python agent (in-process), then hand the job to a third-party finance agent via A2A, and that finance agent might rely on MCP to trigger a spreadsheet-export tool deep inside its own prompt.Keeping these boundaries straight prevents duplicated effort: you don’t bolt custom auth onto every MCP tool, and you don’t overload A2A with prompt schemas it was never meant to parse.With the layers sorted, we can dig into the wire format itself—the Agent Card, the Task state machine, and how messages and artifacts move across the stream.If you can picture buying a book on Amazon, you already understand the four data shapes A2A moves across the wire.Take a look: Your Amazon flow A2A primitive What it contains Product listing page: You browse, see what’s for sale, learn payment options Agent Card (/.well-known/agent.json) Agent ID, description, capabilities list, supported auth method, optional cryptographic signature Order confirmation / invoice: Click “Buy Now,” receive an order ID Task (created via createTask) task_id, input payload, current status Shipping-status pings: “Order packed,” “out for delivery,” “arriving today” Message (TaskStatusUpdateEvent) Role (agent or client), text, optional small files Package on your doorstep: The thing you bought Artifact (TaskArtifactUpdateEvent) Typed payload: TextPart, FilePart, or DataPart Browse the listing: The client fetches the Agent Card once. If the “features” (capabilities) and “checkout” (auth) look good, it proceeds. Place the order: The client sends a createTask JSON-RPC request (like clicking “Buy Now”). The remote agent replies with a task_id, your order number for the job. Watch the tracking emails: The remote streams Messages over Server-Sent Events: pending, processing, maybe input-required (a “signature needed” moment). The client can answer with addInput, just as you’d update delivery instructions. Receive the package: When status flips to completed, Artifact events deliver the payload—PDF report, PNG asset, JSON data, or whatever was promised. Close the loop: If the task fails or is canceled, the remote marks it failed or canceled and no artifacts ship (like Amazon refunding an unfulfilled order).By framing the exchange this way, you can see why A2A keeps the spec minimal: it only defines what every shopper (client) and seller (remote) absolutely need—catalog, order, tracking, delivery—while leaving the “warehouse internals” (model prompts, tool schemas) to MCP or any other mechanism the seller chooses.A2A keeps its on-wire spec thin, but production systems still need three layers of protection and visibility.Signed agent cards: Add a JSON Web Signature (JWS) to the card and publish the signer’s public key. Clients “pin” that key; if anyone swaps the card in transit, signature verification fails and the call is dropped. “Trust me, bro” isn’t a real security policy. Auth choices: Demos usually rely on simple Bearer tokens, but you can level-up to mutual TLS (like a secret handshake without the finger guns) or plug into your company’s single sign-on flow. Runtime policy: A remote agent can reject oversized or risky payloads before its model ever runs. A common guard looks like: “accept only JSON or PNG files under 5 MB.” (This is a lot like Zod schema validation in MCP.) Each status or artifact event already carries timestamps, task_id, and an optional trace header. Wrap your A2A client in an OpenTelemetry middleware and you get end-to-end spans out of the box—no hacking JSON.Pipe those spans into your observability stack, and you should be able to answer, “Which remote agent turned slow at 3 p.m.?” before customers notice.Today, discovery of A2A remotes is DIY:YAML files for internal teams (registry.yaml checked into repo). Vertex AI catalogue: Tick “Publish” and Google hosts the card in a private directory. Emerging public hubs: LangChain and Flowise communities are hacking on npm-style registries, but there’s no global “verified badge” yet.Until those hubs mature, most companies will treat third-party agents like SaaS vendors: security questionnaires, software bill of materials (SBOMs), and limited network scopes.MCP exposes every tool schema in natural-language prompts, so injection and argument-tampering are daily worries.A2A hides all of that behind the remote’s fence; the client sees only high-level tasks and capped artifacts. You still need to trust the remote’s code, but your prompt is never on the table, which eliminates an entire class of exploits.The takeaways for all this: Sign what you publish, pin what you trust, trace every hop, and keep payload limits sane. With those guardrails in place, A2A is no riskier than calling a well-behaved REST service—and a lot more flexible when you add new agents tomorrow.Browse an “Agent Mall.” You open CoolAgentMall.dev, search “tax compliance,” and see live agents with star-ratings and signed cards. One click drops the URL into your private registry—no SDKs, no secrets. Drag-and-drop chains. In Flowise (or n8n) you drag a green Tax-Check (A2A) block after “Generate Invoice,” hit Run, and watch a JSON artifact stream back with the correct jurisdiction codes—zero glue code on your side.~50 vendors have announced support, but most agents still exist in the “DM me for a demo” stage. LangGraph, CrewAI, and AutoGen adapters are solid; Flowise and n8n remain on community betas. No public registry yet—teams rely on registry.yaml files or Vertex AI’s private catalogue. Very few agents ship signed cards, and rate-limits or billing caps are DIY middleware. Performance data is anecdotal; Google’s reference server adds ~30 ms per hop in local tests.A2A is ready for prototypes and internal workflows, but consumer apps and regulated stacks will want extra guardrails until registries and security standards mature.Cross-vendor workflows: Your product-manager agent needs a finance-forecast agent from another company. A2A gives them a shared handshake, auth, and streaming without exposing prompt guts. Security-sensitive black boxes: A vendor won’t share its model prompts but will expose a signed Agent Card. You still get a clean contract plus task-level audit trails. Hybrid stacks & mixed languages: A TypeScript front end can call a Python data-science agent—or the other way around—because only JSON-RPC crosses the wire. Long-running jobs that need progress updates: Build pipelines, PDF rendering, data exports: stream status and artifacts over Server-Sent Events instead of polling a custom REST endpoint.Everything runs in one process: If your whole flow sits inside your orchestrator of choice, stick with the framework’s in-memory calls. Tiny helper scripts: A cron job that pings a lone OpenAI function doesn’t need discovery or streaming; direct API calls are lighter. One-off data pulls: For a weekly export where latency and chatter don’t matter, a plain REST endpoint is easier to monitor. Schema-heavy, prompt-light tools: When the main need is validating complex arguments inside a prompt, MCP alone is the right layer.Reach for A2A when a task crosses a network boundary and you care about trust, live progress, or swapping in new specialist agents later. Skip it when a well-documented API already fits the bill, or your whole stack fits on a Raspberry Pi taped to your monitor.A2A doesn’t add new magic to models. Instead, it adds is a dependable handshake so your existing agents can meet, swap work, and keep a tidy audit trail.The registry story is still DIY and many agents live behind private demos, but the plumbing is solid enough for prototypes and internal workflows today.Less glue, more interesting work. Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

I don’t know about you, but I find myself switching AI models (surprise Gemini release anybody?) and clients (Cursor, Windsurf, Cursor again—no, wait!) pretty often.What frustrates me more than anything is loss of context. I’m constantly explaining to the AI what it needs to know about my problem and trying to get it to act in “my style” of doing things.But what if that context were portable? What if you could ask a question in Claude Desktop, get an answer, and then recall the conversation later in Cursor when coding?In this article, we’ll do just that, building out the tooling together in just a few quick steps. Here’s how the final product will look:Here’s the complete code for this example project so you can clone it. I recommend following along; the goal is that by the end of this tutorial, you’ll be able to create your own lil’ dream server.Why bother with MCP?What you’re seeing above is, as you may have guessed from the 48px title and borderline-absurd keyword optimization of this post, a Model Context Protocol (MCP) server.If you already know all about MCP and want to get to building, feel free to skip this section and head on down to the “Quick Start.” Otherwise, set your stopwatch—here’s the 3-minute primer.1. Why does MCP exist?If you want autonomous AI agents, you’re gonna need tools that enable them to see and interact with the world around them. Unfortunately, connecting AI assistants directly to tools makes for fragile integrations; update the AI model or the API on either side of the tool, and you get broken code.So, how can we build more robust, reusable AI capabilities?One route is through Anthropic’s Model Context Protocol (MCP). It’s a standardized communication layer (based on JSON-RPC) that allows AI clients (like Cursor) to discover and use external capabilities provided by MCP servers.These capabilities include accessing persistent data (Resources), performing various actions in the outside world (Tools), and receiving specific instructions on how to use those resources and tools (Prompts).For a full exploration of MCP's goals, architecture, and potential, you can read my deep dive.That’s great, but…Clients like Cursor and Windsurf already have great AI agents without MCP. So, why do we need more tools?Put simply, client developers can’t build everything. They don’t want to spend all their development hours tweaking web search for every new model, and they’re definitely not out here trying to roll their own Jira integration.MCP lets service providers like GitHub and Notion maintain their own AI integrations, which means higher-quality interactions and less duplicated effort.So, when you opt into using an MCP server, the main benefits you get are future-proofing and portability. You get an enormous ecosystem of plug-and-play tools that you can bring to any chat window that implements the standard.Okay, but…Even if you’re not a developer who needs to wire up their own service API to MCP, there are a lot of benefits to having the knowhow.For me, I’ve noticed that the more I spend time building servers, the less I feel like my entire job is just copy/pasting huge swaths of text between input boxes. I’m automating context, and it makes AI models more personally useful to me.Plus, it feels like a way to put a stake in the ground with the ever-shifting landscape of AI. Tools I build today should keep working even as new models, clients, and services come around.But enough waxing poetic. Time to roll up our sleeves.Quick start: Vibe code?I’m not gonna lie: If you want to just hand the AI agent the MCP docs and tell it what functionalities you want… well, it’s probably gonna work. This is the kind of code AI is especially good at—it’s boilerplatey.Use the MCP Inspector as you go, and keep feeding errors back to the AI. And check out our best Cursor tips to get the most out of the AI agent.Otherwise, here’s the breakdown for those who want to learn how the architecture works, in order to build scalable AI tools. Quick start, for real: Clone, install, buildLet's get the code base ready with these three steps. We won't worry about API keys or client setup yet.Clone the Repository: Get the example code onto your local machine. Install Dependencies: We need the MCP SDK and a few other libraries. Build the Code: Compile the TypeScript source code into runnable JavaScript.You now have the compiled code in the build/ directory.If you want to grab an OpenRouter API key and head on down to “Running the server with real clients,” you’re more than welcome to. The server will work as is.The core loop: Running your first serverBefore we dive into the specific features of this CSS Tutor example, let's nail down the fundamental structure of any MCP server built with the TypeScript SDK and get a minimal version running.Open the main server file: src/index.ts. You'll see these key parts:Imports: The file brings in McpServer (the core server class) and StdioServerTransport (for communication) from the @modelcontextprotocol/sdk. Registration imports: We import registerPrompts, registerResources, and registerTools from other files in the src/ directory. These functions (which we'll explore later) are responsible for telling the server about the specific capabilities we want to give it. Server instantiation: We create the server instance, setting the server's name and version, and initializing empty placeholders for its capabilities. Calling registrations: The imported register* functions are called: These calls populate the server instance with the actual tools, resources, and prompts defined elsewhere. The main function: This async function sets up the communication transport and connects the server: Execution: Finally, main() is called with basic error handling.This structure is the heart of the server. It initializes, registers capabilities, and connects for communication.To make sure this core loop works without needing any external APIs or complex logic yet, let's temporarily modify src/index.ts:Comment out the capability registration calls: Add a simple "hello" tool right before the main function definition: Re-build the code:With just these changes in src/index.ts, we now have a runnable MCP server that offers only one basic tool. It doesn't do much yet besides offer Empire Strikes Back spoilers, but it confirms the core structure and communication setup is working.Debug with the MCP InspectorNow that we have a minimal, runnable server, how do we check if it's actually speaking MCP correctly? We use Anthropic’s MCP Inspector.This command-line utility acts as a basic MCP client. It launches your server process, connects to it via standard I/O (just like Claude Desktop or Cursor would), and shows you the JSON-RPC messages being exchanged.From your project's root directory, run:npx @modelcontextprotocol/inspector node ./build/index.jsnpx ...inspector: Downloads and runs the inspector package. node: The command to execute your server. ./build/index.js: The path to your compiled server entry point.The inspector will start, connect to your server, and begin exchanging messages. If you go to the localhost url, you can interact with it:Connection: You'll see initialize messages confirming the connection. List tools: Use the inspector's interface to ask the server what tools it offers. You should see only our hello_world tool listed. List resources/prompts: If you try to go to the resources or prompts tabs, they should be unclickable, since we commented out their registrations. Call the tool: Use the inspector to call the hello_world tool. You should see the server respond with our custom message.The MCP Inspector is your best friend during development. After each step where you add or modify a capability (tool, resource, or prompt), verify that the server registers it correctly and responds as expected. The Inspector lets you test server functionality without involving a full AI client.Use the buddy system: anywhere you go, the MCP Inspector goes. (^ Live footage of you and the MCP Inspector.)Building out the real capabilitiesNow that we have the basic server running and know how to debug it with the Inspector, let's 1) grab some snacks, and 2) incrementally add the actual CSS Tutor features.Feel free to tweak the capabilities as we go along—all coding skills are welcome!First, let's activate and understand the tool that fetches external information.In src/index.ts, remove the dummy hello_world tool definition we added earlier, and uncomment the line registerTools();. This line calls the function in src/tools/index.ts that registers all our tools.export const server = new McpServer({ name: "css-tutor", version: "0.0.1", capabilities: { prompts: {}, resources: {}, tools: {} } }); // registerPrompts(); // registerResources(); registerTools(); // delete dummy tool async function main() // rest of codeNow, open src/tools/index.ts and find the registerGetLatestUpdatesTool function. This is where the get_latest_updates tool is defined and registered with our server.Inside this file, you'll see a few key things happening:Configuration & safety check: It uses dotenv to load environment variables, specifically looking for OPENROUTER_API_KEY. If the key is missing, it logs a warning and skips registration, preventing the server from offering a tool that can't function. Tool registration: It uses server.tool() to register the get_latest_updates tool. This includes giving it a name, a description for the AI client, and defining its input schema (in this case, {} because it takes no arguments). Core logic (Handler): The core logic is in the asynchronous handler function passed to server.tool(). This handler is responsible for: Activation: Finally, the main registerTools function (at the bottom of the file) ensures that registerGetLatestUpdatesTool() gets called when the server starts up.Compile the changes.npm run buildTo test this tool with the Inspector, the server process needs the API key. Prefix the inspector command:# Example on Linux/macOS OPENROUTER_API_KEY="sk-or-..." npx @modelcontextprotocol/inspector node ./build/index.js(See the project's README.md for Windows examples).Run the MCP Inspector. Use tools/list. You should now see get_latest_updates registered. Try calling the tool via the Inspector—it should return recent CSS news! (As long as you have ~$0.04 in credits from OpenRouter available.) Now, let's activate the components that allow our server to remember information across interactions: the css_knowledge_memory resource and the tools to interact with it.Back in our main file (src/index.ts) uncomment the line registerResources();.Open up src/resources/index.ts and find the registerCssKnowledgeMemoryResource function.Registration: It uses server.resource() to define the css_knowledge_memory resource. This gives it a name, a unique URI (memory://...), read/write permissions, and an asynchronous handler function. Core logic (handler & helpers): The handler function is called when a client wants to read the resource's current state. It uses helper functions (readMemory, writeMemory also defined in this file) which handle the actual file system operations: reading, parsing, validating (with Zod), stringifying, and writing data to the data/memory.json file. This file acts as our persistent memory store. Activation: The main registerResources function (at the bottom of the file) ensures that registerCssKnowledgeMemoryResource() gets called when the server starts.Next, head on over to src/tools/index.ts and look at the registerReadFromMemoryTool and registerWriteToMemoryTool functions within src/tools/index.ts. These provide the actions clients can take related to the memory resource.Registration: Both tools are registered using server.tool(). read_from_memory has no specific input schema, while write_to_memory defines an input schema using Zod ({ concept: z.string(), known: z.boolean() }) to ensure clients send the correct data format for updates. Core logic (handlers): The read_from_memory tool's handler simply calls the imported readMemory() helper from src/resources/index.ts and returns the current state. The write_to_memory tool's handler receives validated arguments ({ concept, known }), then uses both readMemory() and writeMemory() helpers to load the current state, update it based on the input, and save the modified state back to data/memory.json. Activation: The main registerTools function ensures these tool registration functions are called.Compile the changes.npm run buildRun the MCP Inspector.In the Resources tab, you should now see css_knowledge_memory registered. In the tools tab, you should see get_latest_updates (from Step 1) plus the new read_from_memory and write_from_memory tools. Verify the statefulness: Use the Inspector to call read_from_memory, then write_to_memory with some test data (e.g., { "concept": "Grid", "known": true }), and finally call read_from_memory again. Confirm that the data returned by the second read reflects the change you wrote, and check the data/memory.json file directly to see the persisted update.Last step! Time to tell the AI model how to use the tools and resource we’ve provided.In src/index.ts, uncomment the last commented-out line, registerPrompts();.Open src/prompts/index.ts.Registration: The registerCssTutorPrompt function uses server.prompt() to define the css-tutor-guidance prompt, giving it a name and description for the client. It specifies no input schema ({}) because calling this prompt doesn't require any arguments from the client. (We could pass dynamic data here, which can get pretty spicy.) Core Logic (Handler & Content): The handler for this prompt is very simple. It just returns the content of the cssTutorPromptText constant (defined in the same file), which contains the detailed instructions for the AI on how to behave like a CSS tutor using the available tools and memory. Activation: The main registerPrompts function (at the bottom of the file) makes sure registerCssTutorPrompt() gets called when the server starts.Compile the changes.npm run buildRun the MCP Inspector.In the Prompts tab, you should now see css-tutor-guidance registered. Try calling the prompt from the Inspector. It should display the full guidance text defined in cssTutorPromptText.Pretty cool, right? Well, here’s the thing: Even though the server now offers the prompt via MCP, most clients can’t automatically use MCP prompts. Claude will need you to pick it manually, and Cursor can’t even access MCP prompts yet.So, for now, rely on features like Cursor rules to provide instructions on how to use certain MCP servers. Hopefully, we’ll see more MCP adoption soon.Running the server with real clientsWith our server fully built and debugged using the Inspector, it's time to connect it to actual AI clients.If you use the Claude desktop application:Go to Settings. Not the settings near your profile (for some reason?), but the actual app found in the top toolbar. Go to “Developer” → “Edit Config” Add an entry for the css-tutor server: Replace the absolute path (not relative!) and API key with your actual values. Restart Claude Desktop, and connect to the css-tutor server. (See video up top for where to press.)If you use the Cursor editor:Go to Cursor Settings > MCP > Add new global MCP server. Configure the server the exact same as in the Claude steps above. Create prompt rule: Cursor doesn't automatically use the server's MCP prompt, so to create a rule, go to Cursor Settings > Rules and add a new Project Rule with the pasted prompt from the server. Activate the rule: When chatting or generating code (e.g., Cmd+K) in Cursor within this project, you need to @mention the rule, and then Cursor’s agent can use the server as intended without further guidance.Et voilà!You should now be able to recreate the demo video scenario, chatting with one client and then moving to the other whenever you want.Next stepsFirst, pat yourself on the back. New skills are awesome.Second, think about the implications.This CSS Tutor example is simple by design, to help you learn the power of MCP as quickly as possible—but imagine what you could do with some real tools.Maybe you want:More sophisticated state: Replace the JSON file with a proper database (like SQLite or PostgreSQL) for multi-user support or larger datasets. Additional tools: Add tools to search specific documentation sites (like MDN), fetch CSS examples from Codepen, or even analyze a user's local CSS file. Dynamic prompts: Instead of a static prompt, make the guidance adapt based on the user's known concepts stored in the resource. Error handling and rerouting: Add more granular error handling, especially for external API calls, and reroute logic when one service is down. Different Transports: Explore other transport options besides StdioServerTransport if you need network-based communication—e.g., Server-Sent Events (SSE) for streaming.MCP provides a pretty powerful framework to make whatever you want. By building MCP servers, you can make tailored, stateful, and future-proof integrations that connect to any new assistant that speaks the protocol.Happy building! Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

It’s tough being an Android developer these days.Ask two developers to convert a Figma design into working Android code, and one might dive into Jetpack Compose's declarative Kotlin world, while the other might start bridging JavaScript with React Native. Both will spend hours in Android Studio (or Cursor) battling different screen densities, ensuring smooth transitions, and hoping everything looks right across the vast landscape of Android devices, including foldables.But what if we could automate away this tedium? Builder.io's Visual Copilot can transform Figma designs directly into production-ready code that uses Jetpack Compose, React Native, or Flutter. Get proper component structure and responsive layouts that adapt to different screen sizes, regardless of your chosen framework.In this blog post, we'll learn how Visual Copilot converts Figma designs to clean Android UIs in seconds.Visual Copilot is an AI-powered Figma plugin that generates high-quality Android code from Figma files. Supporting Jetpack Compose, React Native, and Flutter, it redirects engineering time away from tedious layout work and towards innovating and polishing the core features of your app.Visual Copilot exports your Figma visuals into polished Android code using your preferred framework. It adapts your design concepts into the specific code structures and conventions required by each tech stack.No matter which Android approach you choose, Visual Copilot interprets your Figma layout and manages the intricate conversion details. Achieving visual consistency between your original Figma files and the final UI components is now faster than ever.Your Android app needs to shine across a universe of devices—phones, tablets, foldables, and more. Visual Copilot tackles the challenge of varying screen densities and aspect ratios, making sure your UI reflows intelligently on any device. Forget manually chaining Compose modifiers or fine-tuning React Native's Flexbox properties for every possible screen configuration—Visual Copilot handles the complex layout adaptations for you.Visual Copilot can code in many major languages. It excels at generating native Android UIs with Kotlin and Jetpack Compose, but it’s just as adept at producing code for React Native. Its capabilities naturally extend to the web, supporting popular frameworks like React, Vue, and Angular, plus styling libraries such as Tailwind CSS.Therefore, whether your goal is a purely native Android experience crafted with Compose, a cross-platform app using React Native or Flutter, or even a complementary iOS app using SwiftUI, Visual Copilot provides a unified way to translate your Figma designs for each target.After Visual Copilot processes your design, you receive well-structured code specific to your Android target—be it composables or components. Planning to integrate with Android ViewModels or fetch data from APIs? Need an on-brand delete modal? No problem. The output code provides a robust starting point for further development and enhancement.Visual Copilot enables rapid iteration cycles. You can visualize your Figma adjustments in Android Studio Previews or on an emulator/device with remarkable speed. This makes it ideal for quick UI experimentation and refining concepts.The Visual Copilot plugin includes a robust command-line interface that will export Figma visuals directly into your Android Studio project or any other IDE. One unified command orchestrates the entire process: fetching the design, converting it to framework-specific code, and integrating it automatically into your source tree.For developers preferring the command line, particularly those leveraging AI-enhanced IDEs like Cursor or Windsurf, the design-to-code transition feels effortless. Embedding Figma layouts into your Android application becomes a fluid, automated step in your workflow. You can concentrate on core application logic while the CLI manages the initial UI code generation, dramatically shortening the cycle from visual concept to interactive Android experience. Visual Copilot uses a three-part workflow to transform Figma layouts into clean code. Initially, our custom AI engine deciphers your Figma file, understanding the design structure (even without auto-layout constraints). Then the Mitosis compilation engine converts this understanding into framework-specific code. Finally, an advanced language model polishes the generated code, ensuring it adheres to your project's established conventions and coding best practices. Building sophisticated UIs involves more than just surface-level layout; it requires integrating various facets of your app. Visual Copilot comprehends your entire project:Design system harmony: Effective Android interfaces leverage established visual systems, encompassing everything from core Material components to bespoke themes, font choices, and the design tokens that ensure brand consistency across the application.Code architecture: High-quality development adheres to proven architectural principles governing how code is structured, how it is organized, and how naming practices are enforced.Business logic: Your UI needs to seamlessly connect with your app's core—working with state management libraries, handling data flows, and integrating with your APIs and business rules.This multi-dimensional perspective highlights that successful Android UIs are not merely collections of isolated elements; they are integrated systems reflecting team conventions and fitting seamlessly into the application's operational logic.Getting started with Visual Copilot is straightforward:Open the Visual Copilot plugin in Figma Select the design elements you want to convert Click "Export Design" Copy the generated command to your terminal Follow the prompts to customize your Android code, and watch as it's automatically added to your projectIn this video, we export a Figma design for a feature-rich chat UI. Visual Copilot translates the design in seconds into a fully responsive iOS experience. There's no need to write Compose code by hand—the plugin delivers a seamless user experience right out of the box.Visual Copilot turbocharges the path from Figma visuals to deployable Android UIs while supporting all the major framework choices: Jetpack Compose, React Native, and Flutter. Acting as an intelligent translator between design specifications and developer environments, it renders designs into high-fidelity UIs that are optimized, interactive, and follow best practices.This contemporary design-to-code methodology complements the declarative nature of modern Android development. It frees designers to innovate on user experience, confident that the visual intent will be accurately captured. Simultaneously, it empowers developers to construct native Android applications with significantly greater velocity, reducing time spent on manual UI translation.Check out our docs to learn more about Visual Copilot's capabilities for mobile UI development and how to use it in your workflow. Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

What if Figma was built today, AI-first? What if the precision of a design tool and the power of a full-stack development platform were engineered from the ground up with generative AI at their core?Today, we're thrilled to announce Visual Editor 3.0—bridging the gap between designers and developers with a platform that transforms how digital products are created, from concept to production-ready code.Prompt and build interactive apps with Figma-like precisionWe've completely redesigned our UI to feel like Figma, but with capabilities that go beyond design. You can generate fully interactive applications using natural language prompts while maintaining the pixel-perfect precision and control designers expect.Describe what you want to build, and Visual Editor AI creates functional components and layouts that you can then fine-tune with familiar design controls. Unlike many AI tools, Visual Editor is designed for enterprise teams, automatically bringing in context from your existing codebase and design system, so no matter who creates the experience, it's consistently on-brand, easy to maintain, and instantly ready for production.Everyone on your team—from designers and developers to product managers and marketers—contributes directly to the building process without technical barriers.Make Figma designs functional without developer handoffRemember those painful design-to-development handoffs that used to take days? We've made them a thing of the past. Visual Editor integrates so seamlessly with Figma that you can copy and paste designs directly into your project without developer involvement. In seconds, you can:Bring Figma designs directly into our platformTransform those static mockups into interactive applicationsKeep everything in perfect sync as designs evolveThis means designers can keep working in Figma while their creations automatically become functional code that developers can immediately use.Import any website UI for inspiration and iterationWhy start from scratch when you've found a website with elements you love? Our new web import feature makes it incredibly easy to:Grab UI from anywhere and drop it directly into your Builder editorPick out specific components from any webpageUse these references to jumpstart your own designsYou can capture elements from anywhere on the web—even from password-protected pages or local development environments. Something generic crawlers can't handle.Generate designs and UI that actually match your brandUnlike generic AI tools, Visual Editor's on-brand generation understands your visual identity:It creates designs using your exact color palette and typography Generates UI that follows your established patterns and components Maintains brand consistency across everything it createsAnd have you seen the premium templates from 21st.dev? You can access them directly and instantly adapt them to match your brand. These professionally designed templates give you excellent starting points that Visual Editor can customize to fit your specific visual language.Seamless codebase integration with your existing tech stackFor developers, Visual Editor 3.0 introduces seamless codebase integration through our new CLI that:Analyzes your codebase to understand your tech stack (React, Vue, Angular, etc.) Maps design elements to your existing components Generates code that follows your exact coding patterns Places files in the appropriate locations within your project structureEverything you create goes right into your code, reusing your components and maintaining your established patterns.Two practical workflows in a single platformVisual Editor 3.0 offers two complementary approaches to bringing your designs to life:Develop workflow You leverage AI to design in our Figma-like editor or import from Figma/the webYou use Visual Editor AI to generate and refine interactive UIsYour team collaborates in real time with proper access controlsYou integrate with your codebase via our CLIPublish workflow When you leverage our CMS capabilities, you can:Use AI to generate on-brand content variations for personalization or A/B testing Make changes that go live instantly through our API Update sections of your site or app without full deployments or pull requests Enable marketing and content teams to update without developer involvementThink of Visual Editor as a flexible CMS layer on top of Lovable or Bolt that allows rapid iteration while maintaining deep integration with your codebase.The future of AI-powered visual developmentVisual Editor 3.0 combines the best visual editing experience, AI-powered design generation, and seamless code integration in one cohesive platform. It's built for how modern teams actually work—collaboratively, iteratively, and across disciplines.Get started with Visual Copilot 3.0 today → Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

The AI revolution in software development is a double-edged sword. Lean too heavily on LLMs without a thorough understanding of your tech stack, and you veer into vibe-coding. But stubbornly resist all AI tooling, and you'll be left in the dust while your colleagues 10x your output.The fact is, if you aren't using an AI-powered code editor like Cursor today, then you're not moving as fast as you could, or working as smart as possible.This guide will take you from zero to hero using Cursor. Follow these steps and you'll turbocharge your efficiency and skills as you write code. We'll specifically focus on the ideal Cursor AI setup for working with React, Next.js, and Tailwind CSS, but many of these steps apply to any tech stack.Tweaking the Cursor AI settingsFollow this checklist and you'll get a near-perfect Cursor AI setup without reading any further: Settings + Rules Press the gear wheel in the top right corner to open the Cursor settings. Then enable the following: Open the Features Tab and confirm these settings: Cursor Tab Enable Cursor Tab Why? Core feature. Gives you turbocharged tab completion powers. Enable Suggestions in Comments Why? Lets Cursor Tab write comments and documentation. Enable Auto Import Why? Automatically adds required import statements. Big time saver. Chat Set default new chat mode to Agent Why? Ideal for complex tasks and code generation. Enable Auto-refresh chats Why? Keeps the chat view updated automatically as context changes. Enable Auto-scroll to bottom Why? Ensures you always see the latest AI messages in the chat window. Enable Auto-apply to files outside context in edit mode Why? Allows AI edits to affect relevant files not explicitly added via @. super useful for refactoring. Enable auto-run mode Why? Allows the AI to execute certain actions (like tool calls) without explicit confirmation. Massive efficiency gains. Inside auto-run, enable Delete file protection, MCP tools protection, Dot files protection and Outside workspace protection Why? Adds sane guardrails to prevent accidental destructive actions during auto-run operations. Enable Large context Why? Allows the AI to consider more code and information, improving understanding for complex tasks. Enable Iterate on lints Why? Enables the AI to automatically attempt fixes for linter errors in generated/edited code. Enable Web Search Tool Why? Grants the AI the ability to search the web for current information or documentation. Codebase Indexing Enable Index new folders by default Why? Ensures new code added to the project is automatically included in the AI's context. Set Git graph files relationships to default Why? Uses Git history to help the AI understand file relationships and provide more relevant context. Docs Click + Add new doc and add this link to the official React docs Why? Makes the official React documentation readily available context for the AI. Click + Add new doc and add this link to the official Next.js docs Why? Makes the official Next.js documentation readily available context for the AI. Click + Add new doc and add this link to the official Tailwind CSS docs Why? Makes the official Tailwind CSS documentation readily available context for the AI. Editor Enable Show chat/edit tooltip Why? Provides visual hints when AI chat or edit actions are available. Enable Auto select for Ctrl/Cmd + K input Why? Automatically selects the prompt text in the Cmd+K bar for easier modification. Enable Use themed diff backgrounds Why? Improves readability of AI-generated changes. Terminal Enable Terminal hint Why? Provides AI-powered suggestions directly in the terminal. Enable Show terminal hover hint Why? Displays hints when hovering over relevant terminal content. Open the Models Tab Why? If you’re not on a Cursor Pro account and you have your own access to AI models (Gemini, Claude 3.5 Sonnet, etc), add your API keys here. Note: Bringing your own models to Cursor can get expensive fast. If you are going to be a Cursor power-user, it’s often much cheaper to pay for Cursor Pro. Open the Rules Tab Click + Add new rule Why? Begins the process of creating a custom set of guidelines for the AI. Copy and paste this comprehensive rule for React, Next.js, and Tailwind CSS Why? Provides the AI with specific, detailed instructions for generating code consistent with React, Next.js, and Tailwind best practices. Notepads Close Cursor Settings. Now, press the + button in the "Notepads" section in Cursor's sidebar to add a new notepad (or use the command palette). Create a notepad and paste in these React component development standards Why? Stores React standards for easy AI reference. Create a second notepad and paste in these Next.js development standards Why? Stores Next.js standards (like App Router patterns) for easy AI reference. Create a third notepad and paste in these Tailwind CSS usage guidelines Why? Stores Tailwind CSS guidelines for easy AI reference. Add ESLint Make sure you have ESLint installed and enabled Why? ESLint identifies code quality issues; enabling Iterate on lints allows Cursor to automatically fix these, improving code quality. Use Visual Editor CLI Use Cursor + Builder.io's Visual Editor CLI to add professional UI designs Why? Go from Figma design to polished UIs without leaving Cursor. Provides the missing link between design and development. Dialing in Cursor AI's settings and featuresIf you followed the above steps, then you've got yourself a pretty solid Cursor setup already. Now let's do a deep dive.First, we'll explore how to use the code editor’s core settings and features to supercharge your workflow, then we'll complete the final steps for our perfect Cursor AI setup.If you want to jump ahead and finish your developer environment for React and Next.js, then skip down to the section on “Setting up Cursor’s test-based code generation loops”.Cursor offers tab completion, which functions like a supercharged autocomplete for your code. It generates intelligent code suggestions and is capable of performing multi-line edits and even taking your recent changes or linter squiggles into account.You can enable it in Cursor's settings under Features > Tab Completion, where you can also customize options, such as disabling it for comments. To use it, simply press Tab to accept a suggestion and move to the next edit, Esc to dismiss it, or Ctrl/⌘ → to accept it one word at a time.Cursor Chat is an AI assistant right in your sidebar, ready to discuss your code base in plain, natural language. You can ask it questions about your project, request multi-file code generation, get help understanding the entire codebase, or even get assistance with terminal commands.There isn't much setup required; you can access it using the shortcut ⌘+L (Mac) or Ctrl+L (Windows/Linux). Once open, type your prompt in natural language, select 'Agent' mode for complex coding tasks or 'Ask' for queries, and let the Cursor AI assist you with its powerful code generation functionality. The chat can provide helpful code suggestions and perform smart rewrites of selected code blocks based on the provided context.For example, when working with React, Next.js, and Tailwind CSS:Agent Mode example: You could tell the Agent in natural language: "Create a new reusable React component called PrimaryButton. It should accept children and standard button props. Style it using Tailwind classes to have a blue background, white text, padding, rounded corners, and a subtle hover effect. Generate code for this component."Ask Mode example: You might ask using natural language: "Explain how data fetching works within the Server Component in app/posts/[id]/page.tsx to retrieve data for a specific blog post. Also, what's the best way to apply conditional Tailwind classes to the post's title based on its published status? Examine the relevant code."Cursor Rules lets you give persistent instructions to the AI, such as setting coding standards or project-specific guidelines, so you don't have to repeat yourself. Think of them as sticky notes for the AI that apply automatically based on context or when you manually invoke them, enhancing codebase understanding.You can create project-specific rules by adding .mdc files in a .cursor/rules folder within your project or setting global rules in Cursor's settings. To use a rule, you can configure it to apply automatically (e.g., always or when certain files are involved) or invoke it explicitly using @ruleName when you generate code.We already linked to an example rule for React, Next.js, and Tailwind CSS. If you are looking for more, check out cursor.directory, where community members submit their best Cursor rules. It’s a great resource.The @docs feature in Cursor allows you to enhance the AI's capability by providing external documentation for the libraries or frameworks you use. Cursor downloads and indexes these documents so that the AI can reference them directly when answering your questions or writing code.Setting it up is straightforward: navigate to Settings > Features > Docs and add the URLs for the documentation you wish to include. Then, when you're chatting with the AI, just mention @docs in your prompt to instruct it to consult that specific documentation for better, more context-aware answers regarding relevant code.Here are some examples relevant to the React, Next.js, and Tailwind documentation that we added earlier:React hook query: "Using @docs, explain the differences between useMemo and useCallback in React and provide an example use case for each within our component library."Next.js API route: "Consult the @docs for Next.js and show me how to create a dynamic API route that accepts a slug parameter and fetches corresponding data."Tailwind layout: "How can I create a responsive three-column grid layout using Tailwind? Please reference the @docs for the best practices."Cursor's @web feature allows the AI to search the internet directly from the chat, bringing real-time information into your development workflow. This is incredibly handy when you need the absolute latest information, like finding a new library version or checking recent API changes that might not be indexed in documentation yet.To enable it, go to Settings > Features > Chat and ensure the Web Search Tool is toggled on. To use it, type @web followed by your query in the chat, prompting the AI to perform a web search to answer your question.Here are some examples relevant to a React/Next.js/Tailwind stack:Latest Version Check: "Use @web to find the latest stable version of the framer-motion library and check its compatibility with React 18." New Feature Research: "Are there any new experimental features in the latest Next.js canary release related to server components? Search using @web." Tailwind Plugin Discovery: "I need a Tailwind plugin for creating complex gradients. Search with @web to find popular options and their usage."Cursor offers Notepads (currently in Beta), which are shareable, global documents within the editor where you can store project context, guidelines, or code snippets. They go beyond simple rules by allowing you to attach files and combine different pieces of information, creating reusable resources for your team or personal workflow.You can create a new notepad by clicking the + button in the Notepads section of the sidebar and giving it a name. To use its contents in chat or other AI interactions, simply reference it using the @ symbol followed by the notepad's name (e.g., @my-react-patterns).We’ve already linked to three notepads for React components, Next.js’s App Router pattern, and Tailwind CSS.Sometimes the code generated by Cursor introduces small errors. Cursor's automatic linting resolution helps keep your code clean by having the AI try to fix any lint errors it might introduce after making changes or generating new code. It works by automatically checking the output of your installed linter (like ESLint) right after the AI agent modifies your code.To set it up, ensure you have a linter like ESLint configured for your project, then enable the Iterate on Lints option in the Chat settings (Settings > Features > Chat). When you use Agent mode, Cursor AI will automatically attempt to resolve any new lint warnings or errors that appear after its initial code generation or modification of the new code. It can clean up your existing code across multiple lines and files as well.Here are some examples relevant to a React/Next.js/Tailwind stack:React hook rules: If the Agent generates code that violates the rules of hooks (e.g., calling useState inside a condition), ESLint will flag it, and Cursor will attempt to refactor the component to use the hook correctly at the top level. Unused imports/variables: The Agent may add an import for a utility function, but then not use it in the final code. The linter flags the unused import, and Cursor automatically removes the unnecessary line. TypeScript type errors: If the Agent generates TypeScript code that causes a type mismatch detected by the TypeScript ESLint plugin, Cursor will attempt to adjust the types or the code logic to resolve the error.You can leverage Cursor's iterative capabilities to follow a Test-Driven Development (TDD) workflow, where you write tests before the actual code implementation. Start by instructing the AI agent to generate test cases for the specific function or component you intend to build, ensuring that you outline the expected inputs and outputs clearly.Once the tests are written (and failing, as expected in TDD), prompt the agent to write the implementation code specifically designed to pass those tests and to iterate until all the tests pass. If the initial code doesn't pass all the tests, the agent’s smart rewrites will refine the code until all tests transition from red (failing) to green (passing).Here are some examples relevant to a React + Next.js + Tailwind stack (hot tip: you could also save a general TDD pattern as a notepad):Utility Function TDD: "Write Jest tests for a utility function formatCurrency(value: number) that takes a number and returns a formatted currency string (e.g., $1,234.56). Cover cases for positive numbers, zero, and negative numbers." Then, after reviewing the tests: "Now, write the formatCurrency function to make these tests pass. Iterate until all tests are green."React Component Interaction Test: "Using React Testing Library, write tests for a component. It should display an initial count of 0, increment when an 'Increment' button is clicked, and decrement when a 'Decrement' button is clicked." Followed by: "Generate the component implementation, including basic Tailwind styling for the buttons, to satisfy these tests. Iterate until all tests are green."API Route Logic Test: "Write tests for a Next.js API route /api/validateEmail that accepts a POST request with an email field. The tests should check if it returns a 200 status for valid emails and a 400 status for invalid emails according to a basic regex pattern." Then: "Implement the /api/validateEmail API route handler to pass the tests you just wrote. Iterate until all tests are green."The Model Context Protocol (MCP) acts like a plugin system for Cursor, allowing you to connect external tools and data sources directly to the AI agent. This deep integration enhances Cursor AI's capabilities, enabling it to interact with databases, APIs, or other services without the need to supply information manually.You configure MCP servers by creating a mcp.json file either globally in ~/.cursor/ or per-project in .cursor/, specifying how Cursor should connect to your tools (such as a command to run or an SSE endpoint). Once set up, the Agent can automatically detect and use relevant MCP tools, or you can prompt it directly to take advantage of these integrations for specific tasks.Here are some examples relevant to a React/Next.js/Tailwind stack:Database Schema Integration: Configure an MCP server that connects to your project's database. You could then ask the Agent: "Using the database MCP tool, fetch the schema for the users table and generate a Next.js API route (/api/users/[id]) to retrieve a user by ID, including appropriate TypeScript types based on the schema." Headless CMS Connection: Set up an MCP tool for your headless CMS (like Contentful or Sanity). You could then prompt: "Use the CMS MCP tool to fetch the content model for blogPost and generate the getStaticProps function in pages/blog/[slug].js to fetch and pass the necessary post data."Visit cursor.directory for a large list of community-created Cursor + MCP integrations.Use Builder.io’s Visual Editor to create professional UIsBuilder.io’s Visual Editor plugin now features a robust CLI workflow. This allows you to export Figma designs directly into your project through your preferred code editor. A single command automates the entire process —downloading your design, converting it into code, and integrating it into your codebase.If you prefer terminal work, and particularly if you want to master AI-powered code editors like Cursor, transforming Figma designs into code can easily integrate into this development workflow.By diligently configuring Cursor AI's settings and leveraging its powerful features like Agent mode, Rules, @docs, @web, and Notepads, you've established a highly optimized AI-powered code editor tailored for React and Next.js development. This setup is designed to significantly boost your software development speed, streamline complex tasks, enhance coding efficiency, and help maintain high-quality standards for new code.Remember that mastering AI assistance is an ongoing process. Refine your prompts continually, commit your code changes often, try new AI models, use the right context, and adapt these techniques to your specific projects. Embrace the power of AI as a collaborative partner, and you'll unlock new levels of productivity and coding proficiency.Further Reading on AI code editors Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

Chaining endless prompts to an AI model only goes so far.Eventually, the Large Language Model (LLM) drifts off‑script, and your token budget gets torched. If each tweak feels like stacking one more block on a wobbly tower, you're not alone—and you're not stuck.Fine‑tuning lets you teach any LLM your rules, tone, and tool‑calling smarts directly, so you and your users can spend less time wrangling words.In this guide, we'll see why prompt‑engineering hits its limits, when to level up to fine‑tuning, and a step‑by‑step path to doing it without burning daylight or dollars.But before we dig into all that, let's first slot fine-tuning into the broader AI model lifecycle.Model lifecycle: From pre-training to productionAs a whole, you can think of the AI model lifecycle like crafting the perfect coffee order.Pre-training is like the barista learning all the possible combinations of ingredients. Fine-tuning is when you teach that barista your specific preferences—like asking for a half-sweet oat milk latte with a dash of cinnamon—so it always nails your order without a long explanation. Prompting is the quick, daily reminder—like saying 'the usual' to your barista. Deployment is when your perfectly tuned order is available on the menu, ready to go whenever you walk in.But enough with coffee metaphors. Let's dig into actual details. Pre‑training (the giant brain dump)Large language models (LLMs) start life trained on massive, diverse text corpora—everything from Wikipedia articles to social media threads. This foundation gives them world knowledge and language patterns, but it's very "one‑size‑fits‑all."When you ask for ultra‑specific behavior (say, always output valid JSON or follow our company's naming conventions), pre‑training alone often falls short.Fine‑tuning (your secret sauce)Fine‑tuning, also known as post-training, is the phase where you take that generic model and teach it your rules, voice, and quirks. You supply examples—prompt/response pairs that reflect exactly how you want the AI to behave.Suddenly, your model isn't just a wandering generalist; it's a specialist trained on your playbook, ready to handle your API's function‑calling pattern or spit out markdown‑formatted release notes on demand.This is also how a company like OpenAI gets generic GPT to become the model you converse with in ChatGPT. It has mannerisms, instruction following, tool calling, and more that’s put into it at the fine-tuning stage.Prompting (day‑to‑day interaction)Even after fine‑tuning, prompting remains crucial. But the game changes: instead of wrestling with giant "system" instructions to dictate core behavior, you focus on two leaner types of prompts:The user/task prompt: This is the specific input or question from your user or application logic at runtime (e.g., "Summarize this meeting transcript"). The context snippet (optional): You might still inject small, dynamic pieces of context alongside the user prompt—perhaps a user ID, a relevant document chunk retrieved via retrieval-augmented generation (RAG), or a specific output constraint for this particular request.Your runtime prompts become more focused and efficient because the heavy lifting—the core tone, the default format, and the common edge‑case handling—is already baked into the model weights from fine-tuning.Deployment (Shipping to users)Finally, you package your fine‑tuned model behind an API endpoint or inference server—just like any other microservice.From here, you monitor cost, scale to meet traffic, and iterate on your dataset over time. Because the model now reliably produces the format you need (JSON objects, code snippets, polite customer responses), your frontend code can stay simple, and your error logs stay clean.Benefits of fine-tuningAlthough fine-tuning simplifies prompting and deployment, it represents a bigger commitment than just tweaking prompts or using techniques like RAG. It's crucial to fine-tune only when the advantages truly outweigh the effort.So, what specific benefits make taking the fine-tuning plunge worth it?You can save your token budgetImagine swapping a 5,000‑token system prompt for a model that already "gets" your style. Instead of rehashing instructions every call, your fine‑tuned model returns spot‑on results with half the context.That means faster responses, lower costs, and fewer "Oops, I lost the schema again" moments. You can guarantee tone and output formatWant your AI to always reply in recipe blog anecdote style? Or spit out valid JSON without exceptions?When you fine‑tune, you teach the model those rules once and for all. No more endless prompt tweaks—your model simply "knows" the drill.You can bake in edge-case fixesWhile LLMs can often generalize well to unexpected inputs—better than rigid if/else logic—they also can behave very strangely when presented with user inputs you just never thought to document. Rather than patching each new edge case by expanding your already lengthy prompt, include a handful of these real‑world problematic examples in your fine‑tuning training set. By learning the patterns in these examples, the fine-tuned model doesn't just memorize fixes; it generalizes.It gets better at handling similar, related quirks gracefully—so your app stays robust, and you spend less time firefighting weird model outputs.You can teach your model to ~~fish~~ call your toolsFunction‑calling can transform a chatbot into an action‑taking agent. Fine‑tuning lets you bake your API signatures directly into the model's behavior.Instead of you injecting a function schema with every request, your model will know when and how to hit each endpoint, turning chat into real interactions. (By the way, this is also how the Model Context Protocol (MCP) works with LLMs for tool-calling. Major providers fine-tune their foundation models with the ability to follow MCP standards, and then we as developers benefit from not having to teach as much boilerplate to models when we want them to use our tools.)You can truly embrace the microservice mindsetThe AI world is shifting from monolithic "one‑model‑to‑rule‑them‑all" to fleets of specialized models.Fine‑tuning empowers you to spin up tiny, purpose‑built microservices: one model for each subject area. Each model can run on smaller infrastructure, scale independently, and get the job done faster—and cheaper—than any giant, catch‑all model.This is also true of training models from scratch, which we've done at Builder to handle design-to-code transformations 1000x more efficiently than leading LLMs. But that’s a bit more overhead than fine-tuning, and beyond the scope of this article.When to fine‑tuneFine‑tuning is powerful, but it's much faster to iterate with models at the prompt level. So, it shouldn't be the first tool you reach for. Before you spin up GPUs or sign up for an expensive API plan, watch out for these signals that it's actually time to level up.Red flags you've hit a ceilingSystem prompts spiraling in length: If your "always-do-this" instructions have ballooned into a novella, your prompts are compensating for missing model behaviors. Token budget on fire: When you're shelling out hundreds or thousands of extra tokens just to coax the right output, costs and latency start to bite. Diminishing returns on tweaks: Tiny changes to your prompt no longer yield meaningful improvements, and you're stuck in an endless "prompt permagrind." Unpredictable edge‑case handling: You keep discovering new user inputs that the model trips over, leading to a growing backlog of prompt hacks.Quick prompt‑level hacks to try firstEven if the above are true, try some of these prompt engineering hacks first:Few‑shot examples: Show 2–3 high‑quality input/output pairs inline. Prompt chaining: Break complex tasks into smaller, sequential prompts. ("Write my chapter" → "Write the first scene," "write the second scene," etc.) Function‑calling hooks: Use built‑in tools or APIs so the model can offload logic instead of fabricating it.If these still leave you juggling prompts, get your helmet on, because it's time to pilot a fine‑tune.A quick note on RAG vs. fine‑tuningRetrieval-augmented generation (RAG), which uses embeddings to "augment" user prompts in real-time with relevant information from a vector database, often gets conflated with fine-tuning.Use RAG when you need up‑to‑the‑minute facts or your data changes frequently (e.g., product docs, news feeds). Fine‑tune when you need consistent tone, strict output formats, or baked‑in behavior that you can't reliably prompt every time.Fine-tuning 101: How it works in theoryBefore jumping into adapters and CLI flags, it helps to unpack what "fine‑tuning" really means.1. Pre-trained weights: The model's starting brainThink of a pre-trained LLM like a massive network of interconnected nodes, kind of like a super-complex flowchart. The connections between these nodes have associated numerical values called weights or parameters. Today's models have billions of weights.During pre-training (that "giant brain dump" phase), the model learns initial values for all these weights by processing vast amounts of text. These weights essentially encode all the general knowledge, grammar rules, and common sense the model learned. They represent the patterns the model identified in the pre-training data. So, you start with a model that's knowledgeable but generic. Our Basic Brad Model's weights make it good at general tasks, but they aren't specifically configured for your unique requirements, like adopting a specific brand voice or generating code for your internal libraries.2. Gradient descent on your examplesFine‑tuning is running additional training steps on that base model, using your own curated prompt‑response pairs.These pairs act as specific lessons for the model. Often, they're formatted as JSON objects, like this:// Fine-tuning for recipe blog style { "prompt": "Explain the CSS box model.", "response": "Ah, the CSS box model! It reminds me of my grandmother's treasured cedar chest. You see, just like her chest had the contents, padding around the contents, the sturdy wooden border, and the space it occupied in the attic (the margin), every HTML element has its content, padding, border, and margin. It's simply divine!" } // Fine-tuning to talk like a pirate { "prompt": "User inquiry: Status of ticket #SUPPORT-123?", "response": "Arrr, matey! Cap'n says ticket #SUPPORT-123 be battlin' the kraken in the depths o' the backlog. We be givin' it a broadside o' attention soon! Hang tight, ye scurvy dog!" }Each example shows the model the "correct" output for a given input, based on your needs. If the model's prediction (based on its current weights) differs from your desired output, a process called backpropagation calculates how much to nudge the model's parameters in a direction that reduces that error for that specific example.Repeating this over many such examples gradually adjusts the weights to better reflect your specific patterns.3. Full fine-tuning vs. adaptersThere are two big ways to teach an LLM new tricks:Full fine-tuning: This is the "oh my god we have bedbugs" method. Every single weight in the model gets updated—billions of dials turn—so you can deeply customize the model. The catch? You'll need serious hardware (think racks of GPUs), lots of time, a mountain of storage, and sometimes even special licensing. Unless you're running an AI lab or building the Next Big Model, this is probably overkill. Parameter-efficient tuning (adapters): Instead of changing the whole model, you freeze its main weights and train a tiny set of new parameters—special adapter layers—that slot in and nudge the model where you want. Techniques like LoRA or prefix-tuning mean your adapter might be only a few megabytes, not tens of gigabytes.Bottom line: For most web and app devs, adapters give you 90% of the usefulness of full fine-tuning at a fraction of the cost, time, and stress. You get a custom model that fits your use case without needing to issue stock options to your GPU provider.4. Serving your new skills: Deployment in the real worldOnce training is done, it's time to put your new "specialist" model to work. There are basically two ways to serve up your smarts:Wrap-and-go: Most modern frameworks let you "snap" your adapter on top of the base model at runtime—think of it like plugging in a brain upgrade cartridge. Your app sends prompts to the base model, the adapter layers quietly do their magic, and voilà: tailored output on demand. Merge to a single checkpoint: If you want a single file (maybe to simplify hosting or handoff), you can merge the adapter's tweaks directly into the base model's weights. Now anyone with the file can deploy your fine-tuned genius, no assembly required.The end resultYour fine-tuned model now "understands" your niche. It follows your examples and rules—almost like it's read your team's style guide or pored over your API docs. All those gradient tweaks and adapter notes are now baked in, so your model serves custom responses at scale with minimal fuss or fiddling.The upshot? You get a specialist model that feels like it's part of your team—not some clueless chatbot needing endless reminders every time you hit send.Fine-tuning best practicesAll the above might sound a bit like magic, but to be honest, that's because we don't fully understand LLMs yet. The best we can do is teach them like we learn: by example after example until they generalize the knowledge.Luckily, we can study and implement "model pedagogy" well. Here's how best to teach your model some new skills.The three pillarsFine-tuning boils down to three foundational pillars—and a mindset that puts data quality front and center. Nail these, and you'll set yourself up for a smooth, repeatable fine‑tuning process.A battle‑tested system prompt. Craft a concise "instruction" that anchors the model's behavior. This is your north star—think of it as the mini spec the model refers to on every run. A curated dataset. Hand‑pick examples that showcase the exact input/output patterns you want. Quality over quantity: dozens of crisp, on‑point samples beat hundreds of meh ones. Clear evaluation metrics. Define how you'll judge success before you start. Token usage? Output validity (JSON, Markdown)? Human ratings? Having objective checkpoints keeps your fine‑tune from veering off track. Adopt a data‑centric mindsetTreat your training set like production code: review it, test it, version it.Audit for bias or noise: Scrub out examples that contradict your style or introduce unwanted behavior. Balance edge cases: If 10% of your users trigger a weird bug, include those examples—but don't let them dominate your dataset. Iterate, don't hoard: It's tempting to mash together every example you have. Instead, start small (20–50 best examples), spot failure modes, then add just the data needed to fix them.Tune your hyperparametersEven if you're using adapters and not retraining the whole model, you'll still need to set a few "knobs and dials" that control how your fine-tuning job learns.Don't let the jargon scare you—here's what matters:Learning rate is how big each step is when the model updates its weights. If it's too high, the model might "forget" everything it learned from pre-training or bounce around wildly. Too low, and it might barely budge from the starting point and miss your custom behaviors. Most tools have decent defaults, but if your model seems to overfit (memorize your small dataset), try lowering it. Batch size is how many prompt-response pairs your model learns from at once. Bigger batches make training more stable but use more memory. Sequence length is the maximum length of your input/output—that's usually limited by the model's context window. Trim or chunk long examples as needed so you don't run out of memory or context. Number of epochs is how many times the model sees your entire dataset. Usually, 3–5 passes is enough. Too many, and the model just memorizes your examples instead of learning the general pattern.You usually don't need to obsess over these details for your first run—just use the given platform's suggested defaults, then tweak if you see problems. Most modern frameworks and cloud platforms can even tune these settings automatically if you want.Sanity‑check your modelBefore you call it "done," put your fine-tuned model through a few real-world checkups. Don't worry—it's less "PhD thesis defense" and more "smoke test," but these steps will save you headaches down the line:Script a mini test suite: Run your 10–20 most common or important prompts through the model and make sure you're getting the answers (and format, and tone) you actually want. This is like unit testing but for your AI. Keep an eye on the training curve: Your training curve is a chart showing "loss," or how far off your model's answers are from your ideal ones, at each step of training. If your loss just drops smoothly, that's great. If it suddenly spikes, flatlines, or ping-pongs all over the place, something's probably off—maybe a weird example in your data or a hyperparameter gone rogue. Let humans try it: Ask teammates—or, even better, real users—to poke around and see if the model does anything unexpected or delightful. Humans spot edge cases robots miss. Humans are cool, too.Treat this like a pre-flight checklist. A few minutes here can save you hours of debugging once your "custom genius" hits production.Ready to try fine-tuning?Here's a few solid options to spin up your first fine-tune—whether you want no-code simplicity or full SDK superpowers.For beginners:OpenAI's beginner-friendly managed platform lets you upload JSONL datasets and kick off fine-tuning jobs with a single CLI command or through their web UI. Despite being limited to OpenAI models and pricing, they're a great option to start experimenting with if you've never fine-tuned before. Hugging Face offers a true no‑code web interface: just upload your CSV/JSONL, pick a base model, and hit "Train." Although you're restricted to fine-tuning open-source models, Hugging Face is just about the best way to get started doing just that. Cohere's docs and dashboard are clear and developer-friendly, so you'll get results fast whether you're working through a GUI or full-on scripting. Use Cohere for getting fine-tuning workflows fully automated at your company. It's super streamlined, but not yet as flexible as Hugging Face.For enterprise:Google Vertex AI: Fine-tune Google's models (e.g., Gemini) in the GCP console or via SDK. Full and adapter-based tuning, with tight integration to BigQuery and Cloud Storage. Great if you're already on GCP; bring your own dataset. AWS Bedrock: Fine-tune leading foundation models using the AWS console or API. Upload your data to S3, configure, and launch—a fully managed, secure option for those who live in AWS.AWS and GCP learning curves are a right angle, so try to get paid to be on these platforms. They’re great for having all the features and saving on dollars at the small cost of your sanity.Fine-tuning lets you turn a generic LLM into your own, highly-opinionated teammate.Start small, keep your data sharp, test your work, and build on what you learn.The hard part isn't the code—it's knowing what you want your model to do, and showing it the right examples.Tooling is more accessible than ever, so go ahead, teach your model a trick or two and see what it can do for you (and your users).Happy fine-tuning! Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo