3. Breakup complex tasks

• Start with a base request for the AI agent to complete
• Refine the output to meet your expectations for design and functionality
• Add additional criteria for the AI agent to build (still considering simplicity)

4. Use the AI agent as your collaborative partner

• Be patient as you try multiple times to get the output you want
• AI agents are designed to be conversational–use it to your advantage
• Give the AI agent any helpful examples (images, scripts, etc.) to reference

There 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 Playground

There are two ways you can import into Anima:

I. Paste the Figma link into the Anima desktop site

Here, you can customize the framework, UI library, language, and styling using the dropdowns below the URL text field (I kept the default selections).

II. Use Anima’s Figma plug-in

In the plug-in, select the purple button name, “Prompt in Playground” to automatically import the Figma designs into Anima Playground.