🚀 My Experiment with UX AI

It all started with a simple question: What’s the best tool to improve the UX of an existing website?
I have this little pet project, cuisinons.org 🥘, and I wanted to explore ways to enhance its user experience.

When working on UX for an existing site, it’s not just about generating new mockups. The real challenge is understanding, analyzing, and improving the current experience before proposing a redesign. 🔍✨

🧪 First Attempt: Analyze the Existing Website

I tried the UXPilot Review feature, which analyzes screenshots. 📸
But the analysis was shallow — mostly comments about contrast and styling rather than real UX pain points. 🤷‍♀️
Screenshots alone don’t capture user flows or dynamic interactions 🔄. In short, it wasn’t giving me actionable insights quickly.

🎨 A Different Approach: Starting from Scratch with Figma AI

If analyzing the existing site wasn’t enough, I thought: why not start from scratch? So I described the core features of the project and asked Figma AI – Make Design to generate mockups. 🤖✨

Prompt 1 📝
“Improve cuisinons.org, a website that helps users build batch cooking plans from a list of recipes. The site generates a shopping list and an execution plan for a batch of seven recipes.”
Result: A design that looked like a simple recipe site. 🍲

Prompt 2 🔁
“Add a ‘Batch of the Week’ presentation (seven recipes with shopping list and execution plan). Users can either select this batch or browse recipes to build their own batch.”
Result: A batch page appeared… but the recipe list vanished! 😅

Prompt 3 🔎
“Users should still be able to browse the full recipe list beyond the seven default recipes.”
Result: Closer to what I wanted. 👍

Prompt 4 📚
“For the batch view, show both the proposed batch of the week and previous batches (searchable by season / vegetarian categories).”

Prompt 5 💾
“Once the user creates a batch (from scratch or suggested), provide a space to store it, accessible anytime for the shopping list or execution plan.”

And so on… These AI tools can be quite chatty! 😄💬

💡 Observations

The generated main page was simple: two tabs (Batch / Recipes) with batch creation available from both. ✔ But it lacked a quick batch preview — users had to scroll to see selected recipes. 🔽

The Figma AI make’s result:

On cuisinons.org, batch creation uses a wizard-style overlay. 🧙‍♂️✨
When the user clicks Start this batch, the overlay shows all seven recipes with delete options. The main page still allows searching and adding items.

Actual cuisinons design for building a batch:

I really liked the AI suggestion of allowing batch creation directly from the Recipes menu — a UX improvement I plan to implement. 💡➡️👩‍🍳

📌 Takeaways

Figma Make is impressive for generating prototypes — and even code — very quickly. ⚡💻
But it wasn’t exactly what I needed.

I probably jumped in too fast, relying only on conversational prompts for context. Ideally, I’d love a tool (like Claude Code) that could:

• 🧠 Analyze my existing code repo to extract context automatically
• 🎯 Evaluate the actual UX
• ✨ Suggest improvements
• 🔧 Implement validated updates using my existing design system

🤔 Are AI Tools Like Figma Make Worth It?

Yes! 🎉 Especially for rapid prototyping — great for startup weekends, idea validation, or early concepts.
But bridging the gap from UX → UI → Code still needs more flexibility and tighter feedback loops. 🔄

➡️ What’s Next?

Next, I want to try the reverse approach: using Claude Code with a Figma link to implement new UX features directly into my existing codebase. 🛠️🎨

See you in the next post! 👋😊

Tweet