This is a document about Claude's defaults. Every AI code generator has habits. These are Claude's, identified through repeated output and honest self-audit. The fixes aren't rules; they're counterweights. Apply the ones that matter for the project. Ignore the rest.
The problems are sorted by severity. The first five show up in almost every output. The rest are real but situational.
The worst offenders
These five show up almost every time and do the most damage.
01 Purple everything
Claude reaches for indigo, violet, and purple gradients by default. Blue-to-purple. Purple-to-pink. The palette skews toward Y Combinator demo day circa 2023. Warm colors, earth tones, and anything deliberately ugly almost never appear unless the prompt forces it.
One strong accent color on a flat background beats a gradient. If no brand exists, pick something that isn't purple. Consider earth tones, off-whites, desaturated colors. A restaurant site and a fintech dashboard should not share a palette.
02 Dark backgrounds, unreadable text
Dark mode as the default even when nobody asked. Then gray text on those dark backgrounds, creating a low-contrast situation that looks moody in a code editor and fails WCAG AA on every phone. White text on medium-blue or medium-purple; technically colorful, functionally invisible in daylight.
- Default to light backgrounds with dark text.
- If dark mode: body text should be
#fffor near it, notgray-400. - Test contrast ratios. 4.5:1 minimum for normal text. Do not eyeball it.
03 Uniform spacing, uniform structure
Every section gets py-16. Every card the same gap. Every container max-w-4xl mx-auto. The rhythm never breaks. Real designers compress things that belong together and give breathing room where emphasis is needed. Claude distributes space like a metronome.
Vary padding between sections. Let some containers run wider, others narrower. If two sections are closely related, pull them tight. If one section is the most important thing on the page, give it room to land.
04 The enormous hero
Full viewport height. Centered text. text-5xl font-bold. Muted gray subtitle. Gradient button. This pushes actual content below the fold for the sake of drama that serves nobody. The hero should answer "what is this" in under three seconds. Sometimes that means 40vh. Sometimes it means no hero at all.
05 Everything is a card
Features? Cards. Team members? Cards. Pricing? Cards. Testimonials? Cards. Always rounded-xl, always a shadow, always uniform. The whole page becomes a grid of identical boxes.
Ask whether the content benefits from containment. A divider line, a background color shift, a change in type size; all separate content without putting rectangles around it. If cards are right, vary their sizes.
The most damning tell is consistent mediocrity across every element. Human-built sites are lumpy. The homepage might be gorgeous while the contact page is an afterthought. AI maintains the same C+ quality uniformly.
06 Typography
One sans-serif. Size and weight as the only levers. No mixing of typefaces. No serifs. No display fonts for headlines. Always Inter or system-sans energy.
Pair a serif heading with a sans-serif body, or the reverse. Vary line-height and letter-spacing by context. Give headings actual character; an H1 can be lightweight, compressed, italic, uppercase. A law firm and a skateboard brand should look nothing alike in their type choices. Consider serif body text. It reads well on screen and has for years.
07 Alignment
Claude centers everything. Headings, body text, CTAs. It looks "designed" in a preview and reads poorly in practice. Default to left alignment. Reserve centering for short lines only; a heading, a tagline. Never center a paragraph. Right alignment works for metadata and supporting info.
08 Animation
transition-all duration-300 on everything. hover:scale-105 hover:shadow-lg on every interactive element. Motion everywhere means emphasis nowhere. Most elements should be static. Reserve animation for state changes and moments that actually need attention. Vary the timing when you do animate.
09 — Buttons & CTAs
Solid purple primary, bordered purple secondary, same visual weight, repeated every third section. Decide what the single most important action is. That button wins. Everything else is subordinate: a text link, a smaller button, or nothing. Not every section needs a CTA. Button labels should be specific. "See pricing" beats "Get started."
10 Content and copy
Placeholder text comes out too clean. Every section gets a similarly-sized paragraph. Headlines could belong to any business in any industry: "Empowering Your Vision," "Transforming Your Experience." No regional voice. No opinion. No specificity.
Write headlines that only work for this site. If it fits a dentist and a SaaS company, throw it away. Vary content length between sections. Some need one sentence. Others need four paragraphs. Include real details: numbers, names, locations. If writing placeholder copy, make it lumpy the way real copy is lumpy; a long paragraph followed by a short one, a section with just a sentence.
Watch the AI writing tells here too. Claude's copy defaults to importance inflation ("setting the stage for," "a testament to"), the negation pivot ("it's not just X, it's Y"), trailing participle clauses ("creating a space that feels..."), and promotional register ("vibrant," "renowned," "groundbreaking"). Cut all of it. Flat, specific language communicates more.
11 Images
Stock photography chosen by keyword. Diverse teams high-fiving in glass rooms. Laptops beside succulents. If using placeholders, make them obviously placeholders; solid color blocks or geometric patterns. Describe what real photography the site needs. If an image doesn't communicate something specific about this business, delete it. Empty space is better.
12 Navigation
Home, About, Services, Blog, Contact. Equal weight. No hierarchy. The nav is a template default, not a decision. Prioritize by business importance. Some pages belong in the footer. The nav can include one prominent CTA styled differently from the rest. Not every page earns top-level billing.
13 — Footer
Four columns of links, a newsletter signup, social icons, copyright. For a six-page site. Scale the footer to the site. A small site might need just a line of text and an email address.
14 — The blog section
Five to eight posts, all published within days of each other, all 800 words, all targeting obvious keywords. Then silence. If the site doesn't actually publish content, don't include a blog section. If it does, vary the preview cards and make it clear the content is a placeholder.
15 — The 404 page
"Oops! Looks like this page got lost." Confused robot illustration. Every AI 404 page does this. "Page not found" with a link home is fine. If personality is added, it should match the site's voice, not generic internet whimsy.
16 Structure and information architecture
Long single-page scrolls where sections exist to fill vertical space. "Why Choose Us" blocks with four icons and four interchangeable sentences. The sections could be shuffled into any order and nothing would change.
Build pages around user questions in sequence: What is this? Is it for me? How does it work? What does it cost? How do I start? Cut sections that exist for visual rhythm rather than communication. Consider multi-page architectures; not everything should be a single scroll.
17 Responsive design
The breakpoints work. The grid becomes a stack. Nothing was rethought. The mobile version is a reflow, not a design. Think about mobile as its own thing. Some elements should be hidden or restructured, not just compressed. Touch targets need to be bigger than click targets. If dark mode exists, design it as a separate color system instead of inverting the values.
18 — Testimonials
Three reviews, identical cadence, identical length, all five stars, attributed to "Sarah M." Vary length: one can be a sentence, another a paragraph. Include imperfections. Real reviews contain hedging, complaints buried inside compliments, casual tone. Not all ratings are 5.0. A 4.5 average is more believable.
19 Accessibility beyond contrast
Alt text exists but says nothing useful: "Team of professionals collaborating." ARIA labels present but meaningless. The site passes automated checks and fails the spirit of the exercise.
Write alt text that describes what's actually in the image, or mark it decorative. Use semantic HTML for its actual purpose; <nav> for navigation, <main> for content, not as generic containers. Form labels should say what the field is for. Keyboard navigation should follow a logical reading order.
20 The comfort zone
Claude can't do ugly on purpose. Every output trends toward the same polished SaaS look. Brutalist, editorial, punk, maximalist, vernacular web aesthetics require extremely specific prompting. "Clean startup" is the default, and the default is hard to escape.
Before building anything, name the aesthetic the project actually needs. A restaurant, a zine, a portfolio, a government form, and a SaaS dashboard should all look fundamentally different from each other. Be willing to produce something rough, asymmetric, loud, sparse, or strange. "Polished" is one option. Not the only one.
Imperfection can be deliberate. A slightly off-grid element. An unexpected color that doesn't match. A type choice that feels personal rather than safe. These things signal that a human made choices, not that a model selected the most probable visual arrangement.
Before shipping
Run through these. If more than two or three apply, the output needs another pass.
- Is there purple that nobody asked for?
- Is the contrast actually readable on a phone in sunlight?
- Is everything centered?
- Would the hero survive being cut in half vertically?
- Is every piece of content inside a card?
- Is there only one typeface with no character?
- Does every section have the same padding?
- Are there hover animations on elements that don't need them?
- Could this site belong to any business in any city?
- Does the page have a clear opinion about what the user should do first?
- Is the footer bigger than it needs to be?
- Would a real person write any of these headlines?
- Is the dark background necessary or is it a vibe?
- Do sections exist because a template would have them?