Guide to prompting

Here’s our top tips to get apps that look and work better from your descriptions

The best language to use and tips on how to write specs that will get results you want. Soon, you’ll notice it’s way faster than coding.

History

Prompting in Create has evolved a lot. Here’s a blog post on the history:

We started as commands, but it was too slow for building. The key idea to get is that you are building up a product spec, not chatting.

You write something, see the generation, and then add details to things that need more details. Your app builds up in real time alongside you

If you need to make changes, you can jump back.

If it gets too long or complex, you can move things into components to build up.

General Tips

Spec, not chat

Describe your app in enough detail that someone reading it who knows how to code could make it. The more details you add, the better the results. If you don’t like something it generates, add more specific details to it so it generates right the next time, rather than talk at it.

Example:

v1: 4 cards each with image, title, subtitle.

<Create generates a card but the subtitles are too small>

v2:

Don’t: talk to it like chat - 4 cards each with image, title, subtitle. Make the subtitles bigger

Do: add more details on what you want - 4 cards each with image, title, subtitle. Subtitles 24px large ****

Set the scene

Give an overview at the start. Tell it what the app is about and what the key parts are.

Example:

Don’t: be vague - landing page

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

Be specific on parts

After setting the scene, break down each key part down into details on how they should look and behave. You can use bullet lists for these.

Example:

Do: break down each part:

Testimonials sections:
- 12 px space all sides 
- 4 cards in a grid 
- Each card has an avatar, name, subtitle, then testiomnial
- Make each look like a tweet

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: add hex color values: #d3d3d3 subtitles

Do: add spacing or size values: Title 32px, Subtitle 24px, with 12px space between them

Do: add specific Google Fonts: Use Inter for the titles and subtitles

Using Images

You can paste images into the spec to use GPT-4 Vision. You’ll get best results if you add more details on what you want with text around your images, rather than just an image.

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

🚨 GPT-4 Vision is early, so it’s best to use images for individual components or grabbing lots of text at once, rather than entire apps all in 1 image.

Examples:

Don’t: [image of entire app] - make this whole page: <app-image>

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

Do: use it to grab lots of text at once - Fill the pricing options with all the text from this image: <image of pricing options>

Do: use it to gain inspiration - Start with something that looks like this: <competitor image>. Now add: [more details]

Organize your thoughts

It helps to structure your spec into sections. It helps you keep track and make changes, and it helps the AI figure out what it should pay attention to. You can use bold, bullet lists, or new lines to help.

Examples:

Do: structure into sections

Overview: An app that uses /ChatGPT to provide recommendations for places to visit

UI:
- An input that lets the user type in a city
- Loading spinner next to it when its getting results
- Show results in a text area 

Functionality:
- When the user presses enter in the city input, send their city to /ChatGPT
with the prompt "Provide 3 recommended places for this city"
- Show results in the text area, and hide the original spinner. Show a back button
that resets the form 

Avoid “too long” → break into components

If there’s too much in your main spec (e.g. more than 1 page of text that starts to scroll), the AI has a harder time deciding what matters.

As it gets longer, break your spec into components. It will make it way more accurate.

Try again

If you don’t like what you have, you can press the “Try Again” button to have Create regenerate the app based on your spec. You’ll get a new version, even with the same prompt.

You can even use Try Again to generate good starting points at the start of your project. Once you have something you like, you can add more details to start building from there.

Go back

You can at any time press cmd-z to jump back to a previous version, or look through the previous versions from the revisions modal.

If you restore a previous version, and add details, it will start building from that version.

Be careful using ChatGPT

Chatting with an assistant is great - especially if you’re new to spec-ing. But ChatGPT has a tendency to output specs for Create that are way too verbose, long winded, and vague.

If you are going to have ChatGPT help you write your spec, tell it to Optimize my spec for clarity, details, and conciseness before pasting it into Create. It will cut down on unnecessary words.

We will soon launch a helper that does this for you within Create so stay tuned 🙂


Once you figure it out, Create can help you whip up components, sites, tools, and apps much faster than coding it yourself.

Here’s a simple tool one user made for help on how to turn English into commands Create might understand 👇

Last updated