You can show Phluffle pictures as well as telling it what you want. Attach a screenshot to rebuild a screen from it, or make images a design reference so every screen, now and later, follows their colours, type and components.
Attach screenshots
On the New prototype page, click Import screens (the paperclip). On a prototype, click the paperclip icon next to the prompt box. You can also drag images onto the prompt box or paste them with ⌘/Ctrl + V.
- Up to 5 images per prompt, 10 MB each.
- PNG, JPG, WebP or GIF.
- Images over 30 megapixels are rejected. Larger images are resized so the longest edge is 1800 pixels.
Then write your prompt as usual and send it.
Rebuild a screen from a picture
Attach a screenshot and ask for it: "Rebuild this screen as a working prototype" or "Add a settings screen that looks like this one". Phluffle matches it as closely as it can: layout, spacing, sizes, colours, fonts, corner radius, shadows, icons and text. Everything is rebuilt as real, clickable parts of the page; the screenshot itself is never pasted in as an image.
If the screenshot and your words disagree, your words win. So you can say "Rebuild this, but with a dark theme" and get exactly that.
Tip Screenshots of your own sketches or wireframes work too. Say what they are: "This is a rough sketch; turn it into a polished screen."
Use images as design references
A design reference is an image of your design system or brand (a style guide, a component sheet, a screen from your product) that Phluffle follows for every new version. It's how you keep a whole prototype on-brand without repeating yourself.
When you attach images, tick Use as design reference: "Future screens follow these images' colors, type and components."
- On the New prototype page it's ticked by default.
- On a prototype it's off by default, so a screenshot you attach for one change doesn't become a rule for every change.
Phluffle turns the references into a consistent set of colours, type sizes, spacing and components, and new screens added later follow them too.
Good to know Up to 4 design references are used per generation, the most recent first.
Manage design references
On a prototype, open Design references in the rail on the left: "Images of your design system or brand. Every new version follows their colors, type and components."
- Add one: click + Add images.
- Remove one: click the × on its thumbnail.
- From the chat: images you've attached show as thumbnails in the chat. Click the ★ on one to Use as design reference, or click it again to Stop using as design reference.
Changing your references affects new versions only. Existing versions stay as they were.
Match a look in Start with a flow
On the Start with a flow page, Match a look has its own Add a screenshot button. That screenshot becomes a design reference that every screen follows. Phluffle copies its style, not its content, and builds the screens you planned.
Tips for better results
- Crop to what matters. A clean screenshot of one screen works better than a whole desktop with other windows.
- Use clear, readable images. Phluffle reads exact colours and text from them when it can.
- Say what each image is for. "The first image is our style guide; the second is the screen to rebuild."
- Keep references focused. A few strong examples of your brand beat many mixed ones, and only the most recent 4 are used.