Why I Started Using AI for Mockups
Before, I made mockups by hand. I used design tools. It took many hours. Every button, every screen, I made one by one.
Then I tried AI. I was surprised. With good prompt, AI gave me full screen idea in seconds. It was not perfect. But it saved me lot of time.
In this post I share prompts I use. These work for UI ideas, app screens, and design layouts. You can copy them and change words for your project.
Start With Clear App Type
AI need to know what app you make. Do not be vague. If you say "make a app", result will be random.
Instead, tell the type. Here is prompt I like:
> "Design a mobile app home screen for a fitness tracking app. Show step count, calories, and a start workout button. Use clean modern style with blue and white colors."
This prompt work well. It tells three things. The app type. The main features. The style. AI need all three to give good result.
I found that when I add colors, the mockup look more finished. So always add colors you want.
Ask for Specific Screens
Do not ask for whole app in one prompt. It never works good. Instead, ask one screen at a time.
Here are screens I ask most:
- Login and sign up screen
- Home or dashboard screen
- Profile screen
- Settings screen
- Detail page for one item
For each one, I write a short prompt. Example for login:
> "Design a login screen for a food delivery app. Include email field, password field, a login button, and a sign up link at bottom. Modern flat style, warm orange color."
One screen, one prompt. This way AI stay focused. The output is more clean.
Add Layout Words
Layout words help a lot. AI can guess, but guess is not always right. So I tell where things go.
Words I use:
- "top navigation bar"
- "bottom tab bar"
- "card layout"
- "grid of items"
- "side menu"
Here is full prompt with layout:
> "Design a shopping app product page. Big product image at top. Price and title below. Add to cart button fixed at bottom. Use card layout for related items."
When I add these words, the mockup look like real app. Not just random boxes.
Use Style Keywords
Style change everything. Same screen can look many ways. So I add style keywords.
Some styles I like:
- "minimal and clean"
- "dark mode"
- "playful with rounded corners"
- "corporate and professional"
- "glassmorphism style"
Example:
> "Design a banking app dashboard in dark mode. Show account balance, recent transactions, and quick actions. Minimal and clean with green accent color."
In my experience, dark mode prompts give nice look. Also "rounded corners" make app feel friendly. Try different styles and see what you like.
Prompt for Design Systems
Sometimes I need more than one screen. I want them to match. For this, I ask AI to keep same style.
I use this trick:
> "Create a design system for a travel app. Show color palette, button styles, and font sizes. Keep it modern and consistent."
Then for each screen I add: "use the same design system as before". This help keep screens matching. If you skip this, every screen look different. That is not good.
Ask for Component Details
Small parts matter too. Buttons, cards, forms. You can prompt just for these.
Example:
> "Design three button styles for a mobile app. One primary, one secondary, one disabled. Show hover and pressed states. Modern rounded style."
I use this when I build component library. It save time. Later I put these parts together in full screen.
Tips I Learn Along the Way
Here are small things that help me:
- Be specific. More detail give better result.
- One screen per prompt. Do not mix many.
- Always name the colors.
- Say the app type first.
- If result is bad, change few words and try again.
AI is not magic. First try is not always perfect. But if you change small things, it get better fast.
Final Words
AI mockup prompts save me many hours. I use them to test ideas quick. I show them to clients before I build real thing.
Start simple. Pick one screen. Write clear prompt with type, features, layout, and style. Then improve step by step.
Try the prompts here. Change the words for your own app. Soon you make mockups fast too.
