Prompting

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.

​

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.

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>.

​

Use Discussion Mode

• It can help to start by discussing/planning your project before you start building it. make sure the AI has a good plan to follow, etc. then start building
• if you’re stuck on a bug, it can help to switch to discuss mode to investigate without making edits or changes

​

Deep Thinking Mode

• Engage additional AI resources to think critically about your project, strategize or have the AI research best practices for your given segment, target audience, etc

​

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. 

​

Global prompting

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

✅ 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

Target individual pages or elements by name

✅ Style specific elements:

Make the user account 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