How I build insanely good UI in just 1-3 prompts

Hey! It's Kristoffer from BuildWithAI here.

I've spent the last few days deep in the code building out the UI for the free mobile boilerplate I'm making for you guys.

Here's the simple workflow that saved me hours of work:

I built the entire landing page: all the components, visualizations, the setup flow, the whole site, and I got it 80% right on the first try - then just iterated in a few prompts until I was happy.

The workflow:

Find UI from other apps that look similar to what you're building. Screenshot it. Paste it into your AI chat.

Then ask it to replicate the design but with your theme, content, and context.

You're using the image as inspiration because it's from a successful app that spent thousands on getting the UI right. Why start from scratch when you can adapt what already works?

Why this beats describing:

If you try to describe what you want ("make it modern," "clean layout," "better spacing"), you'll spend 5-10+ prompts going back and forth and never quite get it right.

If you upload an image that shows exactly what you want, you just say "replicate this design" and mention what you want customized. One prompt instead of ten. And it's way easier to iterate from there.

How to use this step-by-step:

Start with a full page screenshot of a landing page you like. This does 50% of the work for you right away.

Then take screenshots of the website's navbar, hero section, or specific components you want to copy and follow the exact same process to iterate the UI more detailed section-by-section.

Start broad, then get detailed to finalize the UI.

That's the workflow I used that saved me hoooours of work.

PS: I'll send you an email once the free mobile boilerplate is live :)

Click here to vote if you want the free Mobile boilerplate

Happy building, – Kristoffer, BuildWithAI