Prompting

Our top tips from the team and community on how to chat with Create to build apps

Create understands both text and images to build your app. You’ll get better results if you’re clear. Soon, you’ll notice it’s way faster than coding.

Prompting is a fancy word for “writing instructions to an AI”. AI models can make mistakes, so there are better and worse ways to write the same instructions to get what you want.

Tips

Many of these tips work in combo :)

Set the scene at the start

❌ Don’t: be vague - landing page

✅ Do: set a clear context and goals:

Landing page for B2B SaaS product selling an AI app builder. Show a header, pricing options for free, pro, and enterprise, testimonials section, footer

Make small changes

❌ Don’t: try to do many things all at once - Make a social media site that lets users logs in, saves their posts, shows them in a feed, lets you like each card in the feed, and lets send invites to new friends

✅ Do: break down complex tasks into smaller steps:

Update the cards to be 12px apart in the feed 

Add a way to store posts

Use Images

You can paste images into the chat. You’ll get best results if you add more context with a description of what about the image you want.

On a Mac, try Control + Command + Shift + 4 to easily save a screenshot to your clipboard- ready to paste with Command + V!

Examples:

✅ Do: replicate exactly (might require multiple passes / images):

Replicate this exactly: <page-image>. Details: [...more details on things you want it to copy]

✅ Do: make something similar:

Make something with similar features to this: <page-image>. Details: [...more on specific things you want it to copy]

✅ Do: style specific elements:

Make the card look like this: <card-image>. Details: [...more details you want it to copy]

✅ Do: extract text content:

Fill the pricing options with all the text from this image: <image of pricing options>

✅ Do: use for inspiration:

Start with something that looks like this: <competitor image>. Now add: [more details]

✅ Do: apply styles:

Style it like this: <image of styles>.

You can get very specific

To make something exact, you can even specify details like hex codes, fonts, or spacing, if you want. If you don’t know, just describe in English and Create will get close.

Example:

✅ Do: get close in English if you don’t know:

light gray subtitles that have some space between them and the title

✅ Do: get specific on values

#d3d3d3 subtitles

Title 32px, Subtitle 24px, with 12px space between them

Use Inter for the titles and subtitles

Be specific on errors

❌ Don’t: vague- It's still not working. Ugh

✅ Do: describe the exact issue:

When I click on the button, it's not leading to the next page

❌ Don’t: vague- Nothing works!

✅ Do: explain the specific problem:

The screen is blank. Why is that and how can I fix it?

❌ Don’t: vague- The date picker is wrong

✅ Do: describe the exact issue with context:

This date picker [screenshot] is showing 1/9/2025 when I select 1/10/2025. Can you fix it?

❌ Don’t: vague- The back button isn't working

✅ Do: explain the specific problem with details:

When I hit the 'manage teachers' button [screenshot] it should take me back to [page name/route] right now, nothing is happening when I click it

If you see a error message, you can often just paste it back into the chat to give Create more context.

Using previous versions

When you generate something new, Create has knowledge of your previous versions.

You can sometimes be specific on what you liked about previous versions to bring that functionality back.

In a previous version, the paste image when the page was selected worked. It's now not working. 

Figure out how to bring that back. 

Avoid “too long” → break into components

As your project grows long, Create can sometimes have a harder time making changes. You can combat this by breaking your project into more elements (components, functions, etc).

Project-wide vs Single Element

You can prompt Create at two different levels:

• Project-wide: Select the project name in Project Selector or tap on the canvas itself
• Single element: Select a specific element in the Project Selector or tap it on the canvas

Many of the tips above work at either level, but there are some things you can do specifically at each level.

Learn more about the different elements you can use in Create in the Builder Overview.

Larger projects often have multiple Pages, Components, Functions, and a Database or User Accounts.

Project-wide prompts

Create can make changes across the entire project in parallel and/or create new elements if they don’t exist.

When you have the project selected, you can make prompts that:

✅ Add new elements across your app:

Make a dashboard with table, nav, and search. Also have an about page in the nav

This will update existing elements in parallel and/or create new elements if they don’t exist:

• Dashboard (page)
• Table (component)
• Nav (component)
• Search (component)
• About (page)

✅ Handle interactions between elements:

On the about page the back button should go to the home page

This will:

• Update the linking on the back button in the about page
• Get the route from the home page

✅ Break down complex pages:

Turn this dashboard page into separate components

This will:

• Break down the page into separate components
• Make new components as needed
• Update the page to use the new components

✅ Connect data across pages:

Store data in /database when the user enters the form on the dashboard page. When you tap an element in the table, show that info in the details page

This handles:

• Database queries on multiple pages
• Routing between pages
• Passing data via query params

✅ Style across pages and components

Make everything look more like this for style: <screenshot>

This will:

• Update the dashboard page to match the screenshot
• Update all components that are used on the dashboard page to match the new style

Single Element prompts

Create only makes changes to the specific element you’ve selected (Page, Component, Function, etc).

With a specific element selected, you can make more targeted changes:

✅ Style specific elements:

Make this page look like this: <screenshot>

✅ Debug specific functionality:

This function isn't returning the right data. I expect it to take in Y and return Z

✅ Add focused features:

Add a date picker to this form that only allows dates in the next 30 days

Switch between levels as needed - start with project-wide prompts for overall structure, then drill down to single elements for fine-tuning. Or start from a single element for simplicity, and then go back to project-wide level as you add more elements.