Content

Hey you 👋 Attempting to get a clean, pro looking UI out of AI… but think as you are conversing with a blank wall?

You are not the only one.Actually the very best AI needs some great direction - just like a designer who is really fast, however requires a brief.

Here is the great news: writing an excellent UI prompt = not rocket science. You simply need five steps.

And guess what? You can test them immediately in bolt.new - it is built exactly because of this kind of thing.

Let us build an exercise app - together - one phase at a time. Register and let's go!

What exactly are we generating?

Begin with a phrase about what you are designing. Practically one line.

"Design a contemporary health tracking app with a mobile first layout."

This offers AI a path - not really a structure of vibes.

How must it really feel?

This's your vibe check. What is the power? What when the user feel whenever they start the app?

Сreated for high performers. Must feel confident, minimal, and fast - like something you would want to check prior to the gym.

Use terms like: bold, snappy, aesthetic, kinetic, minimal, premium, calm, playful.

Really, buzzwords are your friend here.

What is the company?

Let us make it are like you. Fall in your color codes, font ideas, mode (dark/light), spacing vibes, etcetera.

"Use Inter font. Regular boldness.
Main color: #0D0D0D (deep black)
Accent: #22BFFD (fresh aqua blue)
Secondary: #00374C (dark ocean teal) Succeed dark mode only. Keep it slick."

Does not need to be ideal. Only adequate to give the AI a type to vibe with.

What UI components do we wish?

You are able to completely name drop a UI library in case you've a dev stack in mind. Or simply explain the style.

"Use shadcn UI for those components - modern, fresh, no fluff."

This can help when you are prototyping with devs or even desire something buildable later.

What is on the screen?

Which food do we in fact wish on the app?

"Bottom nav with four tabs: Home, Progress, Activity, Profile. Home screen: show modern exercise, calories burned, hydration tracker. Progress screen: show month stats, active streaks , charts."

Keep it chill but obvious. Just like you are briefing an intelligent designer pal.

The last Prompt - Copy Paste into bolt.new

Here is everything wrapped up into a genuine prompt you are able to paste into bolt.new:

"Design a contemporary health tracking app with a mobile first layout.
The app should feel smooth, focused, and lively - created for users that want performance and clarity.
Use Inter font, regular boldness.
Primary: #0D0D0D
Accent: #22BFFD
Secondary: #00374C Dark mode just.
Use shadcn UI library for those parts.
Bottom nav with Home, Progress, Activity, and Profile.
Home screen: show modern exercise, calories burned, hydration progress.
Progress screen: charts streaks summary."

Paste that in. Watch the magic. Adjust when necessary. Do this until it feels perfect.