How to sketch a UI for AI coding agents

What "readable" actually means for a wireframe

An AI coding agent reads a wireframe the way a junior developer would: it looks for boxes it recognizes (nav, header, list, form, button) and infers relationships from size and position. A sketch is "readable" when those boxes are distinguishable by size and spacing alone, without color or polish. Three things make the biggest difference:

• Consistent outer frame — one rectangle that represents the viewport, so every other box has a frame of reference.
• Size contrast between regions — a primary button should visibly differ in size from a secondary link; a header band should be shorter than the main content area.
• One label per box — a two-word label like "Save changes" resolves ambiguity that an unlabeled rectangle cannot.

Rule of thumb: if you covered the sketch's labels and could still guess what 80% of the boxes do from shape and position alone, the layout is doing its job. If not, add one label, not more detail.

Worked example 1: a settings screen with a sidebar

Goal: hand an agent a screen with account settings split into sections — profile, notifications, billing — using a left sidebar for navigation.

1. Open the whiteboard in 2D and draw the outer frame first — a single rectangle roughly the shape of a laptop screen. Hold briefly so QuickShape can straighten the edges.
2. Draw a short horizontal band across the top for the header and write "Settings" inside it.
3. Draw a narrower rectangle down the left side for the sidebar. Inside it, write three short labels stacked vertically: "Profile", "Notifications", "Billing" — one line each, real words, not "nav item 1/2/3".
4. In the remaining space, draw three thin rectangles stacked with gaps between them for form fields, and label each with the field name above or beside it ("Full name", "Email", "Company").
5. Draw one smaller filled-looking rectangle below the fields and label it "Save". Make it visibly smaller than the form fields so it reads as a button, not another input.
6. Double-click any stroke's edge to select it if you need to nudge spacing — see selecting and editing in 2D for the exact hit targets.
7. Download the PNG and attach it with the prompt template below.

Worked example 2: a three-step mobile onboarding flow

Goal: communicate a swipeable onboarding sequence — welcome, permission request, and a call-to-action — without writing three paragraphs of description.

1. Draw three tall, narrow rectangles side by side, each shaped like a phone screen. Leave a visible gap between them so they read as separate frames, not one wide screen.
2. In screen one, draw a large circle in the upper half (a placeholder for an illustration) and a short line of text below it: "Welcome to [App]".
3. In screen two, draw a small rounded rectangle for a system permission dialog and label it "Allow notifications?" with two small boxes for "Not now" and "Allow".
4. In screen three, draw one large button at the bottom labeled "Get started" and a row of three small dots above it to suggest pagination.
5. Draw a small arrow between each screen so the reading order is unambiguous even without numbering.

This example matters because sequence is exactly the kind of thing a paragraph struggles to convey precisely — "then the user sees a permission prompt, then a final CTA screen" reads fine in English but leaves timing and layout open. Three boxes and two arrows settle it in seconds.

Choosing what to leave out

The fastest way to slow yourself down is to draw everything you would eventually want in the final UI. Skip these in the first pass, and only add them if the agent's first result is missing something structural:

• Exact colors — describe brand color in the text prompt instead.
• Icon artwork — a labeled box ("icon: search") is enough.
• Real copy — placeholder text like "Lorem" or a short label is fine.
• Pixel-accurate spacing — whiteboard sketches communicate ratios and order, not exact measurements.

If you catch yourself spending more than a minute or two on a single box, you have likely drifted from wireframing into visual design. Step back to rectangles. For a longer list of failure patterns, see wireframe mistakes that confuse AI coding agents.

Before you attach: a 30-second check

Zoom out on the canvas, or shrink the browser window, and look at the sketch from a distance. If the hierarchy still reads — header, then two or three clear regions, then one obvious primary action — it will read the same way to the agent. If it looks like a flat grid of same-sized boxes, add contrast before exporting. Full export checks are in the PNG export checklist.

Next steps

Open the whiteboard, pick one real screen from your current project, and sketch it using the settings-page steps above as a template. For attaching the result effectively, read how to attach a sketch to AI tools. If your screen has 3D elements — a character portrait or a product render — see 2D vs 3D first.