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:
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
Write "fix" to make small changes
If you have a small change, just write "fix" at the bottom of your prompt. Then describe what exactly you want to change (the more specific, the better) and Create will update that portion of your website or app. You can also paste in screenshots to make it very clear what you want to change.
Here's how:
Note: Once you've asked Create to make the fixes, you can delete "fix" from your prompt and Create will still remember the changes you made.
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
