Prompting Guide

Learn how to write effective prompts for Refine. Get better results, save tokens, and build faster.

Better prompts = better apps. This guide shows you how to get the most from Refine's AI.

How Prompting Works in Refine

When you send a prompt, the AI doesn't just start building. It follows a process:

Clarify

A modal appears with options to choose from. The AI asks what it needs to know.

Plan

The AI shows what it will build before starting. You review and approve.

Execute

The AI builds when you press Execute. Watch your app appear in the Preview.

This means you don't need to get everything perfect upfront. The AI will help fill in the gaps.

That said, better prompts = fewer clarifications = faster building.

The Core Rule

Be specific. The more detail you provide, the better the result.

Prompt	Quality
"Create a table"	❌ Vague — AI will ask many questions
"Create a users table"	⚠️ Better — but AI will still need details
"Create a users table with columns: name, email, role, created_at. Add sorting and a search box."	✅ Specific — AI can plan immediately

Before and After Examples

Example 1: Data Tables

❌ Weak prompt:

Make a table for products

✅ Strong prompt:

Create a products table with these columns:
- Name (text)
- Price (currency, formatted as $XX.XX)
- Category (dropdown filter)
- Stock (number, show warning if below 10)
- Created date

Add sorting on all columns and a search box for name.

Example 2: Forms

❌ Weak prompt:

Add a form to create users

✅ Strong prompt:

Create a user form with:
- Name (required, text)
- Email (required, must be valid email format)
- Role (dropdown: admin, editor, viewer)
- Department (optional, text)
- Active (checkbox, default true)

Show validation errors inline. After submit, return to the users list.

Example 3: Dashboards

❌ Weak prompt:

Build a dashboard

✅ Strong prompt:

Build a dashboard with:
- Total users count (big number, top left)
- New users this week (big number with % change from last week)
- Users by role (pie chart)
- User signups over the last 30 days (line chart)

Use a 2x2 grid layout.

Prompting Patterns That Work

1. List the columns/fields explicitly

Don't make the AI guess your data structure.

Create a table with columns: id, name, email, status, created_at

2. Specify the UI component type

Show status as a colored badge (green for active, red for inactive)

Use a dropdown for the category filter, not a text input

3. Describe the behavior

When the user clicks a row, open a side panel with the full details

After saving, show a success message and refresh the table

4. Reference your data source

Use the orders table from my Supabase database

Fetch products from the /api/products endpoint

5. Describe layout when it matters

Put the filters above the table in a horizontal row

Use a 3-column grid for the dashboard cards

Iterating Effectively

Build in small steps. Each prompt should do one thing well.

Good iteration flow:

1. "Create a products table with name, price, and category"
2. "Add a stock column that shows a red badge if below 10"
3. "Add filters for category and price range"
4. "Add the ability to edit products inline"
5. "Add a button to export the table as CSV"

Bad approach:

"Create a products table with name, price, category, stock with
warning badges, filters for everything, inline editing, CSV export,
bulk actions, and make it look like Shopify"

Tip

Complex prompts often miss details. Breaking them up catches issues earlier.

Fixing AI Mistakes

Sometimes the AI doesn't get it right. Here's how to recover:

Option 1: Clarify and iterate

The status badge colors are wrong. Use green for "active",
yellow for "pending", and red for "cancelled"

Option 2: Be more specific

I meant a line chart, not a bar chart. Show daily data points
for the last 30 days with the date on the X axis.

Option 3: Rollback and retry

If the AI went in the wrong direction:

Use the rollback feature to go back
Try a clearer prompt

Don't keep asking the AI to "fix it" without explaining what's wrong. Be specific about the problem.

Token-Saving Tips

Tokens are consumed with each AI interaction. Here's how to use them wisely:

1. Get it right the first time

Spend 30 seconds writing a detailed prompt. It's cheaper than 5 rounds of fixes.

2. Use the Editor for small changes

Changing a color? Fixing a typo? Edit the code directly — it's free.

Instead of:

"Change the header to blue"
"Add padding to the cards"
"Make the text larger"

Do:

"Update the styling: blue header (#2563eb), 16px padding on cards,
and increase body text to 16px"

4. Avoid vague feedback

❌ "Make it look better" (AI has to guess, might get it wrong, wastes tokens)

✅ "Increase spacing between sections, use a lighter gray for borders"

Common Mistakes

Mistake 1: Assuming the AI knows your data

❌ "Show the user's orders"

✅ "Show orders for the selected user. The orders table has columns: id, user_id, total, status, created_at"

Mistake 2: Not specifying relationships

❌ "Show the order with its products"

✅ "Show the order details. Each order has many order_items, and each order_item references a product."

Mistake 3: Vague styling requests

❌ "Make it modern"

✅ "Use rounded corners (8px), subtle shadows, and more whitespace between sections"

Mistake 4: Overloading a single prompt

❌ "Build a complete CRM with contacts, deals, activities, email integration, and reports"

✅ Start with one feature and build up.

Prompt Templates

Copy and customize these for common use cases.

Data table

Create a [resource] table with these columns:
- [column 1] ([type])
- [column 2] ([type])
- [column 3] ([type])

Add sorting on [columns] and a search box for [field].
Include pagination with [N] rows per page.

Dashboard

Build a dashboard showing:
- [Metric 1] (big number with [comparison])
- [Metric 2] (big number)
- [Chart 1] ([chart type] showing [data] over [time period])
- [Chart 2] ([chart type] showing [breakdown])

Use a [layout] layout.

Form

Create a form for [action] with:
- [Field 1] ([type], [required/optional], [validation])
- [Field 2] ([type], [required/optional], [validation])
- [Field 3] ([type], [options if dropdown])

After submit, [behavior].

Getting Help

If you're stuck on how to phrase something:

Describe the end result — What should the user see?
Include an example — "Like Notion's table view" or "Similar to Stripe's dashboard"
Attach a screenshot — Show what you're trying to achieve

The AI can work with partial information and ask clarifying questions in the response.

Next Steps

Using the Console — Master the workspace
Publish & Export — Ship your application
Troubleshooting — Common issues

Prompting Guide

On this page