Brief
One visitor, one action
A stressed homeowner with water on the floor needs one thing: a fast, trustworthy way to call.
Case studyService provider
Carter & Co. Plumbing
The brief: A stressed homeowner with water on the floor needs one thing: a fast, trustworthy way to call.
Webnailed build example — a demo, not a real business.
Proof spine
This demo is a teaching object, not a fake success story.
It shows what changed, which Standard criteria improved, and what a member should save into their own project before asking for an audit.
Before
Raw AI trap
Corporate-speak at a moment of panic
After
Webnailed pass
The improved version puts a large tap-to-call button in the hero and demotes the form to a shorter secondary path.
Audit
WN-04 · Mobile & accessible
Built for one-thumb panic use: call button, icons, no walls of text.
Project
Action the member can repeat
Match your primary CTA to the visitor's moment and save a mobile_access_pass.
The decisions, annotated
Why this works — pinned to the pixels
Four deliberate decisions make this page feel professional. Tap each pin to see the reasoning — and the module that teaches it.
carter-co-plumbing.example
Callout 1 of 4 · tap pins or cards
Weak vs strong
What the raw AI draft would have shipped
Same brief, no system. The weak version below is what AI tools produce by default — it looks finished, and that's exactly the trap.
The same brief, two outcomes
Illustrative weak draft — what NOT to ship
- Corporate-speak at a moment of panic
- Placeholder '[YEAR]' shipped to production
- A long form instead of a phone number
- '4.9★ from 2000 reviews' the AI made up
- Looks finished. Isn't. That gap is what Webnailed teaches you to see.
Synthetic teardown
Carter & Co. Plumbing: mobile CTA
Labelled example: Carter & Co. Plumbing is a demo, not a real business.
Weak state
The raw draft makes an urgent phone visitor complete a seven-field desktop form while the phone number sits in the footer.
Improved state
The improved version puts a large tap-to-call button in the hero and demotes the form to a shorter secondary path.
D4 · Primary action
Before: Seven-field form
After: Tap-to-call
The action matches the visitor's real moment.
D1 · Phone number
Before: Grey footer text
After: Hero tap target
The urgent action is easiest.
D6 · Mobile form
Before: Overflowing desktop form
After: Three thumb-sized fields
Phone visitors need less friction.
Lesson
Design for the situation, not the desktop.
Project action
Match your primary CTA to the visitor's moment and save a mobile_access_pass.
The brief that steered this buildWorkflow excerpt — members get the full contracts
Build a page for a local plumbing service. Visitor: a stressed homeowner with an urgent leak, on a phone. Primary action: call now (tap-to-call). Emergency availability visible first. Hard rule: demo phone number, demo licensing label, no review counts.
Notice the hard rules: honest-proof constraints are written into the prompt itself. That is the difference between prompting and directing.
Build something like this
Study the breakdown, then follow the path and build your own honest version — with two private audits a month to keep you on the standard.
Join Webnailed — 19 EUR/monthThe next case study could be your site.
Members learn exactly these decisions — and get private audits that check whether their own pages make them.
19 EUR/month · cancel anytime · no income promises