Designing past the AI template, prompt by prompt

The more I built with AI, the more I noticed a gap between a page that looked polished and a page that felt considered. The same gradient headlines, reassuring badges, tidy cards and confident copy kept turning up. They are familiar, often well-liked design choices. Repeated together without much connection to the work being presented, they start to make very different projects feel interchangeable.

“AI slop” is one way people describe that feeling. I understand the frustration, and I also know how much work can sit behind something that still looks generic. These interfaces make it quick to get a plausible first version. Deciding what deserves to stay, explaining what feels wrong and following a revision through its details takes a different kind of effort. As the defaults become more recognizable, they can suggest that a site stopped at the first answer, even when its author put a great deal of work into it.

I could see that problem on my own portfolio. There was work I cared about underneath a presentation that still leaned on choices I’d started to recognize everywhere. I wanted the site’s appearance and behavior to reflect the attention I was putting into the projects it describes, with details that had a reason to belong here.

That was the impetus for this round of work with Claude and Codex. I kept giving more specific direction, looking at the result on my phone, and asking whether each change improved the experience as well as the visual character. Readability, accessibility and performance remained part of the design work.

If you’ve built something with these tools and felt that it worked but didn’t quite feel like yours yet, you’ll probably recognize the process. The reel below shows where this round landed. The rest of the post follows the decisions and revisions that got it there.

That’s the October upgrade of this site in 82 seconds. Every footage pane is real benlive.tv, captured frame by frame, the whole reel is rendered from code, and every number on screen traces back to a release record.

This post covers what changed and why, how I directed two AI engineers through it, the technical details, how the reel was built, and recast briefs based on the prompts that guided the work. The short version: the AI built it, I judged it on my phone, and the AI refined it.

What changed, and why

By October the site had already dropped its loudest AI-template habit, the gradient-filled headline. Work that shipped at the start of the month added block lettering with real extruded depth, a palette for each section, a 768-particle swarm as the logo mark, particle crests beside the headings and self-hosted fonts.

It still had tells: headings that singled out a word by color, tinted “information pills” above the heroes, underline trims under section titles and stock arrow icons on external links. On a portfolio, that familiarity can obscure the judgment and care behind the work. The October 12 release replaced them with details that belong to this site:

• Lettering voices. One word or short phrase in each landing page’s hero (two on Home) is neon script that flickers to life, and spatial and WebXR headings get a “stereo” cyan and violet depth split.
• Neon section titles. The landing pages’ section titles carry a neon word instead of an underline trim.
• Status lamp. Small caps beside a lamp that breathes every 3.6 seconds replace the tinted pill.
• Swarm arrows. A nine-dot flock replaces stock arrows and stretches forward when you point at it.
• Matched featured cards. “Chat About Ben” and the 3D gallery entrance share one card design.
• Focus-pull reveal. Content sharpens out of a blur as you scroll, replacing fade-ins that had stopped working.
• Tap bursts. Tapping empty page space releases particles in that page’s colors.
• Header swarm. The logo swarm keeps moving while it holds each form, and a pumpkin leads its rotation through October.
• 3D companion stage. In the homepage’s 3D mode, a small robot follows a particle guide to batteries and water bottles.
• WebXR on a phone. The gallery has a compact app bar, and its sound plays with the ring/silent switch set to silent.

Underneath, all 24 Cloud Functions moved from Node 20 to Node 22. The main release went out on the morning of October 12, and five Hosting follow-ups shipped the same day through the same gate.

How it was built: AI builds, I judge, AI refines

It started on October 9 with a plan from Claude to lock in every pending update before a year-end quality audit. For that release, I required two independent engineering approvals before deployment, and both reviewers were AI.

Codex approved first. On October 11 it initially held deployment over three findings, including sitemap dates drifting to the build date, which broke build idempotency, and light-theme labels on one AI Lab page at roughly 2:1 contrast. It fixed them, rebuilt the browser test runner to stay inside memory limits, moved every check onto local hardware and approved.

Claude Opus 5.5 gave the second approval after running the complete gate on its own. Then it took on the polish pass: Claude did the design and engineering while I directed and judged on my phone.

That work ran on a separate branch so the approved candidate stayed untouched. Claude served it over HTTPS on my local network, I opened it on my iPhone and typed what I saw, and Claude measured before it changed anything. Early on October 12 I asked for its own judgment on the homepage’s 3D robot; later prompts, recast below, brought in the lettering voices, the lamp and the swarm arrows.

Before the morning release I handed Claude the final gate and the deploy, with a 3D-mode bug still open and more polish notes to come. Claude worked through them, ran the 12-step gate, deployed that morning and smoke-tested production. Later checks on my phone turned up two more companion problems, each fixed in its own gated release, and after the last one I accepted the companion.

Under the hood

Lettering with voices

Headlines use “Ben Lettering,” which is Inter’s variable font registered under its own name, so they get real heavy weights instead of synthesized bold. The extrusion is a text-shadow stack (lit edges, four stepped side layers and two soft shadows) with every offset in em, so the depth scales from a phone to a 4K screen. An emphasized word keeps its neighbors’ extrusion geometry and changes only its face color, lit edge and weight.

The neon word is Caveat at 1.22 times the headline size (1.08 for a phrase), weight 650, rotated −3.5 degrees, with negative block margins so the sign overhangs its line. A build step wraps the chosen phrase or phrases in each heading, plus one letter that stutters once in an 11-second cycle. The glow is five stacked blurs, a white-hot core and four in the section’s accent color, over a mount shadow that stays put while the gas flickers. How it animates mattered more than how it looks:

/* Starts lit, so a word whose ignition is paused off screen still reads at full contrast. */
@keyframes neon-ignite {
  0% { opacity: 1; }
  3% { opacity: .25; }
  9% { opacity: .9; }
  12% { opacity: .3; }
  19% { opacity: .95; }
  22% { opacity: .55; }
  30%, 100% { opacity: 1; }
}

Opacity only. The first release animated a registered custom property, --neon-power, that fed color and text-shadow, so every frame restyled and repainted the glow. Under a 14× CPU stress profile, style, layout and rendering work roughly doubled against the pre-polish candidate both engineers had approved. A same-day follow-up draws the light once at full power and animates only opacity, which the compositor handles without repainting; that brought those totals back close to the approved build’s. The stress score itself did not move in the October 12 releases. A later local performance pass reduced redundant navigation measurements and crest-placement work, reaching a three-run median of 90 against the unchanged 14× target. That is a local stress result, not a phone benchmark or an independent second-engineer approval. The keyframes start lit because off screen the animation is removed, so a paused word is never frozen mid-flicker, and under reduced motion every voice is static and lit.

The script font nearly broke the layout budget. The combined candidate’s first gate run failed Lighthouse CLS on /blog/ at 0.0511 against a 0.05 budget, and /ai-lab/ later hit 0.129, because neon words re-wrapped when Caveat replaced its stand-in font. The fix is a metric-matched fallback, plus a Caveat preload only on pages whose opening heading has a neon word:

@font-face {
  font-family: 'Caveat Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 70.2%;
  ascent-override: 136.8%;
  descent-override: 42.7%;
  line-gap-override: 0%;
}

That brought CLS on all six lettered pages to 0.0004 or below without moving LCP.

Swarms, arrows and the companion

The logo mark is 768 particles morphing between a robot, a blob, a brain, a cat and a spark, from geometry a seeded build script generates ahead of time so each particle keeps its identity through every morph. October’s change was pacing: held forms now turn and tilt, a scan band sweeps each one, and hovering doubles the clock. The pumpkin leads from October 1 to November 1 by the visitor’s own date, a window in the data rather than a redeploy. A swarm arrow is nine dots; on hover or focus each follower starts a beat later and travels a little less, so the flock stretches along its heading.

In 3D spatial mode the renderer tries WebGPU and falls back to WebGL2, and the bottom 30% of the viewport becomes a stage band that content dissolves into. Tap the floor and a particle cloud, the guide, moves there; the robot follows it to batteries and water bottles, which vanish only when consumed. The band used to retract at the bottom of the page, where on my phone the footer then covered the floor. Now it never retracts, and a band-high space after the footer keeps the stage reachable.

The numbers

Every release that day went through the same 12-step local gate, ending with the browser suite on Desktop Chrome, Desktop Firefox and Mobile Safari. Skipped and flaky tests are counted rather than passed as green, and none of it runs on hosted CI. These are the numbers I’ll put my name on, with their labels:

• Lighthouse performance 99 on the homepage: standard mobile profile, local lab run on the release gate.
• CLS at or below 0.0004 on all six lettered pages, after the font fallback fix.
• 3,680 passing browser test runs on the morning release’s final gate (Chrome 1,338, Firefox 1,222, Mobile Safari 1,120), zero failed. That’s one suite in three engines with per-engine skips, not 3,680 unique tests.
• 14 of 14 production pages passed the post-deploy smoke test, and 3 of 3 live chat checks passed.

All of those are lab and release-gate measurements, not field data.

How the reel was made

The reel came from a fresh Claude Opus 5.5 session working from a context package: a brief, motion and verification guides, story-framing notes from Koda, my AI collaborator, and a fact sheet written by the session that shipped the release. The fact sheet was the source of truth for every number and line of copy, including a list of claims the reel must not make. My eyes were the acceptance gate.

It went through four versions: v1 at 38 seconds, v2 at 84, v3 at 82, and v4, the one above. The brief asked for 30 to 40 seconds; I asked for holds long enough to read. v4 keeps v3’s words (apart from the dropped date), numbers, cuts, captures and audio spine, and changes how the piece is filmed. Claude drafted four concepts, had them judged, and built the winner, “one camera, one world,” with pieces of the other three folded in.

Every frame is a function of time

The reel is one HTML page with two native layouts, ?aspect=v and ?aspect=w, rather than one cut cropped into the other. Playwright calls window.renderFrame(t) for each frame and pipes the screenshot to ffmpeg, so nothing animates on the wall clock. Cuts sit on a 120 BPM grid, and the score, “Lit,” is synthesized in code. The opening match cut lands the reel’s neon “Live” on the homepage’s real neon “Lab” with the same center, tube height, tilt and mint.

Honest footage

The site footage was frame-stepped in headless Chromium under Playwright’s fake clock. The clock was set to October 12, which is why the pumpkin shows. Phone views are labeled as browser emulation, and the take notes disclose each edit: about 11 seconds of chat network wait removed, the header swarm slowed to 0.81× so it never freezes, and the battery payoff shown before the water payoff.

One camera for the page and the room

After v2 I asked for a less generic composition, so v3 put the footage in an abstract room built from the site’s 3D-mode styles. v4 rebuilt the room in Three.js with one camera driving both worlds. Footage stays as DOM <img> pixels that WebGL never resamples, and the GL camera matches the CSS perspective’s 2400px focal distance and orbits by exactly the inverse of each face rotation; a unit test checks that the footage stays aligned with the room. Cube turns get true accumulation motion blur, up to 32 subframes averaged in linear light.

The prompts, recast as reusable briefs

These are edited reconstructions of the briefs that guided the work, not verbatim quotes or transcript excerpts. I have condensed multi-message exchanges into clearer, reusable prompts while preserving the goals, constraints and acceptance criteria. The dates identify the source conversations; the wording below was recast for this article.

Name the median, then raise the bar

Keep the established block lettering as the base, but give emphasized words a deliberate typographic voice. Use restrained neon script where the message is personal and a subtle stereo depth treatment for spatial topics. Replace generic color-only emphasis with meaningful differences in form. Preserve readability, responsive scaling and the existing design system. Reduced-motion users must receive a stable, fully readable version of every effect.

What it drove. Claude agreed that color-only emphasis was the median move and proposed the voice system: neon script for the human emphasis, cyan and violet stereo for spatial work, block lettering as the base. I approved the direction and asked to see the result.

The lesson. Name the pattern you’re rejecting and say why. I gave each style a meaning, offered an example instead of a spec, and put the reduced-motion default in the same sentence as the effect.

Point at the tell, then judge at real size

Replace the generic hero badges and external-link arrows with details that belong to this design system. Keep their meaning obvious and their animation subtle. Balance the two featured cards as a pair. Review the result at actual phone size, ensure the arrow silhouette remains clear, and confirm that the preview shows the current build before responding to layout feedback.

What it drove. The pills became the lamp eyebrow and the arrows became swarm arrows, with a longer tail once I’d seen it on screen. The last pair came while Claude was rebalancing the two featured cards; the second message admits I’d been looking at a stale layout.

The lesson. Say what feels generic and why, leave the replacement to the designer, then judge it on the device. Correcting my own stale report right away saved a round of fixing something already fixed.

Write behavior as observable expectations

Make the homepage companion usable without foreground panels blocking the stage. Supplies should disappear only after a visible consumption sequence, then return through the intended lifecycle. Use a small, undulating blob for the guide rather than a large geometric form. Investigate disappearance near the third pickup and close-range touches without assuming the cause. Verify the stage remains reachable through the footer and every pickup follows the same rules.

What it drove. Claude first traced every code path that could make a pickup disappear. Pickups now vanish only through consumption, the guide became a small blob, and the companion got its stage band. The later note led to the band that never retracts.

The lesson. A requirement that ties disappearance to a visible consumption animation is close to a test assertion, so Claude had something to verify instead of a mood to match. The later note shows the other half: report what you observe even when you’re only guessing at the cause.

Delegate with the quality bar attached

Resolve the remaining panel timing and visibility defects before proposing a release. Verify the reviewed candidate with the required local checks and record the results and limitations. Treat deployment authority as conditional on the named fixes, current engineering approvals and explicit user authorization. After an authorized release, smoke-test production and correct any confirmed regression. Earlier approvals apply only to the candidate they actually reviewed.

What it drove. Claude fixed the panel timing, brought back and enhanced the supplies, the guide and the consumption payoffs, ran the full gate, deployed that morning and smoke-tested production.

The lesson. Hand over authority with conditions attached: a named bug and follow-through after release. An agent acts on whatever authority the prompt leaves open, so I grant and withhold it explicitly. I explicitly withheld deployment in seven of my Codex requests between October 11 and 14, and the two-approval rule lives in the repository’s agent instructions, so the next agent inherits it.

Review a video like an editor

Keep the approved material and revise only the identified problems. Give each information panel enough time to read at its delivery size. Replace implementation jargon or ambiguous instructions with plain language that explains what the viewer can do. Use purposeful perspective changes to connect the footage and surrounding composition. Apply each correction to both wide and vertical versions, then review both outputs.

What it drove. v2 added a reading-time rule (every panel holds at least one second plus its headline’s word count divided by three) and cube turns. v3 replaced jargon with plain copy, so “Tap the page, never a control” became “Tap empty space for a burst of color,” and applied every fix to both aspects. Four shots in v4 still fall short of the reading rule, by 0.21 to 0.96 seconds. Claude, as lead engineer, accepted that shortfall rather than reopen the frozen beat grid, and disclosed it in the take notes.

The lesson. Timestamps make a note actionable, and an objection to unfamiliar font terminology catches jargon the author can no longer see. Saying what’s fine protects the parts that already work.

Adjectives set the ambition; the brief does the steering

Build a distinctive presentation from the site’s own JavaScript, CSS and Three.js vocabulary. Connect the footage and room through one coherent camera system, with motivated perspective changes and clear visual continuity. Start from an approved concept and evidence-backed fact sheet. Specify each beat’s purpose, hold time and transition. Preserve the accepted copy and measurements; demonstrate technical craft through readable motion rather than decorative excess.

What it drove. The first produced v3’s room, a grid floor and particle field re-posed on every cube turn. The second produced v4.

The lesson. My original v4 request relied heavily on adjectives. The motion-direction guide warned that broad requests for a cinematic look tend to produce familiar, generic results.

That’s the same median I was pushing the headings away from. The adjectives only set the ambition; the steering came from everything around them: a fact sheet with a must-not-claim list, a beat-sheet format that cuts any beat without a reason to exist, named camera moves, mechanical gates, a frozen contract for every word and number, and four concepts judged before one was built.

Decide what the artifact shouldn’t say

Make the closing identity match the current site’s block and neon lettering rather than the retired rainbow treatment. Remove the release date from the main title so the reel remains useful after posting; let the article and social timestamps establish publication timing. Explain the design process in a companion article without exposing private prompt transcripts.

What it drove. The end card uses the current lettering system, “benlive” in extruded block lettering with a mint neon “.tv,” and no prism gradient. The opening lost its date. The end of that last message asked for the post you’re reading.

The lesson. Both notes took something out. The gradient was a look the site had already moved past, and a date on the video would have gone stale with every day it stayed up.

Where to look next

Start at the homepage, where the neon “AI Enhanced” and “Lab” ignite in the headline and 3D spatial mode turns the page into the companion’s stage. Tap some empty space while you’re there.

• The homepage, with 3D spatial mode and the header swarm (pumpkin through October).
• The WebXR gallery, on a screen, in VR or as an AR miniature.
• Chat About Ben, for interview-style answers on demand.
• The résumé and its six perspectives.
• Rebuilding my WebXR portfolio, one headset test at a time, the gallery’s own deep dive.

The lamp at the top of the homepage is still lit beside “Interested in remote roles” and still links to Hire Me.

The reel’s on-screen text

For anyone who can’t watch the video or would rather read it. The audio is an original score with sound effects and no narration. Every footage pane carries a label naming its source.

• 0:00, opening. “benlive.tv” above “Ben” in block lettering and “Live” in neon script. “New lettering. New light.”
• 0:03, lettering voices. “Neon that flickers to life.” Labels on the homepage hero: Neon script, a hand-lettered glow; Block lettering, 3D depth at any screen size; Status lamp, a slow, breathing glow; Swarm crest, live particles.
• 0:07, section palettes. “Each section, its own colors.” Hire Me, AI Lab, Portfolio and Blog.
• 0:11, swarm crests. “Crests that react to you.”
• 0:15, header swarm. “768 particles. October: a pumpkin.”
• 0:19, Chat About Ben. “Interview-style answers on demand.”
• 0:24, résumé perspectives. “One résumé, six perspectives.”
• 0:29, light and dark. “In daylight, neon reads as colored glass.”
• 0:33, featured cards. “Matched cards. Swarm arrows.”
• 0:36, focus-pull reveal. “Content sharpens as you scroll.”
• 0:39, tap bursts. “Tap empty space for a burst of color.”
• 0:42, 3D spatial mode. “The page becomes a stage.”
• 0:45, the guide. “Tap the floor. The guide leads, the robot follows.”
• 0:49, supplies. Battery and water, side by side. “Batteries charge it. Water refreshes it.”
• 0:53, WebXR portfolio. “A portfolio you can walk through.”
• 0:56, on your phone. “Walk the gallery from your phone.” Callout: one slim control bar, about a third of the old height.
• 1:00, AR and VR parity. “On screen, in VR or AR. No headset needed.”
• 1:05, performance, local lab. “Polished, and still fast.” 99: Lighthouse performance, homepage, mobile profile, release gate lab run. At or below 0.0004: layout shift (CLS), all six lettered pages, after the neon font-swap fix. 0: third-party font requests, every font self-hosted.
• 1:11, release gate, local lab. “Every release, fully gated.” 12: step release gate, 0 failed, 0 flaky, every release that day. 3,680: passing browser test runs in Chrome, Firefox and Mobile Safari, 0 failed, final gate. 14/14: production pages passed the post-deploy smoke test. “No hosted CI. Every check ran on local hardware.”
• 1:17, end card. “Ben Live” and benlive.tv. Core expertise: AI-enhanced development, QA automation, full-stack engineering. “Built and shipped by Ben with Claude and Codex.”