Strategist · Designer · Operator

Launch
with Ben



Claude Code

Claude Code Design: I Concepted My Site in a Factory First

I let Claude Code concept two site sections from real pages before it wrote any code. What the loop looks like, what it can't do, and the prompt.

  • What this is

    Claude Code built six concepts for two sections of this site from real pages. I reviewed them on one link, approved four, and only then did it write code. It generates none of the design itself, and I skipped Figma.

  • What you'll gain

    A repeatable way to see three real directions before any code exists, and the prompt to start it.

    Who it is forSomeone who builds pages with Claude Code and gets the first idea back every time.

  • Estimated effort

    5 min read

    Skip it ifThe design is already agreed and only the build is left. There is nothing to concept.


I redesigned two sections of this site over two days and Claude Code did not write a line of production code until I had picked a concept. It built six first, from real pages. I approved four.

The tool doing the concepting is the UXXRAY Design Factory. It is the first step of how I build pages now, so when I wanted the Design Factory itself on my tools page, I ran that section through it too.

The loop

Before the agent touches anything I write a short brief: who the visitor is, the one thing they should believe, the one action I want. Every loud element has to trace back to a fact I can source. If it can’t, it goes quiet or gets cut.

Then the agent does the work, and the only thing that crosses back to me is a link.

  1. I write the brief and name the one action
  2. it reads the real pages first
  3. it builds three original concepts
  4. I open one review link
  5. I mark each approve, changes or reject
  6. it ports the winner into the real route
  7. I check the live page

Two steps cross to me, and both are judgement. The reading, the building and the porting stay on the agent's side.

“Reads the real pages first” is the part I could not do by hand. For the tools section it compared against 2,924 real page specimens and pulled three tactics from 1,960 SaaS funnels. A free trial or free tier showed up in 77%. A FAQ or objection block in 76%. Trusted-by logos in 76%. Those rates came off the API, not out of the model’s memory.

What round one looked like

Three concepts, one delivery, one link. The agent had a favorite and said so: a panel called Receipts, built around the comparison report. I picked a different one. Step 1 was a plain strip showing where the Factory sits in my build flow, with the Factory highlighted as the step that needs no setup. I marked it approve and left one word: “nice.”

Two Design Factory concepts for the tools page, stacked: a report comparing a draft against 2,924 real specimens, and a five-step build flow with the Factory highlighted

Round one, two of the three concepts. The agent's favorite is on top, the one I picked below it.

The other two have no verdict on record. I never marked them.

Next was askbowtie, which had just been rebranded. Same loop, new session, three concepts: the live Feed, a free-versus-credits card, and a question with an answer. I approved all three. Three askbowtie concepts: a live Feed pulse, free versus credits modes, and a question with an answer

The askbowtie round. All three approved, none of them rejected.

Then I told it where each one goes. The question-and-answer concept leads the tools page. The pulse and the pricing card moved to the askbowtie project page, where they became its “three ways in” block. Here is what went live.

The live Design Factory section on the tools page, built from the approved step-one concept

The live askbowtie section on the tools page, a question box and an example answer on the orange gradient

What shipped. The concepts were ported, not pasted: copy and figures were re-checked against the live sources before the build.

What it does not do

Heads up on three things, because the name suggests more than it delivers.

It generates none of the design. The Factory serves references and a review page. The agent wrote all the HTML, CSS and copy itself.

It does not know your brand. The palette it serves is UXXRAY’s own, so I had the agent build against the CSS my site actually ships. The copy of my styles in the repo’s factory/ folder is a stale snapshot: when I checked in August it was 452 lines against 998 in the real file. Approving a design on the snapshot means approving something the site cannot render.

The has/lacks report is the agent’s own reading. The comparison against the 77/76/76 rates says whether my draft has each tactic. The agent decides that. UXXRAY does not verify it, and the panel says so.

I also skipped Figma on both sections. My normal order is Factory, then Figma, then code. This time the approved concept went straight to code.

Where my port went wrong

Porting a concept to a real route took the longest, and it is where I got bitten. After the askbowtie round the agent deployed, and the site build had failed. It had not noticed, because it piped the build through a filter that printed nothing. The deploy shipped last night’s pages with only the tools page updated.

Checking the live pages caught it: the UXXRAY project page still showed the old figures. The fix was boring: add the new figures to the facts ledger the build checks, rebuild, read the build output instead of filtering it, redeploy. The agent’s earlier report that the project page, homepage and Press Kit were updated was wrong until that redeploy.

The prompt

The first paragraph is the Factory’s own one-prompt, copied from its page. The four lines under it are the rules I ended up enforcing across both sessions. Swap in your own task.

Read https://api.uxxray.com/api/v1/curriculum. Then design: a hero section for my app. Follow its three steps: (1) RESEARCH the real corpus first (library/specimens and /patterns), (2) BUILD original concepts in a Design Factory session, (3) REPORT: end your reply with how many real specimens you compared and, for each tactic, whether my draft has or lacks it with the corpus rate and denominator copied from the API, then the review link.

Before you build:
- Write the brief first. Visitor, the one belief, the one action. Every loud element must map to a fact with a source; otherwise make it quiet or cut it.
- Build against my real shipped CSS, not any snapshot in the repo.
- Label any example number as an example. Do not invent urgency.
- Register three concepts that argue different things, then give me the review link and stop. Do not write production code until I approve one.

Receipt The Factory prompt plus four rules from two sessions: six concepts, four approvals.

Paste it into Claude Code and swap in your task. If you have been taking the first idea your agent offers, the review link is the part that stops that.

Happy to answer questions about the loop or the prompt.

Related:

Sources

Ben Peetermans

Ben Peetermans

I build MVPs and run ad campaigns with AI, and I write these notes from real projects. Twenty years shipping for the web. If you want someone who works with these tools every day to build yours, that is what I do.