Skip to main content
The quality of your prompts directly shapes the quality of your app. A well-crafted prompt gives the AI the context it needs to generate accurate, production-ready code on the first try. A vague prompt leads to guesswork and extra iteration. This guide covers the techniques that consistently produce the best results.

​
Be specific and descriptive

The most common prompting mistake is being too general. Compare these two prompts:
Make a dashboard.
vs.
Create a dashboard that displays our PostgreSQL customer data in a filterable table with columns for name, email, plan type, and last login date. Add a search bar at the top and dropdown filters for plan type.
The first prompt forces the AI to guess your data source, layout, columns, and functionality. The second prompt gives the AI everything it needs to build the right thing immediately.
A good rule of thumb: if another developer could not build what you described without asking follow-up questions, your prompt needs more detail.

​
Start with the big picture, then refine

You do not need to describe every detail upfront. The best workflow is to build incrementally:
1

Describe the overall app or feature

Start with a prompt that outlines the core purpose and structure.
Build a project management tool with a sidebar listing all projects and a main area showing tasks for the selected project.
2

Refine specific parts

Follow up with targeted prompts that add detail or adjust behavior.
Add a status badge to each task. Use green for “done”, yellow for “in progress”, and gray for “todo”.
3

Polish and iterate

Continue refining until the app matches your expectations.
Make the task list sortable by due date. Add a button to create new tasks with a modal form.
This approach works better than trying to describe everything in a single prompt because it lets you course-correct at each step.

​
Describe data relationships

When your app involves structured data, describe how entities relate to each other. This helps the AI design the right database schema and UI.
Create a project management tool. Projects have multiple tasks. Each task has a title, description, status (todo/in-progress/done), assignee email, and due date. Show tasks in a kanban board grouped by status.
Build an inventory tracker. Each product belongs to a category and has a name, SKU, quantity, price, and restock threshold. Show a warning badge when quantity drops below the restock threshold.
The more clearly you define your data model, the fewer revisions you will need.

​
Reference existing code

When you want to modify something that already exists in your app, reference it directly:
Update the customers page to add a delete button for each row. Show a confirmation dialog before deleting.
On the dashboard page, change the revenue chart from a bar chart to a line chart.
Make the sidebar navigation on the settings page collapsible.
The AI has full access to your codebase, so referencing specific pages or components by name helps it find and modify the right files.

​
Include design preferences

If you have specific layout or styling preferences, mention them in your prompt:
Use a clean card layout with a sidebar navigation. Keep the color scheme minimal with a white background and subtle gray borders.
Display the data in a compact table with alternating row colors. Add hover highlighting and make the header sticky.
Create a two-column layout — filters on the left, results on the right. Use the full width of the page.
The AI defaults to clean, professional layouts using Shadcn UI components, but explicit design direction produces results closer to what you have in mind.

​
Use Agent mode for building, Ask mode for understanding

Vybe offers two interaction modes, and knowing when to use each saves time: Agent mode is for when you want the AI to create or modify code:
Add a new page that shows a summary of all orders from the last 30 days.
Ask mode is for when you want to understand something without changing it:
How does the authentication flow work in this app?
What API routes are currently defined?
Switch to Ask mode before exploring unfamiliar parts of your app. Once you understand the code, switch back to Agent mode to make changes confidently.

​
Handle errors effectively

When things go wrong, give the AI clear information about the problem: If the preview shows an error:
  • Click the error message to automatically send it to the AI
  • Or describe what you see: “The page shows a 500 error when I click the submit button”
If something does not look right:
  • Describe the gap between what you expected and what you see
  • “The table is showing all users instead of just active ones. Filter it to only show users where status is ‘active’.”
If the AI’s output is wrong:
  • Be specific about what needs to change rather than starting over
  • “The date format is wrong — use MM/DD/YYYY instead of ISO format”

​
Iterate, do not restart

Building incrementally is almost always faster than starting over:
  • Each follow-up prompt builds on the context from your previous conversation
  • The AI remembers what it has already built and can modify it precisely
  • Starting a new thread loses that accumulated context
Avoid the temptation to start fresh when something goes wrong. Instead, describe the issue and let the AI fix it. The AI is better at fixing code it wrote than rebuilding from scratch.

​
Prompt templates for common tasks

Here are starting points for common internal tool patterns: CRUD application:
Build a [resource] management page. Display [resource]s in a data table with columns for [fields]. Add search, filters for [filter fields], and buttons to create, edit, and delete [resource]s.
Dashboard with charts:
Create a dashboard showing [metrics] from [data source]. Include a [chart type] chart for [metric], summary cards at the top for [KPIs], and a date range filter.
Form-based workflow:
Build a [workflow name] form with fields for [field list]. When submitted, save the data to the database and show a success toast. Add validation for [required fields].
Data import tool:
Create a page where users can paste CSV data with columns [column list]. Parse the data, show a preview table, and let them confirm before saving to the database.

​
What’s next