This site is a case study: rebuilding steveux.com with an AI pair
The fastest way to evaluate how a designer works with AI is to look at something they actually shipped with it. So here is exactly how this site was made — the ingestion, the iterations, the arguments, and the interactions.
01Ingesting the old site
We started by feeding the AI the old portfolio: full-page screenshots of every page, then the live site itself. The audit that came back was blunt — generic positioning ("team player in fast-paced environments"), an 11-year career introduced as "5+ years," case studies with label-titles instead of claims, and a blue low-poly hero that belonged to a template, not a person. The strongest decade of work — enterprise commerce, trade-in systems, an API marketplace — wasn’t on the site at all. That audit became a plan; the plan became a file.
02Writing taste down before writing code
The single most useful artifact isn’t code: it’s a taste file — palette tokens, banned visual clichés, a banned lexicon, evidence rules (no invented metrics, no fake testimonials, placeholders stay visibly empty), and a change protocol. Every "make it better" idea since, including a couple of viral audit prompts, got checked against that file instead of triggering a rebuild. Nine amendments later, it’s the constitution this site is governed by — and any AI session that touches the code reads it first.
03Twenty-plus passes, each one earned
Version one was clean and static. Version two brought the bento grid and a reading-depth toggle. Then, pass by pass: real project imagery recovered from the old site, deep-dives redesigned from timid accordions into color-coded card grids, a homepage Dive state that dissolves the grid into full-width detail, a section rail with hover previews, category color bars with computed contrast ratios, a 16px type floor, 64px rhythm, dark mode, elevation states, and the morphing navigation. Several passes were corrections — the filter pills wandered into the header and had to be argued back out; a "Dive" state that changed nothing got called out as a broken promise and rebuilt.
04What the interactions are for
Every interaction on this site maps to a reason. Reading-depth states exist because a recruiter, a hiring manager, and a fellow designer need three different sites. The cursor preview chip tells you what a click costs before you spend it. Cards rest, lift, and press — three states, because interfaces should feel like they have mass. The nav morphs between tab-bar and text-links so you always know which altitude you’re at, and the header gets out of the way when you’re reading. Nothing glows, nothing floats, nothing is a modal — this portfolio contains a case study about why.
05What AI actually did
The division of labor: I supplied taste, judgment, the war stories, and every veto; the AI supplied speed, memory, contrast math, accessibility checks, and the discipline of writing decisions down. It drafted; I rejected; it rebuilt. The tokens file it maintains now syncs to Figma, so design changes flow token-first in either direction. If you’re evaluating whether I can work AI-natively: you’re looking at the deliverable.
Everything here is governed by a written system
Each pattern exists in the taste file before it exists in code. The file wins every argument.
Pass by pass, with the failures kept in
html{scroll-behavior:smooth} was turning every JS frame-write into its own browser animation — ~60 fights per second. Rebuilt time-based with instant writes. Lesson pinned: two smoothing systems layered means neither works.The artifacts that govern the site
BANNED: gradients, glassmorphism, glowing blobs, purple/cyan "AI" visuals, icon circles*, stock photos, low-poly heroes, floating fake UI, decorative networks. *amended: circle = Scan depth signifier
Claims not labels 5/5 Front-loading 4/5 Specificity 5/5 Sentence load 3/5 -> split x5 CTAs 4/5 -> renamed x4 Self-description 2/5 -> honest 30->5
cause: CSS scroll-behavior:smooth
x JS engine writing 60fps
= 60 overlapping animations/sec
fix: behavior:'instant' writes,
easing owned by the engine
K=9 (one dial: snap vs float)warm off-white #EFEFE7 - thin black ink line-art - exactly ONE accent #3425FF - flat, no gradients, no glow, NO TEXT - generous negative space QA gate: reject on third color
The change log, abridged
What happened, pass by pass — the decision log is the product.
MethodThe taste file as change firewall
Palette, type, motion rules, architecture rules, copy voice, evidence rules, engineering rules — one markdown file, versioned by amendment. New ideas amend the file first, then get built once. It’s the same governance pattern I’d use on an enterprise design system, applied to a personal site.
EvidenceAccessibility, computed not eyeballed
Category bars: 6.79:1, 3.73:1, 5.36:1 against the card surface (WCAG 1.4.11 needs 3:1). The requested "yellow" became deep ochre because actual yellow fails at ~1.3:1. Dark mode’s accent was lightened until every pair cleared 5:1, and the one white-on-accent failure was caught and flipped to ink. All of it verified by script, logged in the tokens file.
ConstraintNo framework, no build step — on purpose
One CSS file, vanilla JS, semantic HTML, real URLs. Partly taste, partly strategy: a site an AI can read is a site an AI can maintain — clean structure, named tokens, no compiled indirection. The same "make your system legible to the machines" argument now shaping design-systems work generally.
LessonThe AI needed a veto more than a prompt
The best passes came after a hard no: the header that morphed per page, the dead Dive state, the tacky marquee. AI collaboration isn’t prompt-craft — it’s maintaining a standard the collaborator can be held to. Which is, not coincidentally, the job description of a design lead.