Why design before code when an AI agent builds the screen in minutes: sketch, mockup and prototype

Juanlu ElGuerre, building an ecommerce platform with an AI agent, designs each screen before any code and found three conflicting rules by sketching a review screen first.

Juanlu ElGuerre is a developer building Tendero, an open-source ecommerce platform, with the AI coding agent Claude Code. In the first week he skipped design, and the screens that shipped worked but did not look like a shop. He now fixes the design system first, then a rough sketch, a mockup and a clickable prototype, before any code.

• He sketched a screen where a person approves or rejects product claims that an AI model extracted. The sketch exposed three rules that contradicted each other before any code existed.
• The rule that colours come only from the design token file had no test for five days. A later check found 575 hand-written colours in two design files that the test never read.
• The AI agent reads the instruction file CLAUDE.md at the start of each session. It opens a written decision record only when a rule in that file names the record by number.
• His prototypes use real catalogue data. One showed a wok described as carbon steel but recorded as stainless steel.

A team building with an AI agent can sketch a screen before coding to find rules that disagree, and can turn each design rule into an automated test. This is an inference drawn from one developer's account of his own project.

Derived by Working Surface from the article; more in the Playbook. Source line: This is the real reason to sketch: it is the cheapest place to find out that your rules disagree with each other.

9 October 2026: when AI agents take on routine work, teams write down in advance what a person still decides, put those rules where the agent reads them, and keep the people who approve able to understand the work.