Wireframe mistakes that confuse AI coding agents

1. No size contrast between elements

If a primary button, a secondary link, and a section heading are all drawn as similar-sized rectangles, the agent has no way to rank their importance. It will often default to treating the first one it encounters (usually top-left) as primary, which may not be what you meant.

Fix: make the primary action's box at least noticeably larger or bolder than secondary ones. Redraw it wider or thicker-stroked rather than adding a text label like "(important)".

2. Unlabeled boxes everywhere

A grid of plain rectangles with no text is ambiguous between a card list, a photo gallery, a button row, or a form. One or two words per box ("Product name", "Price", "Add to cart") resolves most of that ambiguity instantly.

Fix: label at minimum the boxes whose purpose isn't obvious from position alone. A header band under the outer frame rarely needs a label; a button in the middle of a form almost always does.

3. Missing outer frame

Without one enclosing rectangle representing the viewport, every other box floats without a reference for margins, edges, or overall aspect ratio. The agent may assume a much wider or narrower canvas than you intended.

Fix: always draw the outer frame first, shaped roughly like the target device (wide for desktop, tall and narrow for mobile).

4. Prompt text that contradicts the sketch

Attaching a left-sidebar layout and then writing "put the nav across the top" forces the model to choose which instruction to trust — and it may blend both awkwardly. This is the single most common cause of a result that looks like neither what you drew nor what you asked for.

5. Too much detail in the first pass

Tiny icons, exact copy, and pixel-precise spacing slow down the sketch and rarely change the first result, because an agent treats a wireframe as a structural reference, not a pixel spec. Extreme detail can also compress badly in a PNG export, turning careful icon work into a blurry smudge that adds noise instead of signal.

Fix: use one labeled box per icon ("icon: search") in the first pass. Add real iconography only after the structure is confirmed.

6. Every region the same size (no hierarchy)

A header, a sidebar, and a content area drawn at roughly equal heights and widths reads as "three equal panels" rather than "one small header, one narrow sidebar, one large content area." Real layouts are rarely balanced 33/33/33 — sketches should reflect that.

Fix: make the header visibly shorter than the content height, and the sidebar visibly narrower than the main area, in the same proportions you actually want.

7. Ambiguous reading order

A flow of steps drawn without connecting arrows or clear left-to- right / top-to-bottom placement can be read in more than one order. This matters most for onboarding flows, wizards, and anything sequential.

Fix: add a simple arrow between steps, or number them (1, 2, 3) in a corner. Either is enough — you don't need both.

8. Forgetting to export before the tab closes

This isn't a drawing mistake, but it produces the same symptom: no usable image to attach. Memo Whiteboard boards are session-only — refreshing or closing the tab clears unsaved work. A sketch you meant to attach "in a minute" is easy to lose if you switch tasks first.

Fix: download the PNG the moment the sketch is usable, even if you plan to keep refining it. Re-export later if you improve it.

A quick self-check before attaching

Look at the sketch from across the room, or shrink the browser window until it's small. If you can still tell which box is the primary action and which region is the main content, the hierarchy will likely survive the model's reading of it too. For the full pre-export pass, see the PNG export checklist. For the drawing method itself, start with sketching a UI for AI and QuickShape for cleaner geometry.