guide
How to make Claude Code build client-ready websites
6 min read · updated July 4, 2026
The gap between 'it works' and 'a client will pay for it' is design, and Claude Code will not close that gap by being asked nicely. It closes when the agent builds from real direction and iterates against a score instead of a vibe.
Why good prompts still produce generic sites
Claude Code is a strong engineer with average taste, because taste was learned from the average of the web. Ask for 'a beautiful modern site' and you are sampling that average: centered hero, three cards, a gradient, Inter everywhere.
Detailed prompting helps, and a CLAUDE.md with design rules helps more. But text instructions share one ceiling: nothing checks the result. The workflow below adds the two missing pieces, direction the agent cannot drift from, and a measured audit of what it actually shipped.
The client-ready workflow
This is the loop that reliably lands above the bar, whether the direction source is a person or a tool.
- 1
Lock direction before any code
Decide palette (one accent on a neutral base), two type families, and the hero's layout posture before the first component exists. If you use Standout, get_design_direction returns all of it seeded to the business, plus finished section code the agent assembles instead of improvising.
- 2
Make the agent assemble, not invent
The biggest quality jump comes from the agent swapping CONTENT into art-directed sections rather than composing layouts from memory. Composition is where the AI look creeps in; content is where the agent is safe.
- 3
Demand the real states
Hover, active press, visible focus, loading, empty, and error states. Their absence is how agent builds get caught in the first week of real use. Put them in the definition of done.
- 4
Audit the rendered page, not the code
Screenshot at phone and desktop widths, compute the contrast, measure the gutters. Code review cannot see a hero whose text sits on sky. Standout's critique_design does this in one call and returns the screenshots with a 0-100 score.
- 5
Iterate against the bar, then gate the publish
Fix the lowest category first, re-run the audit, repeat until the score clears 85 with no ship-blocking tells. A deterministic score turns 'make it better' into a loop the agent can actually run alone.
Frequently asked
- Does a CLAUDE.md with design rules fix this?
- It raises the floor and is worth writing. It cannot verify the output, and its rules compete with everything else in context. Direction plus a rendered-page audit is what removes the drift, because failure becomes measurable.
- How many iterations does it take to clear 85?
- Starting from direction and finished sections, usually one or two critique passes. Starting from a freeform build, typically three to five, because the first passes burn on composition problems that direction would have prevented.
- Can the agent run this loop without me?
- Yes, that is the point of a deterministic score: the agent fixes, re-audits, and stops when the gate says ready. You review the final screenshots instead of art-directing every step.
- Does this work in Cursor, Codex, or Windsurf too?
- The workflow is identical in any MCP client: the direction, section code, and rendered critique are server-side. Claude Code, Cursor, Codex CLI, Windsurf, and claude.ai connectors all run it.
more guides