A prompt is just a description of what you want, in your own words. The clearer it is about who the product is for, which screens it needs and what happens on each one, the closer the first version will be. This page covers what to put in a first prompt and how to ask for changes after that.
What to put in your first prompt
Your first prompt goes in the box on the New prototype page, under "What do you want to bring to life?". It can be anything from 2 to 8,000 characters. A good one covers:
- What it is and who it's for. "A booking app for a small yoga studio, for regulars who book on their phone."
- Phone or desktop. Say "phone app" or "mobile app" if it's for phones. Phluffle then designs for a 390-pixel-wide screen and shows it in Mobile size automatically. Otherwise it designs for the web.
- The screens. List them by name: "a schedule, a class detail screen, a booking confirmation and a profile".
- What's on each screen and what people do there. "The schedule shows this week's classes with the teacher, time and spots left. Tapping a class opens its details, with a Book button."
- How it should look. A few words is enough: "calm and minimal, sage green accents, rounded cards". Or attach a screenshot (see below).
For example:
A phone app for a small yoga studio. Screens: a weekly schedule of classes (teacher, time, level, spots left), a class detail screen with a Book button, a booking confirmation, and a profile with upcoming bookings and a class pass balance. Calm, minimal style with sage green accents and rounded cards. Use realistic class names and teachers.
Press ⌘/Ctrl + Enter or click Create a prototype.
Tip Planning a bigger app with lots of screens? Start with a flow lets you lay out every screen and where each button goes on a board, then builds it all from one brief.
Ask for realistic content
Prototypes are more convincing (and easier to test with people) when they're full of believable content. Ask for it directly: "use realistic names, prices and dates", "show 8 products in the grid", "fill the inbox with a few real-sounding conversations". If your product has its own vocabulary, put a few real examples in the prompt.
Show it a screenshot
Words are great for structure; pictures are better for looks. Attach screenshots with Import screens on the New prototype page or the paperclip on the prototype page (or drag and drop, or paste). You can:
- Ask Phluffle to rebuild a screen from a picture: "Rebuild this screen as a working prototype."
- Ask it to follow a style: tick Use as design reference so every future screen follows the images' colours, type and components.
If a screenshot and your words disagree, your words win. See Screenshots and design references.
Change it in small steps
Once the first version is built, type changes into Tell Phluffle what to change… under the chat. Each prompt makes a new version built on the current one, and Phluffle keeps everything you didn't mention as it was.
Small, specific prompts work best:
- Good: "On the schedule, add a filter for level (Beginner, All levels, Advanced)."
- Harder: "Make the app better and add filters and fix the colours and add a map."
If you have several changes, send them one at a time. Each result is easier to check, and if one goes wrong you can go back to the version before it. See Versions, restore and retry.
A few patterns that work well:
- Name the screen and the thing: "On Profile, move the class pass balance to the top."
- Say what should happen: "Tapping Book should go to the confirmation screen."
- Add a screen and say where it's linked from: "Add a Teachers screen and link it from the class detail."
Use Scope for focused changes
When a change only affects one screen or one element, click Scope next to the prompt box and choose Only {screen} or Pick an element…. Phluffle then changes just that part and leaves every other screen exactly the same. It's faster and usually uses fewer credits. See Change one screen or element.
For tiny tweaks like a word, a colour or some spacing, skip the AI and use Visual Edit instead. It uses no credits.
Ask for real data and pictures
- Forms that save. You can ask for forms, sign-up and lists that store real data, for example "make the booking form save bookings and show them on Profile". This works once the prototype is published with Live Deploy. See App data.
- Photos. If AI images are on, Phluffle fills image slots with generated photos automatically. See Images.
Pick a model
The model picker on the New prototype page (and Model under the prompt box on the prototype page) chooses which AI builds your prototype. The default is anthropic/claude-sonnet-4.5. A model you pick on the prototype page applies to your later prompts. If a result isn't what you hoped, trying the same prompt with another model can help.