Skip to main content

Prompting Tips

The better you describe an app, the better AppX builds it. The AI is strong, but it can't read your mind — a vague prompt gets a generic app, while a clear one gets something close to what you pictured. These patterns get you there faster.

For Initial Generation​

1. Describe screens, not just the concept​

Don't just say what the app is — describe the specific screens you want.

❌ "A workout tracking app"

✅ "A workout tracking app with 4 screens:
1. Home: shows today's scheduled workout and a streak counter
2. Workout: active workout view with exercise list, reps/sets input, and a timer
3. History: calendar view with completed workout days highlighted
4. Exercises: searchable library of exercises with muscle group filter"

2. Describe each screen's key elements​

For each screen, mention:

  • What the main content is
  • Key interactive elements (buttons, inputs, toggles)
  • Any data that needs to be shown
✅ "Profile screen: shows user avatar, name, and bio at the top. Below that, a grid of 3 stat cards (posts, followers, following). Then a 2-column grid of the user's photos. Tapping a photo opens it full screen."

3. Specify your design style​

AppX will pick a reasonable default, but you'll get closer to what you want if you specify:

✅ "Clean minimal design. White background. Use #3b82f6 (blue) as the accent color.
    Rounded corners (12px radius). Subtle shadows on cards."

4. Mention data persistence​

If you want data to survive app restarts, just say so in plain English — AppX wires up on-device storage for you:

✅ "Save the task list on the device so it persists when the app is closed and reopened."

5. Specify navigation type​

✅ "Use bottom tabs for main navigation (Home, Search, Profile, Settings).
    Push stack screens for detail views."

For Chat Edits​

6. Select the right screen first​

Always use the screen selector to target the screen you're editing. This makes the AI more accurate.

7. Be specific about what to change​

Reference what you can see on screen:

❌ "Change the button"
✅ "Change the 'Save Changes' button at the bottom from blue to green (#22c55e)"

8. Describe the visual result you want​

❌ "Add padding to the list items"
✅ "Each list item should have 16px vertical padding and 20px horizontal padding,
    with a thin gray border (#e5e7eb) at the bottom"

9. For complex changes, break them up​

First message: "Add a search bar at the top of the screen"
Second message: "Now filter the list as the user types in the search bar"
Third message: "Show 'No results' text when the search returns nothing"

This is more reliable than asking for all three at once.

10. Describe bugs by what you observe​

✅ "When I scroll to the bottom of the list, the last item is hidden behind the tab bar.
    It needs more bottom padding."

✅ "The modal closes immediately after opening on Android. It works fine on iOS."

Patterns That Work Well​

App categories AppX generates well​

  • Social apps — feeds, profiles, posts, comments
  • Productivity apps — tasks, notes, habits, calendars
  • Finance apps — budgets, expenses, transactions, charts
  • Health & fitness — workouts, nutrition, tracking
  • E-commerce — product listings, cart, checkout flow
  • Food & recipe — browsing, saving, cooking timers
  • Travel — itineraries, maps, booking
  • Education — courses, lessons, quizzes

Good prompt structure​

Build a [type of app] for [who it's for] that lets users [main action].

Screens:
1. [Screen name]: [description of content and interactions]
2. [Screen name]: [description of content and interactions]
...

Design: [style description — minimal/bold/playful, color scheme]
Data: [what should be saved and how it's structured]
Navigation: [tabs/stack/drawer]
Build in passes

Generating 10 screens in a single prompt works, but doing it in 2–3 focused passes is more reliable — start with the core screens, preview on your phone, then chat to add the rest. Each pass is cheaper to get right.

Common Mistakes​

Asking for unsupported tech​

AppX generates React Native with StyleSheet.create. These won't work well:

  • NativeWind / Tailwind CSS
  • react-native-paper
  • reanimated animations (basic Animated.Value works, Reanimated doesn't)
  • @expo/vector-icons (use lucide-react-native)

Being too vague on features​

"Make it social" doesn't tell the AI what screens to build. "Add a feed screen with post cards, like buttons, and comment counts" does.

Asking for everything at once​

Generating 10 screens in one prompt is possible but riskier than doing it in 2–3 passes. Large generations have more surface area for issues.

Forgetting about navigation​

If you add a new screen but don't say how to get to it, the AI may not add a navigation path. Always mention: "Add a button on the Home screen to navigate to the new Settings screen."

Over-specifying colors in hex​

Fine to use hex for brand colors, but for general UI ("dark text", "gray border") natural language is cleaner and more maintainable.

Prompt Examples​

Finance tracker​

Build a personal finance tracker with:
- Dashboard screen: monthly budget circle chart, recent transactions list, quick-add button
- Add Transaction screen: amount input (number pad), category picker (icons grid:
  Food, Transport, Entertainment, Health, Shopping, Other), optional note, date picker
- Transactions screen: full list grouped by date, search bar, filter by category
- Budget screen: set monthly limits per category, progress bars showing spent vs limit

Clean minimal design, white backgrounds, green (#22c55e) for income, red (#ef4444) for expenses.
Store all data in AsyncStorage.

Habit tracker​

A daily habit tracker app.

Screens:
1. Today screen: list of today's habits with large checkboxes. Current streak shown
   on each habit. "Add Habit" button top right.
2. Add Habit screen: name input, emoji picker for icon, frequency (daily/weekdays/custom days),
   reminder time toggle with time picker.
3. Stats screen: shows 7-day and 30-day completion rates per habit, with a heatmap grid.

Use a dark theme (#111827 background, white text, purple (#8b5cf6) accent).
Haptic feedback when checking off a habit.

Restaurant menu app​

A menu app for a restaurant. Staff-facing.

3 screens:
1. Menu screen: tabs for categories (Starters, Mains, Desserts, Drinks).
   Each item shows name, price, and a toggle for "available today".
2. Add/Edit Item screen: form with name, description, price, category, photo URL, available toggle.
3. Orders screen: incoming orders shown as cards with items, table number, timestamp.
   "Mark Ready" and "Mark Complete" buttons on each card.

Design: clean restaurant aesthetic, warm off-white (#faf9f7), dark brown (#2d1b0e) text.
How AI works

The plan → generate → validate pipeline.

Editing by chat

Refine your app one message at a time.

Credits

What a build and an edit cost.