The same screens, with and without DESIGN.md
Left: what AI coding tools build by default. Right: the same screen with DESIGN.md in the repo. Under each pair: what changed and what independent research measured for that fix.
The mockups are illustrative — product names, prices, and review counts are invented for the demo. The numbers in the captions are real and every one links from the research page.
The signup form
A two-column form whose only labels are grey placeholder text inside the fields, every field marked required with an asterisk, a low-contrast outlined Submit button, and unreadably faint fine print.
A single-column form with a visible label above the field, persistent helper text, one filled high-contrast call to action labelled "Start my free trial", and a reassurance line.
- Labels moved above the fields, single column. Eyetracking found top-aligned labels give the fastest completion; placeholder-as-label vanishes the moment you start typing.
- Fewer fields. Each extra field lowers conversion ~4% on average; cutting 11 fields to 4 produced +120–160% in A/B tests.
- One filled, benefit-led CTA. "Start my free trial" answers what happens on click; outlined "ghost" primaries lose clicks.
The pricing page
Six equally-weighted pricing tiers in a cramped grid, each with its own identical Buy button, and a vague "save 20 percent with annual" line.
Three plans, with the middle one visually recommended via a "Most popular" badge and a stronger border, a named call to action "Start with Pro", and the honest annual math spelled out.
- Six tiers became three. In the classic choice study, a 24-option display converted at 3% vs 30% for 6 options — more choices measurably freeze buyers.
- Exactly one recommended plan, marked with a border and badge — defaults are the strongest behavioral lever in interaction design.
- Honest toggle math. "$15/mo billed yearly — $180 today" instead of a vague "save 20%": concrete beats abstract.
The product card
A product card with three competing badges, a short cryptic product name, no rating, no visible price — it says "see price in cart" — and a ghost Details button.
A product card with one sale badge, a long descriptive product title, a 4.6 star rating with a review count, a visible price with the original struck through, a concrete delivery date, and a filled Add-to-cart button.
- Reviews with a count appeared. Displaying reviews raised conversion +190% to +380% in the Spiegel/Northwestern research; a rating without a count reads as fabricated.
- The price is visible, with the original as a strike-through anchor. What users cannot see, they will not use.
- One priority badge, a long descriptive title, and a concrete date. "Arrives Thursday" outsells "ships in 2–3 days".
The checkout step
A checkout that demands account creation with email, password, and confirm-password fields before buying, hides the total, and says shipping and taxes will be calculated at the next step.
A checkout with a labeled step indicator, express wallet buttons on top, a continue-as-guest path with a single labeled email field, and a persistent order summary showing the all-in total including shipping.
- Guest checkout first. Replacing forced registration with a guest path produced +45% completed purchases — the "$300 million button". Forced account creation alone drives ~26% of cart abandonment.
- The all-in total shows from step one. Unexpected extra cost at checkout is the #1 fixable abandonment reason (~47% of abandoners).
- Express wallets on top, labeled progress steps, and one thing per step.
The mobile product screen
A phone screen with a hamburger menu, a small low-contrast buy link at the very top of the screen, content below, and nothing actionable within thumb reach at the bottom.
A phone screen where the content scrolls freely and a sticky bar is pinned to the bottom of the viewport showing the price and a filled Add-to-cart button, inside the thumb zone.
- The buy action moved into the thumb zone. In Hoober's field study (n=1,333), ~49% of people hold the phone one-handed — the bottom-center of the screen is where mobile CTAs convert.
- A sticky bottom CTA with the price appears once the inline button scrolls away — the single most reliable mobile-commerce pattern.
- Targets ≥ 48px, top corners reserved for ancillary actions only.
The empty state & the error
A dashboard panel titled Invoices that is completely blank, a raw error code, and a form field that was wiped clean after a validation error.
The same dashboard panel showing a friendly empty state — "No invoices yet" with a create-your-first-invoice button — and an inline error that explains what happened and how to fix it while keeping the typed input.
- The blank panel became onboarding. An empty state states the status in plain words, teaches the feature, and starts the first task — never a dead end.
- The error says what happened and how to fix it — adjacent to its source, in a calm tone, with the typed input preserved instead of wiped.
- No raw error codes. "Error 422" means nothing to a buyer; "use MM/YY" recovers the sale.
Want every screen to come out like the right column?
One Markdown file in your repo and your AI applies these fixes by default — with page-type playbooks for landing, pricing, product, checkout, dashboard, and content pages, and a ship checklist to audit the result.