---
title: People told me my site looked AI-generated. So I designed it 12 more times.
description: "My portfolio got called AI slop, for choices I had made on purpose. The fix was more AI, pointed at exploration instead of production. Four rounds in three days, one more pass in Paper, and no single winner."
date: 2026-09-30
tags: [ai, design, process, claude-code]
url: "https://mahdif.com/blog/people-told-me-my-site-looked-ai-generated/"
---

# People told me my site looked AI-generated. So I designed it 12 more times.

My portfolio got called AI slop, for choices I had made on purpose. The fix was more AI, pointed at exploration instead of production. Four rounds in three days, one more pass in Paper, and no single winner.

Earlier this summer, a few people told me my site looked AI-generated. Not the writing. The design. I have been a product designer for 17 years, and my own portfolio read as slop.

The strange part is that I had designed it. The pastel aurora, my name in a handwritten script with a gradient running through it, the glowing button. I drew those in Figma and built them with AI. Gradients have been my thing since long before AI. But AI has since made that kind of gradient its signature, so people saw it and filled in the rest. The long copy and the heavy type didn't help.

<figure data-wide style="margin:2.75rem 0;"><picture><source media="(max-width: 767px)" srcset="/images/blog/people-told-me-my-site-looked-ai-generated/before-after-stacked.jpg"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/before-after.jpg" width="2082" height="690" alt="Two versions of the home page side by side. Left, the old one: the name Mahdi Farra in a handwritten script with a blue to pink gradient, a long heavy headline, and a button with a pastel rainbow glow. Right, today: a portrait, the name set plainly, a two line title, and two quiet buttons." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"></picture><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">Before: a script name in a gradient, a long headline, a glowing button. After: the page you're on.</figcaption></figure>

So I redesigned it. Four rounds with AI agents in three days, 23 mockups, and a new site live by August 11. Then seven more directions in Paper in September. Here is how it went, in order, including the round where I was confidently wrong.

<figure data-wide style="margin:2.75rem 0;"><div style="overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);"><svg viewBox="-6 0 1046 150" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;min-width:820px;height:auto;" role="img" aria-label="A timeline. August 6, round one, 7 pages from 7 agents. August 7, two more rounds, 10 more mockups. August 8, round four, 6 component sheets. August 11, shipped. Six weeks later, in September, Paper, 7 directions. September 26, shipped again, the page you're on."><style>.ptl-line{stroke:var(--foreground);stroke-width:2;opacity:.8}.ptl-gap{stroke:var(--muted-foreground);stroke-width:2;stroke-dasharray:5 6;opacity:.6}.ptl-dot{fill:var(--card);stroke:var(--foreground);stroke-width:2}.ptl-ship{fill:var(--primary)}.ptl-halo{fill:var(--primary);opacity:.16}.ptl-date{font-family:var(--font-mono);font-size:12.5px;fill:var(--muted-foreground)}.ptl-name{font-family:var(--font-sans);font-size:17px;font-weight:600;fill:var(--foreground)}.ptl-name-ship{fill:var(--primary)}.ptl-sub{font-family:var(--font-sans);font-size:14px;fill:var(--muted-foreground)}.ptl-note{font-family:var(--font-mono);font-size:12px;fill:var(--muted-foreground)}</style><line class="ptl-line" x1="23" y1="44" x2="515" y2="44"/><line class="ptl-gap" x1="529" y1="44" x2="693" y2="44"/><line class="ptl-line" x1="707" y1="44" x2="871" y2="44"/><text class="ptl-note" x="611" y="26" text-anchor="middle">six weeks later</text><circle class="ptl-dot" cx="23" cy="44" r="6"/><text class="ptl-date" x="16" y="82">Aug 6</text><text class="ptl-name" x="16" y="106">Round one</text><text class="ptl-sub" x="16" y="127">7 pages, 7 agents</text><circle class="ptl-dot" cx="187" cy="44" r="6"/><text class="ptl-date" x="180" y="82">Aug 7</text><text class="ptl-name" x="180" y="106">Two more rounds</text><text class="ptl-sub" x="180" y="127">10 more mockups</text><circle class="ptl-dot" cx="351" cy="44" r="6"/><text class="ptl-date" x="344" y="82">Aug 8</text><text class="ptl-name" x="344" y="106">Round four</text><text class="ptl-sub" x="344" y="127">6 component sheets</text><circle class="ptl-halo" cx="515" cy="44" r="12"/><circle class="ptl-ship" cx="515" cy="44" r="7"/><text class="ptl-date" x="508" y="82">Aug 11</text><text class="ptl-name ptl-name-ship" x="508" y="106">Shipped</text><text class="ptl-sub" x="508" y="127">the redesign goes live</text><circle class="ptl-dot" cx="707" cy="44" r="6"/><text class="ptl-date" x="700" y="82">September</text><text class="ptl-name" x="700" y="106">Paper</text><text class="ptl-sub" x="700" y="127">7 directions</text><circle class="ptl-halo" cx="871" cy="44" r="12"/><circle class="ptl-ship" cx="871" cy="44" r="7"/><text class="ptl-date" x="864" y="82">Sept 26</text><text class="ptl-name ptl-name-ship" x="864" y="106">Shipped again</text><text class="ptl-sub" x="864" y="127">the page you're on</text></svg></div><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">Two redesigns, six weeks apart.</figcaption></figure>

## First, the taste file

I keep a taste file. It's a plain markdown file that tells every agent how I like things. The section for this site listed the gradient wordmark, the glow button and the shader hero as features.

<figure data-wide style="margin:2.75rem 0;"><div role="region" aria-label="Excerpt of TASTE.md" style="border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden;"><div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);"><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="margin-left:10px;font-size:0.8rem;font-weight:600;color:var(--foreground);">TASTE.md</span></div><div style="overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);"><div style="display:inline-block;min-width:100%;padding:14px 0 16px;font-family:var(--font-mono);font-size:0.78rem;line-height:1.8;color:var(--foreground);"><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">17</span><span style="white-space:pre;padding-right:3.5em;">## The modes (pick by product type)</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">⋮</span><span style="white-space:pre;padding-right:3.5em;"></span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">27</span><span style="white-space:pre;padding-right:3.5em;">- **Mode C — editorial / brand.** The public portfolio + blog (mahdif.com): a **refined-minimal reading base**</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">28</span><span style="white-space:pre;padding-right:3.5em;">  (light-first, hairlines, no shadows, self-hosted sans body, generous measure) with **branded "juice" layered</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">29</span><span style="white-space:pre;padding-right:3.5em;">  on top** — <mark style="background:color-mix(in srgb, var(--primary) 14%, transparent);color:inherit;border-radius:3px;box-shadow:inset 0 -2px 0 var(--primary);padding:1px 0;">an animated gradient wordmark, a glow CTA, a Three.js shader hero</mark>, and ambient Howler SFX. Quiet</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">30</span><span style="white-space:pre;padding-right:3.5em;">  where you read, expressive at the brand moments. Use for personal-brand / marketing surfaces.</span></div></div></div></div><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">My taste file, the section for this site. What people read as AI was written down as a feature.</figcaption></figure>

So the brief started from that file and then overruled half of it with a ban list. No gradient text. No aurora blobs. No script fonts, no graph paper, no glassmorphism. What I meant by my gradients no longer mattered. What people read into them did.

## August 6: seven agents, seven pages

Seven agents got the same brief and the same real product screenshots. Each one built a whole page as a single throwaway HTML file, about a thousand lines with 45 live controls for type, color and spacing.

<figure data-wide style="margin:2.75rem 0;"><div style="overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);"><div role="img" aria-label="One brief, my taste file plus a ban list, fanning out to seven agents. Each agent card holds the page it built and its size: Hairline, 1,291 lines. Gallery, 902. Ledger, 1,181. Atelier, 1,185. Rule, 942. Companion, 1,276. Ask, 1,173." style="min-width:900px;padding:6px 36px 22px 36px;"><div style="display:flex;justify-content:center;"><div style="text-align:center;line-height:1.35;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:11px 30px 12px;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="font-size:0.95rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">One brief</div><div style="margin-top:1px;font-size:0.78rem;color:var(--muted-foreground);">My taste file plus a ban list, sent to seven agents</div></div></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="position:relative;height:20px;margin:0 calc((100% - 72px) / 14);border:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);border-bottom:none;border-radius:12px 12px 0 0;"></div><div style="display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:-20px;height:20px;"><div style="width:0;height:20px;margin:0 auto;"></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="width:0;height:20px;margin:0 auto;border-left:1.5px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);"></div><div style="width:0;height:20px;margin:0 auto;"></div></div><div style="display:grid;grid-template-columns:repeat(7,1fr);gap:12px;"><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 01</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-01-hairline.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Hairline</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>1,291 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 02</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-02-gallery.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Gallery</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>902 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 03</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-03-ledger.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Ledger</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>1,181 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 04</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-04-atelier.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Atelier</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>1,185 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 05</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-05-rule.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Rule</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>942 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 06</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-06-companion.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Companion</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>1,276 lines</div></div></div><div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(20 22 34 / 5%),0 6px 18px rgb(20 22 34 / 7%);"><div style="display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border);"><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="width:6px;height:6px;border-radius:50%;background:var(--border);"></span><span style="margin-left:auto;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);">agent 07</span></div><img src="/images/blog/people-told-me-my-site-looked-ai-generated/agent-07-ask.jpg" width="480" height="300" alt="" style="display:block;width:100%;height:auto;aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--border);"><div style="padding:8px 10px 10px;line-height:1.4;"><div style="font-size:0.85rem;font-weight:600;letter-spacing:-0.01em;color:var(--foreground);">Ask</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted-foreground);"><span style="width:5px;height:5px;border-radius:50%;background:var(--primary);"></span>1,173 lines</div></div></div></div></div></div><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">Round one. One brief, seven agents, seven single-file pages.</figcaption></figure>

I picked Companion. A near-black ground, a vermillion accent, and a chat panel docked on the right. Round two spent the next day refining it.

## August 7: I was wrong

Then I looked at a day of dark pages and orange, and wrote this into the next brief:

> "I think we have excessively been focused on this style with the orange theme and the dark background."

Round three banned the palette I had just picked and went five other ways. A day earlier I had been sure. Now I could see it was a mood, not a direction.

<figure data-wide style="margin:2.75rem 0;"><picture><source media="(max-width: 767px)" srcset="/images/blog/people-told-me-my-site-looked-ai-generated/twelve-directions-stacked.jpg"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/twelve-directions.jpg" width="2240" height="1078" alt="A grid of twelve full-page website mockups. The first seven are round one: Hairline, Gallery, Ledger, Atelier, Rule, Companion on a near-black ground with an orange accent and a chat panel on the right, and Ask. The last five are round three: Aperture, Orb, Pigment on dark green, Terminal in monospace, and Planes with a rust red block." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"></picture><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">All twelve whole-page directions. Round one is the first seven, Companion is the dark one in the middle row. Round three is the last five.</figcaption></figure>

## August 8: parts, not pages

Round four stopped designing pages. It was six component sheets: buttons, post lists, the chat, my name. It also gave me my gradients back, with one rule. A gradient is allowed inside a small object, like a button or a mark. Never as the page background.

<figure data-wide style="margin:2.75rem 0;"><picture><source media="(max-width: 767px)" srcset="/images/blog/people-told-me-my-site-looked-ai-generated/round-four-sheets-stacked.jpg"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/round-four-sheets.jpg" width="2224" height="948" alt="Six component specimen sheets in a grid: Vapour, a cool light sheet; Reeded, dark ribbed glass; Duotone, two inks on paper; Graphite, dark metal on bone paper; Riso, blue and pink ink on warm stock; and a hero shader sampler." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"></picture><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">Round four. Six component sheets, no pages.</figcaption></figure>

The problem was never gradients. It was gradients as wallpaper.

## August 11: what shipped

No direction won. The site that shipped kept Companion's chat panel and dropped almost everything else. The dark palette went. The gradients that are left live inside small things, like the orb in the chat panel, one click away behind the sparkle at the top of this page.

<figure data-wide style="margin:2.75rem 0;"><picture><source media="(max-width: 767px)" srcset="/images/blog/people-told-me-my-site-looked-ai-generated/companion-vs-shipped-stacked.jpg"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/companion-vs-shipped.jpg" width="2402" height="750" alt="Two pages side by side. Left: the Companion mockup, near-black with orange buttons and a permanent chat panel on the right. Right: the live site on a light ground with the chat panel docked on the right, its small gradient orb above a greeting." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"></picture><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">Left: Companion, round one. Right: this site with the chat panel open. The panel stayed. Almost nothing else did.</figcaption></figure>

Nothing from the lab shipped as code. I exported the settings I chose and rebuilt the site from those.

## September: seven more, in Paper

Six weeks later I redesigned the home page again, this time in Paper, the design tool I wrote about in [Paper is awesome but not perfect](/blog/paper-is-awesome-but-not-perfect). Claude Code designed straight onto the canvas, and I watched each direction take shape in real time. When one was close, I changed it by hand, and Claude picked up my edits in the next round. It was at least ten times faster than building in the codebase or in the lab.

<figure data-wide style="margin:2.75rem 0;"><picture><source media="(max-width: 767px)" srcset="/images/blog/people-told-me-my-site-looked-ai-generated/paper-directions-stacked.jpg"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/paper-directions.jpg" width="2224" height="948" alt="Six home page designs from a Paper file. A, Gallery: a light page with a small portrait and a glass asterisk. B, Index: a serif headline on warm paper over a list of work. C, Night: dark bento cards with a large portrait. D, Spotlight: one big case study card. E, Hub: a message card beside three shortcut cards. G: the shipped hero with a shader portrait and glass objects." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"></picture><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">The Paper round. Directions A to E on the way, and G, the one you're on.</figcaption></figure>

Seven directions, lettered A to G. G went live on September 26.

## Where the human stays

The agents never chose. The later briefs were mostly my own reactions, quoted back to them. What I liked, what I didn't, what I wanted to try next.

<figure data-wide style="margin:2.75rem 0;"><div role="region" aria-label="Excerpt of the round four brief" style="border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden;"><div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);"><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="width:9px;height:9px;border-radius:50%;background:var(--border);"></span><span style="margin-left:10px;font-size:0.8rem;font-weight:600;color:var(--foreground);">design/components-r4-lab/BRIEF.md</span></div><div style="overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);"><div style="display:inline-block;min-width:100%;padding:14px 0 16px;font-family:var(--font-mono);font-size:0.78rem;line-height:1.8;color:var(--foreground);"><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">13</span><span style="white-space:pre;padding-right:3.5em;">**What he liked, and what you must therefore carry:**</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">14</span><span style="white-space:pre;padding-right:3.5em;">&nbsp;</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">15</span><span style="white-space:pre;padding-right:3.5em;">- *"In round three, I like the filters, the different shader options with motion on the portrait. The</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">16</span><span style="white-space:pre;padding-right:3.5em;">  five different options for the portrait filter are great."* → **A switchable set of at least four</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">17</span><span style="white-space:pre;padding-right:3.5em;">  portrait filters, with subtle motion, is required in every variant.** It is a keeper, not an option.</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">18</span><span style="white-space:pre;padding-right:3.5em;">- *"In round 2, I like the portrait and the hero section in option number 4. In particular, the</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">19</span><span style="white-space:pre;padding-right:3.5em;">  duotone filter on the image."* → duotone screening of imagery is proven; it belongs in the</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">20</span><span style="white-space:pre;padding-right:3.5em;">  vocabulary.</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">21</span><span style="white-space:pre;padding-right:3.5em;">- *"I like my name with the filter on it, having the name on two lines, and I like the gem smoke</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">22</span><span style="white-space:pre;padding-right:3.5em;">  filter effect on it."* → **a two-line "Mahdi / Farra" lockup with a lit shader surface is proven.**</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">23</span><span style="white-space:pre;padding-right:3.5em;">- *"I like the copy in the header… it's shorter than the original copy I had."* → **hero copy stays</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">24</span><span style="white-space:pre;padding-right:3.5em;">  very short.** Shorter than you think is correct.</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">25</span><span style="white-space:pre;padding-right:3.5em;">- *"The header is interesting"* (of the press-sheet hero with crop marks and a colophon strip) →</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">26</span><span style="white-space:pre;padding-right:3.5em;">  structural framing devices around the hero are welcome.</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">27</span><span style="white-space:pre;padding-right:3.5em;">&nbsp;</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">28</span><span style="white-space:pre;padding-right:3.5em;">**What he disliked, and what you must therefore fix:**</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">29</span><span style="white-space:pre;padding-right:3.5em;">&nbsp;</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">30</span><span style="white-space:pre;padding-right:3.5em;">- *"I don't like the design we have on the rest of the page because <mark style="background:color-mix(in srgb, var(--primary) 14%, transparent);color:inherit;border-radius:3px;box-shadow:inset 0 -2px 0 var(--primary);padding:1px 0;">it feels a little overwhelming.</mark> I</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">31</span><span style="white-space:pre;padding-right:3.5em;">  feel we need to adjust the spacing a little and make it a little more unique and distinguished."* →</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">32</span><span style="white-space:pre;padding-right:3.5em;">  **spacing is a first-class deliverable in this round.** Every variant must publish an explicit</span></div><div style="display:flex;"><span aria-hidden="true" style="flex:0 0 3.4em;text-align:right;padding-right:1.4em;color:var(--muted-foreground);opacity:0.7;user-select:none;">33</span><span style="white-space:pre;padding-right:3.5em;">  spacing scale and use it visibly. Air is the fix; more elements is not.</span></div></div></div></div><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">The round four brief. My reactions to round three, quoted word for word, then turned into rules.</figcaption></figure>

The lab didn't stop me from converging too early either. It made the reversal cheap. Throwing a round away cost an evening of looking, not a month of building. I got 23 designs in the time it takes me to make two, and most of them were competent. Competent was the problem I started with. Picking the one that was actually mine was the only part that didn't get faster.

## If you want to try it

Start from your taste file, then write the ban list. Once you love a direction, make the next round forbid it. If you still want it afterward, it was real. And put every direction somewhere you can flip through.

<figure data-wide style="margin:2.75rem 0;"><img src="/images/blog/people-told-me-my-site-looked-ai-generated/lab-shell.jpg" width="1600" height="1000" alt="The design lab shell. A top bar numbers seven directions with the sixth, Companion, selected. The page fills the middle, and a controls panel on the right lists groups for colors, typography, layout, surfaces, compositions, motion and sections." style="display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);"><figcaption style="margin-top:0.85rem;text-align:center;font-size:0.85rem;color:var(--muted-foreground);">The lab. Seven directions across the top, Companion open, its 45 controls on the right.</figcaption></figure>

Throw the mockups away. Keep the decisions.

My site got called AI-generated, and the fix was more AI, not less, pointed at exploration instead of production. AI can generate twelve versions of your taste. It can't tell you which one is yours.
