I keep a markdown file open in a separate window when I use Claude Design.
The file is titled claude-design-working-drafts.md and it contains everything I've learned about getting non-generic output from an AI design tool. The notes are partial. Some of them will be wrong by next quarter. None of them are a methodology — they're working drafts, the way a cook keeps notes on a dish that isn't finished yet.
This is one of those notes.
I built peterwd.com with Claude Design as the primary visual design surface — every screen, every layout, every aesthetic call ran through it before going to Claude Code for implementation. The site is shippable. Some of it is even good. None of it is what I would have built five years ago when "design" meant Figma and an external designer.
What follows is the part of the workflow that took longest to figure out: how to get Claude Design to produce output that doesn't look like every other AI-generated site.
The default problem
Give Claude Design a generic brief — "design a portfolio site for a software consultant, modern aesthetic, dark mode preferred" — and you'll get a competent, generic result. Purple-blue gradient hero. Inter sans-serif. Three benefit cards below the hero. Rounded shadcn-style cards on dark surfaces. Coral accent. The output is recognizably "AI design" within thirty seconds of looking at it.
This isn't Claude Design's fault. The model is interpolating across what humans have called "good design" in its training data — which means it gravitates toward what's currently fashionable, broadly safe, and Twitter-screenshot-able. The default output is the average of competent contemporary design. The average is by definition not distinctive.
The work of using the tool well is the work of closing the defaults. Every dimension you leave unspecified, the model will fill in with its average. Every dimension you specify with a clear constraint, the model will honor.
Which means the methodology is a methodology of constraint.
Seven dimensions to push
There are seven dimensions where AI design defaults silently flatten if you don't push back:
- Palette — without constraint, you get purple-blue gradients or Linear-style monochrome dark.
- Typography — without constraint, you get Inter or Geist sans-serif paired with itself.
- Component grammar — without constraint, you get rounded shadcn cards on dark surfaces.
- Spacing density — without constraint, you get the "luxury skincare" rhythm of
gap-8 py-24. - Motion language — without constraint, every state change gets
transition-all duration-300 ease-in-out. - Voice and copy tone — without constraint, you get "We make products that delight."
- Surface texture — without constraint, every surface is perfectly flat.
The brief for The Workshop — peterwd.com's interactive front door — pushes on all seven. The Atlantic Dusk palette, drawn from a photograph of the Bahia coastline at dusk. Geist Mono for status and system text, Geist Sans for content, Press Start 2P for pixel-art speech bubbles only. A pixel-art mascot that wouldn't fit any default. A SCUMM-coded verb panel that's neither bento grid nor card row. The output reads as itself, not as "AI design," because every dimension was closed deliberately.
This much I've documented elsewhere — there's a separate working file with the actual prompt templates. The interesting question isn't what the seven dimensions are. It's how you fill them in.
The references are the actual unlock
The single most useful insight I've extracted from working this way is this:
The model gives you what you give it. If you give it adjectives, you get average. If you give it references, you get something specific.
"Modern minimalism" is an adjective. The model has seen fifty thousand designs called "modern minimalist." The output will be the average of those — by definition, generic.
"Pentagram's identity work for The Whitney" is a reference. The model has seen that specific body of work. It can produce something adjacent to that specific aesthetic, which is not the average of everything.
The pattern holds across every dimension:
- "Editorial typography" is an adjective. "The typography on a 1996-era Wallpaper magazine cover, when the magazine was still strange" is a reference.
- "Warm and inviting" is an adjective. "The lobby of the Ace Hotel Palm Springs in 2011" is a reference.
- "Considered hospitality vibe" is an adjective. "Apartamento magazine's photographic restraint, applied to product layouts instead of interiors" is a reference.
Adjectives let the model pick from its average. References force the model to a specific point in its training data — one with character, often unusual, sometimes inconveniently old or obscure.
The references don't even need to be from design. The strongest references in my Workshop brief weren't designers — they were Monkey Island 2 for the pixel-art era, SCUMM verb panels for the interaction grammar, and the way old exhibition catalogs feel to flip through — paper-coded, document-coded, unfinished-yet-confident. None of those are web design references. All of them produced a more distinct output than "minimalist editorial portfolio" would have.
The takeaway: bring references the model wouldn't propose on its own. Most are not from web design. Some are from physical objects, films, magazines, old games, signage you saw in a city you visited once, the menu at a specific restaurant. Bring the specific, not the categorical.
The 75% ceiling
Here is the honest part.
Claude Design will get you to about 75% of what an extraordinary human designer would produce. Maybe 80% on a good day. The remaining 20-25% is not available to AI alone — not because the model lacks capability, but because that last 20% is where taste lives. It's the willingness to make weird, defensible, slightly-wrong choices that no model trained on "what humans called good design" will gravitate toward.
The 20% is:
- The decision to crop the hero image past comfortable, so the visitor sees only the bottom third of the photograph.
- The hand-stamped ink mark next to a wordmark, slightly mis-registered.
- The headline with one specific word that's too honest for a marketing site.
- The button replaced with a hairline-underlined word in body text.
- The misregistration of a duotone overlay by 2px.
- The decision that a section deserves more whitespace than the grid wants.
Each of these is a defiant choice — a small "I know this is wrong by industry consensus and I'm doing it anyway." The model can't be defiant. It's an averaging machine. Defiance requires a person with conviction and the willingness to ship something some viewers will hate.
This sounds like a limitation. It isn't, really. It's a division of labor. The model handles what benefits from averaging — layout grammars, component systems, typography pairings, color theory, accessibility, scaffolding. You handle what benefits from conviction — the weird choices, the personal references, the moments of risk.
The work is the collaboration.
What the human pass looks like
For peterwd.com specifically, the human pass — done in part by me, in part in conversation with Claude as a second pair of eyes — followed a pattern.
I'd walk through the site after a Claude Design pass, take screenshots of every surface, and write one or two sentences per screen about what felt "off." The off-notes weren't usually structural — the structure was fine. They were small: "the hero photo is the wrong crop," "the booking widget looks like a form, not a page element," "the third line of the headline sounds like marketing speak."
Then I'd implement the surgical fixes directly in code, one at a time. Not a refactor. Not a redesign. Each fix touched one or two files. Each one was a micro-decision: crop tighter, swap a button for an underlined link, rewrite a sentence to sound less polished.
The work of the human pass is the work of adding back what AI averaged out. The AI gave me the disciplined, professional, considered version. The human pass added back the small idiosyncrasies that signal a person made this. Not a lot. Maybe twelve to fifteen small fixes for an entire site. But the difference between the pre-pass and post-pass version is the difference between "this looks AI-generated" and "this looks like someone's actual site."
I don't think this work is automatable. Not because the model couldn't make those individual choices — it could — but because the willingness to defend each weird choice has to come from someone whose name is on the site. That isn't a model's job. It's the owner's job.
Why "working drafts"
The reason this piece is called "Working Drafts" rather than "How to Use Claude Design" is that the methodology isn't finished. It changes as the tool changes. The seven dimensions I push today won't be the seven dimensions I push next year. The references that produce good output will rotate. The 75% ceiling will move — probably upward, slowly.
Working drafts is what a serious practitioner keeps in any tool that's still evolving. The notes aren't the law. They're the running record of what's worked recently. A cook's notebook of dishes that are almost finished.
If you take one thing from this:
The tool is not the work. The brief is not the work. The references you bring, the constraints you close, the decisions you make about what to keep weird — that's the work. Claude Design is competent at producing what you describe. Describing well is what stays your job.
The model averages. You curate. The collaboration is the entire point.