How UX designers can use AI app builders to their advantageAs AI continues to disrupt many industries (particularly software development), it’s critical to continue to stay up-to-date with new tools that change traditional processes–making them more efficient and opening opportunities to more people.UX designers have historically been constrained to creating high-fidelity wireframes or limited prototypes for user testing or developer hand-off. But designers now have the chance to expand their skill set to generating coded versions of their designs using vibe coding.Use vibe coding to go from Figma designs to a live demoVibe coding, coined by Andrej Karpathy, has become the new tech buzzword. With vibe coding, you simply describe what you want in an AI prompt and submit it to an LLM (large language model). For developers, vibe coding can take out some of the manual labor and be used as a starting place to then refine. For designers, vibe coding opens the doors to generating quick, working code without using developer resources.To dive deeper into UX design and vibe coding, let’s review vibe coding for UX designers, best practices for vibe coding, then demo vibe coding in Anima.Table of contentsVibe coding for UX designersBest practices for vibe codingDemo of vibe coding in AnimaVibe coding for UX designersBefore we get into the weeds, vibe coding certainly doesn’t produce code that meets testing standards; at least for now. I’m not saying UX designers can use vibe coding to create code that’s ready to push to a target environment (QA and Security engineers would be appalled by the damage).“Screw the unit tests, the vibes will carry us.”-Persomatey via RedditInstead, UX designers can use vibe coding to produce working prototypes for user testing or to show how specific interactions should function to stakeholders and developers. Designers know how strenuous and time-consuming prototypes can be; even then, the prototypes may not fully reflect interactions (like drag and drop) or just act wonky.Let’s take a look at how vibe coding works, then review the benefits and limitations of vibe coding for UX designers.How does vibe coding work?Vibe coding allows you to use natural language to describe an idea or app you want in a prompt, then have AI build the code for you–no manual coding needed. Developers can use any LLM tool, such as ChatGPT or Claude, to vibe code. Then, insert any simple prompt like, “Create a dashboard for a health tracking app for college students, and use colorful, modern colors and fonts.” After getting the initial AI-generated code, developers will refine and test it to fit their standards.Using Claude to build a dashboard for a “Health tracking app”But for UX designers, we don’t really care about how clean or functional the code is–we just want to see our ideas in action (and quickly). Instead of using an LLM like ChatGPT to generate code, designers can use AI app builders.There are two ways you can use vibe coding tools: start from a prompt with tools like Bubble and Replit, or start with a Figma design with tools like Anima Playground or Lovable (we’ll look at the tools integrated with Figma later).Replit AI app builder allows creation with their agent, templates, or GitHubBenefits and limitationsAs a UX designer, you might be thinking, “I don’t know how to code, so how does vibe coding help me?” The level of code knowledge varies from designer to designer–some can read basic HTML and CSS, while others can write code straight from their designs. Either way, designers can use vibe coding to their advantage to enhance their UX process.But with every benefit comes limitations; let’s examine both to fully grasp how UX designers should use vibe coding.Benefits of vibe coding:Faster iteration: Designers can quickly visualize and interact with UX ideas; this can expedite validating initial concepts with your product team or target usersReduced dependency: To get fully-functional demos to test with users, designers have to wait for development; vibe coding allows designers to jump over this barrier and create demos themselvesGreater exploration: Because vibe coding allows easy and quick creation of live concepts, designers can explore more ideas with stakeholders and users–ensuring optimal design directionLimitations of vibe coding:Complexity: AI app builders struggle with complex projects; for instance, designers can’t upload multiple pages from Figma and ask the AI agent to create interactions between pages (but maybe one day…)Lack of context: The AI agent helping to generate the code for your designs will not have all the context you have–leaving gaps; expect more surface-level functionality and designCode quality: The code generated through these AI agents typically includes bugs and errors–requiring someone with a deep understanding of programming to fix; for designers, vibe coding should only be used to explore ideas withBest practices for vibe codingAs vibe coding gains more traction and you begin to incorporate AI app builders into your UX workflow, it’s critical to know vibe coding’s best practices to ensure you get useful and optimized output from the AI agent.1. Use specific and simple promptsPrompts should be only 1–2 sentences longUse any context-specific language for more predictable resultsPrioritize specific information, such as the target audience and their overall goal2. Start with Figma (if you can)Use a Figma plug-in, such as Anima or Builder.ioImport any level of fidelity UI design from Figma into the AI agent to referenceBuild the intended interactions and remaining app from the initial UI designAnima’s Figma plugin allows you get working code straight from your designs3. Breakup complex tasksStart with a base request for the AI agent to completeRefine the output to meet your expectations for design and functionalityAdd additional criteria for the AI agent to build (still considering simplicity)4. Use the AI agent as your collaborative partnerBe patient as you try multiple times to get the output you wantAI agents are designed to be conversational–use it to your advantageGive the AI agent any helpful examples (images, scripts, etc.) to referenceDemo of vibe coding in AnimaThere are many AI app builder tools out there–some are better for UX designers versus others. Most designers want to start out with the designs they’ve built in Figma instead of starting from scratch with a prompt for the AI agent. Tools like Anima, Lovable, and Framer each integrate with Figma to allow this.I prefer Anima to Lovable since Lovable requires you to use the Builder.io Figma plug-in to then import into Lovable. On the other hand, Anima allows you to go straight from Figma into the Anima Playground tool (plus you get good functionality on the free plan!).Let’s look at how you can vibe code in the Anima Playground tool.1. Import Figma designs into Anima PlaygroundThere are two ways you can import into Anima:I. Paste the Figma link into the Anima desktop siteHere, you can customize the framework, UI library, language, and styling using the dropdowns below the URL text field (I kept the default selections).Paste your Figma link in Anima’s desktop site to get working codeII. Use Anima’s Figma plug-inIn the plug-in, select the purple button name, “Prompt in Playground” to automatically import the Figma designs into Anima Playground.Select “Prompt in Playground” to import the Figma designs into Anima2. Review and refine the live preview of your working designsIn Anima Playground, you can toggle between the code, preview, and Figma design. As you begin interacting with the first draft of the working app, you’ll probably notice some items you want to change–this could be a button’s hover state, the color palette, or the responsiveness of the app.Request changes to the design and code using the Anima Playground chatHere are two prompts I asked in the chat after getting the initial preview of the coded designs:Make the designs responsive to the screen size changingAdd a login modal once you select “Sign in to add”Full-screen preview of the designs and interactions made from Anima PlaygroundYou can make requests to the AI agent in a natural and conversational way–making it easy to get changes in the working preview.3. Publish the live app or website in AnimaOnce you’re happy with the live preview of the designs, you can publish the live app or website using the “Publish” button near the top-right of the Anima desktop site.This will allow you to share the link with the live app to users for testing sessions or to developers for hand-off.Publish your Anima project to get a URL link to the live versionNote: You can download the code and push to GitHub, but you must upgrade to a paid plan to access these features.AI will continue to improve and disrupt our UX processes. Fortunately, certain AI tools, like Anima, allow designers to vibe code–expediting steps in the design process that are usually time-consuming and tedious.Instead of waiting for engineering resources, UX designers can take their ideas into their own hands and create full-functional demos to show stakeholders or test with target users.Vibe coding opens more opportunities for designers, no matter their experience with programming, to generate working demos to explore, iterate, and test (then repeat).Testing your UX ideas with vibe coding was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.