Images in prompts
Attach design references, screenshots, and diagrams to guide the AI. Limits, formats, and patterns that work.
Text prompts go far, but some ideas land faster as a picture. Layout reads images in your prompts and uses them for layout, color, and component choices. This guide covers the three ways to attach images, the limits you should know, and the patterns that get the best results.
Three ways to attach an image
You can add images to any prompt — the first one that creates a project, or a follow-up in the chat.
Click the image icon
The image icon sits in the prompt toolbar. Click it, pick files from your machine, done.
Drag and drop onto the prompt
Drop one or more files on the prompt box. A drop zone lights up while you drag. Non-image files are rejected with a toast.
Paste from your clipboard
Copy an image (a screenshot, a Figma frame, a file in Finder), click inside the prompt, and paste. The image uploads in place.
Paste is the fastest path for screenshots. Take the shot, click the prompt, paste, describe what to do with it.
Limits
| Limit | Value |
|---|---|
| Images per message | 5 |
| Max dimensions | 8000 x 8000 px |
| Supported formats | PNG, JPG, JPEG, GIF, WebP |
Images above the dimension cap are rejected with a toast naming the file and its actual size. If you try to attach more than five at once, Layout keeps the first five and shows a toast telling you the rest were skipped — upload the extras in a follow-up message.
Patterns that work
Point at what you want from the image
The AI does not know whether you care about the colors, the layout, the icons, or the copy. Say so.
Use the card grid from the attached screenshot. Keep our dark theme —
only copy the spacing and the card shape.Attach multiple references for different things
You can send up to five images at once. Use that to separate concerns.
- Image 1: the layout I want for the dashboard
- Image 2: the empty state style for the sidebar
- Image 3: the color palette (match the blues and grays exactly)Mark up the screenshot before you send it
The AI reads arrows, circles, and text labels drawn on the image. A one-minute annotation in Preview, Figma, or macOS Markup is often clearer than a paragraph.
Use a screenshot of the current app to describe a change
When something is wrong with what Layout already built, screenshot the preview, draw on it, and send it.
The highlighted button is too far from the input (see the red circle).
Move it up so it sits right under the label.Anti-patterns
Removing an attached image
After you upload, a 48 px preview appears above the prompt box. Hover the preview and click the X in the corner to remove it before sending. Uploaded-but-not-sent images are discarded when you send or clear the prompt.