Good Prompt → Great Prompt
The quality of your app depends on the quality of your prompt. Learn to write prompts that make AI agents shine.Anatomy of a Great Prompt
Purpose
What does the app do?
Audience
Who is it for?
Style
Colors, vibe, design
Features
Must-have functionality
Before & After Examples
- Landing Page
- Dashboard
- SaaS App
❌ Vague Prompt
- No context about what the startup does
- No style guidance
- No feature requirements
- AI has to guess everything
✅ Specific Prompt
- Clear product description
- Target audience defined
- Style reference (like Dropbox)
- Exact sections needed
- Specific copy provided
- AI feature requested
UI/UX Prompting (Get the Look You Want)
The visual style of your app is just as important as its functionality. Here’s how to describe what you want.✅ What Works: Visual References
Site Comparisons
“Similar to stripe.com - clean, professional, blue/white”“Like airbnb.com - image-heavy, trust-building”Why it works: AI understands popular sites
Style Keywords
“Modern and bold” → Strong shadows, large whitespace“Playful and fun” → Rounded corners, vibrant colorsWhy it works: Clear visual personality
UI/UX Examples You Can Copy
- Analytics Dashboard
- SaaS Landing
- E-commerce
- Booking App
- Clear reference (Zillow agent portal)
- Specific style keywords (modern, professional, bold)
- Layout hint (card-based)
- Priority clear (stats prominent)
❌ What to Avoid
Too vague
Too vague
❌ “Make a beautiful website for my business”Problems: No style direction, no features, no reference✅ Better: “Create a consulting firm website similar to McKinsey.com.
Style: Professional and trustworthy with case study showcases.”
Over-specified
Over-specified
❌ “Use #FF5733 for all buttons, #3357FF for headers, 18px Helvetica,
shadow: 0px 4px 6px rgba(0,0,0,0.1)”Problems: Too prescriptive, conflicts with design system✅ Better: “Style: Bold and modern with vibrant orange primary color,
cool blue accents. Professional tech feel.”
Conflicting references
Conflicting references
❌ “Make it look like Apple’s website but also like Netflix
and add animations like Stripe”Problems: Conflicting references, unclear direction✅ Better: “Premium and minimalist like Apple.com with dark theme option.
Focus on product imagery and clean typography.”
Quick UI/UX Template
Prompting Principles
1. Be Specific, Not General
❌ General
“Make it look modern”Problem: “Modern” means different things
✅ Specific
“Modern = clean sans-serif fonts, lots of white space, subtle shadows, smooth animations”Better: Descriptive details
2. Use Design References
❌ Abstract
“Professional corporate design”Problem: Too subjective
✅ Concrete
“Corporate style like stripe.com - clean, blue/white, lots of breathing room”Better: Real website reference
3. Provide Content, Not Placeholders
❌ Lazy
“Add some testimonials”Problem: Generic placeholder content
✅ Thoughtful
“Testimonials:
- ‘Saved us 10 hours/week’ - Sarah Chen, Marketing Lead at Acme
- ‘Game changer for our team’ - John Smith, CEO of StartupCo”
4. Break Down Complex Features
❌ Overwhelming
“Add complete user management with roles, permissions, team invites, billing, and admin dashboard”Problem: Too much at once
✅ Incremental
First prompt: “Add user authentication (signup, login, logout)”Next: “Add team invites via email”Next: “Add role-based permissions (admin, member)”Better: One feature at a time
Example Prompts You Can Copy
Personal Portfolio
Personal Portfolio
Waitlist Landing Page
Waitlist Landing Page
Recipe Finder
Recipe Finder
Event Registration
Event Registration
Habit Tracker
Habit Tracker
Product Showcase
Product Showcase
Iteration Prompts
Once your app is built, refine it with specific requests:Design Adjustments
Feature Additions
Content Updates
AI Customization
Common Mistakes
Too vague about style
Too vague about style
❌ “Make it look good”
❌ “Modern design”
❌ “Professional appearance”✅ “Clean sans-serif, blue/white, lots of white space, like stripe.com”
✅ “Playful, colorful, rounded corners, like mailchimp.com”
❌ “Modern design”
❌ “Professional appearance”✅ “Clean sans-serif, blue/white, lots of white space, like stripe.com”
✅ “Playful, colorful, rounded corners, like mailchimp.com”
No content provided
No content provided
❌ “Add some features”
❌ “Put testimonials”
❌ “List the benefits”✅ Provide actual copy, names, and details
✅ The more real content, the better the result
❌ “Put testimonials”
❌ “List the benefits”✅ Provide actual copy, names, and details
✅ The more real content, the better the result
Trying to build everything at once
Trying to build everything at once
❌ “Build a full CRM with projects, clients, invoicing, time tracking, team management, reports…”✅ Start with MVP: “Build a simple project tracker with tasks and deadlines”
✅ Then iterate: Add features one by one through chat
✅ Then iterate: Add features one by one through chat
Forgetting about mobile
Forgetting about mobile
❌ Only describing desktop layout✅ Mention “mobile responsive” or “mobile-first”
✅ AI will ensure it works on all devices
✅ AI will ensure it works on all devices
Pro Tips
Use Comparisons
“Like Notion but for recipes”“Stripe-style landing page”AI understands popular site references
Specify User Actions
“When user clicks ‘Sign Up’, show modal with email/password form”Describe workflows, not just features
Mention Performance
“Fast loading, optimized images”“Lazy load images below fold”AI will implement best practices
Request Accessibility
“WCAG AA compliant”“Keyboard navigation support”AI will add proper ARIA labels
Getting Unstuck
- AI misunderstood me
- Not happy with the design
- Feature isn't working
What to do:
- Rephrase with more details
- Provide a visual reference (link to similar site)
- Break request into smaller parts