Prompt Engineering for AI App Builders

Prompt Engineering for AI App Builders

Better prompts = better apps. Here's how to communicate effectively with AI builders like Spawned.

The Anatomy of a Great Prompt

Structure

1. What: What you're building
2. For whom: Target audience
3. Key features: Must-have functionality
4. Design direction: Visual style
5. Specifics: Details that matter

Example Breakdown

Weak prompt: "Build me an app for tracking habits"

Strong prompt: "Build a habit tracking app for busy professionals. Include: daily habit checklist, streak tracking, weekly progress charts, and reminder notifications. Use a clean, minimal design with a dark mode option. Color scheme: purple accents on white/dark backgrounds."

Prompting Techniques

Be Specific

Don't: "Make it look nice" Do: "Use a modern design with rounded corners, subtle shadows, and lots of whitespace"

Use Examples

Don't: "Like a good dashboard" Do: "Similar to Linear's dashboard with a sidebar navigation and card-based content"

Describe the User

Don't: "For users to track data" Do: "For small business owners who need to track daily sales without complexity"

Prioritize

Don't: List 20 features equally Do: "Core features: X and Y. Nice to have: Z"

Prompt Templates by App Type

Landing Page

"Create a landing page for [product name], a [brief description]. Include: hero section with [headline focus], 3-4 key benefits, testimonial section, pricing table with [X] tiers, FAQ section, and email signup. Use [design style] with [color scheme]."

Dashboard

"Build an admin dashboard for [use case]. Include: sidebar navigation with [sections], overview cards showing [metrics], data table with [columns] and filtering, and a settings page. Use a professional design suitable for [audience]."

E-commerce

"Create a product page for [product type]. Include: image gallery, size/variant selector, add to cart, product description, reviews section, and related products. Optimize for conversion with clear CTAs."

Common Mistakes

Too Vague

"Build a good app" → AI doesn't know what good means to you. Fix: Be specific about features, audience, and design.

Too Ambitious

"Build an Uber clone with all features" → Too complex for one prompt. Fix: Start with core features, iterate.

Missing Context

"Add a login page" → But what authentication system? Fix: Specify auth provider (Google, email, Supabase).

Conflicting Instructions

"Make it minimal but with lots of features shown" → Contradiction. Fix: Prioritize and be consistent.

Iteration Prompts

Refining Design

• "Make the hero section taller with more whitespace"
• "Change the primary color to #3B82F6"
• "Use the Inter font for headings"

Adding Features

• "Add a search bar to the navigation"
• "Include a testimonial carousel on the homepage"
• "Add filtering to the product grid"

Fixing Issues

• "The button text is hard to read, increase contrast"
• "The mobile layout breaks at small sizes, fix the responsive design"
• "The form doesn't show validation errors, add error states"

Advanced Techniques

Persona Prompting

"Build this as if you were a senior designer at Stripe—clean, professional, with attention to micro-interactions."

Reference-Based

"Design the pricing page similar to Linear's pricing page, with the same layout but our content."

Constraint-Based

"Create this using only Tailwind CSS utilities, no custom CSS. Keep the bundle size minimal."

Key Takeaways

1. Specific prompts get specific results
2. Include audience, features, and design direction
3. Use examples and references
4. Start simple, iterate to complex
5. Learn what works and reuse patterns