How to attach a sketch to AI tools

Tutorial · Workflow · Updated July 29, 2026

A sketch only helps if it reaches the model attached, in focus, and paired with a short prompt that does not fight it. This is the mechanical half of the workflow: export, attach, phrase, and revise.

Download PNG vs. screenshot

The whiteboard's toolbar download produces a clean image of exactly the board content — no browser chrome, no desktop wallpaper, no cursor. Prefer it whenever you can. Screenshots are fine in a pinch, but crop tightly:

Download (recommended) — one click, consistent framing, nothing to crop.
Screenshot — useful if you already switched windows or want to combine the board with something else on screen, but remove the toolbar, tabs, and taskbar before attaching. Clutter around the sketch competes for the model's attention.

Boards are session-based — closing the tab or refreshing clears them. If a sketch is worth attaching, export it before you do anything else, not after you have already started writing the prompt.

The attach recipe

Finish the sketch in 2D or 3D and check it at a glance for hierarchy — see the relevant sketching guide if something looks flat.
Download the PNG. If you keep several, name the file by screen or scene ("checkout-v2.png") so you can find it again.
Open the AI chat or coding agent that accepts image attachments.
Attach the file first, before typing anything — some tools process the image better when it anchors the message.
Write three to six lines of context below it (template in the next section).
Ask for a concrete deliverable: page code, a component tree, an art-direction note, or a revised prompt — not an open-ended "make it better".

Three real prompt-and-image pairings

Pairing 1 — a UI screen going to a coding agent

Image: a 2D wireframe of a settings page with a sidebar (see sketching a UI for AI).
Prompt: "Attached is a wireframe of a settings screen. Build it as a component using our existing Input and Button components. Sidebar items are Profile, Notifications, Billing. Match the layout in the image; treat box sizes as ratios, not pixels."

Pairing 2 — a character block-out going to an art tool

Image: a 3D primitive block-out of an enemy character (see block out a 3D character).
Prompt: "Attached is a proportion block-out for an enemy grunt. Match the silhouette — large head, short legs, one long arm holding a weapon shape. Style: stylized low-poly. Invent texture and face detail freely."

Pairing 3 — a flow diagram going to a product-spec assistant

Image: a 2D flow of three connected steps (see QuickShape examples).
Prompt: "Attached is a rough flow: start, form, success. Write the acceptance criteria for this flow assuming the form can fail validation and needs an inline error state. Ask me questions only if a step in the image is ambiguous."

Prompt template you can reuse

"Attached is a sketch of [screen / character / flow]."
"Match the layout / silhouette / sequence in the image."
"Tech or style constraints: [framework, component library, art style]."
"Ignore decorative polish; prioritize structure."
"Ask me questions only if a region in the sketch is ambiguous."

Notice what is missing on purpose: there is no line re-describing the layout in prose. If the image already shows it, restating it in text usually just introduces a contradiction the model has to resolve — trust the picture.

The revision loop

When the first result misses the mark, resist the urge to type a long correction. Sketch the fix instead:

Open the previous sketch mentally (or redraw the frame) and adjust just the part that was wrong — move a sidebar, enlarge a button, delete a column.
Export the corrected PNG.
Attach the new image with a short instruction: "replace the previous layout with this; everything else stays the same."

This keeps each round focused on one visual delta instead of accumulating conflicting text instructions across a long chat thread. If you are not sure why the layout came out wrong in the first place, check wireframe mistakes that confuse AI coding agents — low hierarchy contrast is the most common cause.

Privacy note

Exporting a PNG and uploading it to a third-party AI tool is your choice and subject to that tool's own policies. Memo Whiteboard itself does not require an account and does not store or cloud-sync your board in the current version — closing the tab clears it unless you downloaded first. See the privacy policy for details on ads and cookies on content pages like this one.