Prompting Best Practices

Great prompts help Mocha build better apps. Think of your prompt like a blueprint. If your blueprint is clear, your app is closer to what you imagined. If your blueprint is vague, Mocha has to guess. This guide shows you how to prompt clearly, even if you are not technical.

​

1) Quick Start / TL;DR

Your prompt should describe the outcome you want. Be specific about who the app is for, what it does, how it should feel, and what users should do. Use this formula: Build a [type of app] for [audience] that [core function]. It should [key features]. Examples:

• Build a client portal for freelance designers that helps clients review project progress. It should include timelines, file uploads, comments, and status updates.
• Build a booking app for a local yoga studio that lets customers reserve classes. It should show weekly schedules, instructor bios, and easy checkout.
• Build a simple CRM for a small real estate team that tracks leads, follow-ups, and deal stages.

​

2) Writing Your First Prompt

Use the Who / What / Why framework.

​

Who

Who is this app for? Examples: first-time home buyers, wedding photographers, busy parents, small teams.

​

What

What should users do in the app? Examples: manage contacts, book appointments, publish portfolio work, pay for subscriptions.

​

Why

Why does this app matter? Examples: save time, reduce back-and-forth, look professional, keep everything in one place.

​

Good vs bad prompts

Bad:

• Make me a CRM.
• Build a portfolio site.
• Create a booking app.

Why these are hard:

• No audience
• No key workflows
• No design direction

Better:

• Build a CRM for a two-person insurance agency. We need lead tracking, call notes, reminders, and a pipeline view from new lead to closed policy. Keep it simple and easy to read.
• Build a portfolio site for a motion designer targeting startup clients. Include case studies, testimonials, and a contact form. Style should feel bold and modern.
• Build a booking app for a mobile dog grooming business. Customers should choose service type, pick a time slot, enter pet details, and get confirmation by email.

Best:

• Build a CRM for a small real estate team handling 200 leads per month. The goal is to stop missing follow-ups. Include lead stages, owner assignment, notes, reminders, and a daily task list. Keep the dashboard clean with obvious next actions.

​

3) Building Incrementally

The fastest way to get a great app is to build in steps. Do not describe everything in one giant message. Start with the core, then add one layer at a time. Recommended sequence:

1. Describe app goal and target users
2. Refine layout and page structure
3. Add authentication
4. Add database-backed features
5. Polish design and content

Example workflow for a booking app:

1. Build a booking app for a local nail salon. Customers should view services, see available times, and book appointments.
2. Refine the layout: homepage with hero, services grid, and booking section. Keep it bright, friendly, and mobile-first.
3. Add login with Google so returning customers can manage upcoming bookings.
4. Store bookings in the database. Add an admin view to confirm, reschedule, or cancel appointments.
5. Polish the design with softer colors, more whitespace, clearer buttons, and better confirmation messages.

​

4) Effective Techniques

These techniques usually improve results right away.

​

Be specific about design

Say what you want to see. Useful details include:

• Color style: warm, neutral, bold, minimal
• Layout: sidebar, top nav, card grid, split screen
• Typography feel: elegant, playful, clean, professional
• Density: spacious or compact

Example:

• Use a clean layout with a left sidebar, soft gray background, white cards, and a modern professional feel. Keep text easy to scan.

​

Reference real sites

If you like a style, say so. Examples:

• Make the pricing section feel like Stripe's pricing page: clear tiers, strong hierarchy, easy comparison.
• Use a landing page flow similar to Notion: simple hero, social proof, then feature blocks.

​

Use component language

Name interface pieces directly. Helpful words: header, hero, cards, sidebar, modal, tabs, table, grid, empty state, toast message. Example:

• Add a sticky header, a three-column card grid for listings, and a modal for creating new entries.

​

Mention user flows

Describe what happens when users act. Prompt pattern: When a user clicks [X], they should see [Y], then be able to [Z]. Examples:

• When a user clicks 'Book now', they should see available time slots, then confirm details on one screen.
• When a user marks a deal as closed, they should see a success message and the deal should move to Closed automatically.

​

Use Discuss Mode first

Discuss Mode lets you plan in chat without making code changes. Use it to brainstorm scope, compare ideas, set priorities, and draft better prompts.

​

5) Common Mistakes to Avoid

​

1) Prompts that are too vague

Vague:

• Make it better.
• Improve the UI.

Better:

• Improve readability by increasing text contrast, adding spacing between sections, and making primary buttons more prominent.

​

2) Asking for too much at once

If one message includes too many changes, results get messy. Better approach:

• Send one focused request
• Review result
• Send the next request

​

3) Not using versions when experimenting

When trying bold changes, create a safe checkpoint first. If the result is not right, rollback and try a different direction.

​

4) Repeating “Fix with AI” without context

If something keeps failing, explain the problem clearly. Helpful format:

• What you expected
• What actually happened
• Where it happened
• Any pattern you noticed

Example:

• Expected: booking confirmation email sends after payment. Actual: payment succeeds but no email is sent. Happens on desktop and mobile.

​

6) Power Tips

Use these habits to get stronger results with less effort.

​

Plan first, build second

Start in Discuss Mode and ask Mocha to help define MVP scope, must-have features, and your first build prompt.

​

Break complex apps into phases

Example phases:

1. Core pages and layout
2. Auth and user accounts
3. Data features and workflows
4. Integrations and automation
5. Final polish

​

Describe your audience

Audience context shapes writing tone, layout choices, and onboarding clarity. Example:

• This app is for older adults who are not tech-savvy. Keep navigation simple, labels clear, and button text explicit.

​

Reference built-in features by name

Mocha supports:

• Google OAuth authentication
• Database features
• Analytics
• Email
• Hosting
• API integrations (like Stripe, Firecrawl, ElevenLabs)
• Image generation
• Custom domains

Example:

• Add Google OAuth login, store customer records in the database, and send email confirmations after signup.

​

Use Direct Edit for quick visual tweaks

If the structure is right, use Direct Edit Mode for fast UI refinements. Great for spacing, text edits, button labels, and alignment fixes.

​

Final Prompt Template

Copy and fill this in: Build a [type of app] for [audience] who need to [goal]. Core workflow: users should be able to [main actions]. Include these features first: [feature 1], [feature 2], [feature 3]. Design direction: [style], [layout], [color feel], [tone]. Important flow: when users [action], they should [result]. Start with an MVP, then we will iterate in phases.