CASE STUDY · AI WORKFLOW
AI-driven portfolio redesign
My portfolio had a hierarchy problem, a muddy palette, and case studies too long to read — analytics confirmed visitors weren't staying. I rebuilt all of it with an AI-first workflow: benchmark the tools, write the spec, generate, then finish by hand in Figma and Framer.
12
pages shipped — 6 pages × desktop + mobile
10 days
from portfolio audit to production launch
5 → 1
AI tools benchmarked, one workflow kept
Role
UX/UI Designer · UX Researcher
Platform Desktop + Mobile web
Timeline 10 days · July 2026
TL;DR — THE 30-SECOND VERSION
Problem — flat hierarchy, weak palette, case studies nobody finished; Framer analytics agreed — 73% of pageviews never left the homepage, and each case study reached at most 5 visitors.
Approach — benchmarked 5 AI tools with a controlled prompt, kept the strongest, and wrote a full spec (SDD) before generating a single page.
Build — Claude Design generated every page from the spec; html.to.design bridged to Figma; Framer got the manual layout QA and went to production.
Result — 12 pages shipped in 10 days — including the site you're reading right now.
Overview
A self-directed project with two goals: fix a portfolio that was losing visitors, and prove that a designer can run a complete product cycle — research, spec, design, and production — through an AI-integrated workflow. I treated my own site as the client: Framer's native analytics defined the problem quantitatively, a heuristic audit defined it qualitatively, and a controlled tool benchmark decided the stack. The work spanned UX research, spec writing, art direction, and hands-on Figma and Framer production.
The starting point — the homepage this project replaced.
Workflow
Two phases: an exploration week that compared tools and burned tokens, and a production week where a spec did the steering.
PHASE 1 — EXPLORATION · JULY 8–12
Portfolio audit. Claude Design analyzed the live site: hierarchy failures, buried proof, walls of text.
Analytics review. Framer data: 116 monthly pageviews, 73% stuck on the homepage, ~1 in 9 visitors opening a case study.
Controlled benchmark. One identical prompt to Claude Code, Google AI Studio, and Google Stitch — same brief, compared outputs.
Redesign trials. Stitch and AI Studio each redesigned the portfolio with Matisse references and the audit as input.
Figma MCP test. Claude Code wired to Figma via MCP — killed by the free plan's call quota mid-run.
Synthesis → SDD. Verdicts per tool + token burnout led to the decision that shaped everything: write a spec first.
PHASE 2 — PRODUCTION · JULY 12–18
SDD master spec. One document: palette, type, page structures, copy rules, and a shared case-study template.
One prompt per page. Claude Design generated each page from its spec section — prescriptive, no iteration loops.
HTML → Figma. Standalone HTML exports imported via html.to.design, viewport matched to the source.
Figma → Framer. Manual layout QA against the Figma source: text sizing, pinning, padding, breakpoints.
Viewport testing. Every page verified at 5 sizes — 1200, 1440, 440, 360, 320px — before moving to the next.
Componentization. Finalized ML Arena first, then turned its shared elements into Framer components for the other pages.
Findings
Same prompt, different ceilings. Claude Code and AI Studio reached hi-fi, prototype-grade output; Stitch stalled at concept quality.
References beat adjectives. Stitch only produced strong work when fed Matisse paintings and the written audit — not descriptions.
Hallucination is a real cost. AI Studio invented content, ignored the brief — and relocated me to Canada.
The model matters as much as the tool. The SDD dragged for ~6 hours on a light model; a stronger model finished it in minutes.
Unscoped prompting doesn't scale. Two exploratory iterations consumed 41% of a session's tokens — the math forced a process change.
Migration is the hidden cost. AI → Figma was smooth; Figma → Framer broke layout on every page — text sizing, absolute positioning — forcing manual fixes layer by layer.
"The spec was the turning point — I stopped exploring and started shipping."
— Field note, July 12
Solutions
Token burnout → Spec-driven development. Full spec written once, one focused prompt per page — roughly 40% of a session's tokens saved.
Tool sprawl → One workflow. Claude Design to generate, Figma as the inspection bridge, Framer for production.
Migration breakage → Page-by-page QA checklist. Text fit→fill, pinned absolute elements, padding — checked against the Figma source.
Inconsistency risk → Component library. Shared elements from the finalized ML Arena page reused across every case study.
Broken small screens → Responsive re-spec. Mobile HTML regenerated to hold down to 320px; five viewports tested per page.
Taste vs. deadline → A shipping rule. Taste-only tweaks dropped; only changes that affect responsiveness earned rework time.
Design process
Workflow. Audit → benchmark → spec → generate → Figma bridge → Framer production → QA.
Art direction. Henri Matisse's cut-outs set the direction — his palette and organic shapes, fed as references to every tool.
How. One page at a time — desktop and mobile finished, tested, and verified before starting the next.
The "before" — text-heavy case-study cards nobody finished reading.
La Gerbe, 1953
— the full palette
on paper
Icarus — Jazz, 1947
— star +
lemon on cobalt
Inspiration — the Matisse cut-outs fed as references to every tool. Photos: mine, at the exhibition.
Cobalt
Actions only
#2749D8
Red
Eyebrows & accents
#E0492E
Lemon
Shape fills
#F2D21B
Emerald
Results only
#169B62
Ink
Text & bands
#1D1C21
Paper
Backgrounds
#FDFBF3
Display & headings
Aa
Archivo
700–900
Body
Aa
IBM Plex Sans
400–600
Primary
Secondary
Pills, 999px
Star cut-out — accents only, never behind text
The initial visual system — palette roles, type, and the star motif. After it's the version you are looking at: less colors, less heavy on the visuals
Key learnings
Spec first, prompt once.
The SDD replaced exploratory back-and-forth with focused generation — less waste, faster pages, coherent system.
Match the model to the task.
Six hours lost to a light model on a complex spec — capability routing is now step zero.
Speed didn't cost quality.
Trusting the AI's small design calls — and reworking only what breaks responsiveness — kept the deadline without hurting the design.
Every page of this portfolio — including this one — was produced by the workflow described above.
Let's work together
CASE STUDY · AI WORKFLOW
AI-driven portfolio redesign
My portfolio had a hierarchy problem, a muddy palette, and case studies too long to read — analytics confirmed visitors weren't staying. I rebuilt all of it with an AI-first workflow: benchmark the tools, write the spec, generate, then finish by hand in Figma and Framer.
12
pages shipped — 6 pages × desktop + mobile
10 days
from portfolio audit to production launch
5 → 1
AI tools benchmarked, one workflow kept
Role UX/UI Designer · UX Researcher
Platform Desktop + Mobile web
Timeline 10 days · July 2026
TL;DR — THE 30-SECOND VERSION
Problem — flat hierarchy, weak palette, case studies nobody finished; Framer analytics agreed — 73% of pageviews never left the homepage, and each case study reached at most 5 visitors.
Approach — benchmarked 5 AI tools with a controlled prompt, kept the strongest, and wrote a full spec (SDD) before generating a single page.
Build — Claude Design generated every page from the spec; html.to.design bridged to Figma; Framer got the manual layout QA and went to production.
Result — 12 pages shipped in 10 days — including the site you're reading right now.
Overview
A self-directed project with two goals: fix a portfolio that was losing visitors, and prove that a designer can run a complete product cycle — research, spec, design, and production — through an AI-integrated workflow. I treated my own site as the client: Framer's native analytics defined the problem quantitatively, a heuristic audit defined it qualitatively, and a controlled tool benchmark decided the stack. The work spanned UX research, spec writing, art direction, and hands-on Figma and Framer production.
The starting point — the homepage this project replaced.
Workflow
Two phases: an exploration week that compared tools and burned tokens, and a production week where a spec did the steering.
PHASE 1 — EXPLORATION · JULY 8–12
Portfolio audit. Claude Design analyzed the live site: hierarchy failures, buried proof, walls of text.
Analytics review. Framer data: 116 monthly pageviews, 73% stuck on the homepage, ~1 in 9 visitors opening a case study.
Controlled benchmark. One identical prompt to Claude Code, Google AI Studio, and Google Stitch — same brief, compared outputs.
Redesign trials. Stitch and AI Studio each redesigned the portfolio with Matisse references and the audit as input.
Figma MCP test. Claude Code wired to Figma via MCP — killed by the free plan's call quota mid-run.
Synthesis → SDD. Verdicts per tool + token burnout led to the decision that shaped everything: write a spec first.
PHASE 2 — PRODUCTION · JULY 12–18
SDD master spec. One document: palette, type, page structures, copy rules, and a shared case-study template.
One prompt per page. Claude Design generated each page from its spec section — prescriptive, no iteration loops.
HTML → Figma. Standalone HTML exports imported via html.to.design, viewport matched to the source.
Figma → Framer. Manual layout QA against the Figma source: text sizing, pinning, padding, breakpoints.
Componentization. Finalized ML Arena first, then turned its shared elements into Framer components for the other pages.
Viewport testing. Every page verified at 5 sizes — 1200, 1440, 440, 360, 320px — before moving to the next.
Findings
"The spec was the turning point — I stopped exploring and started shipping."
— Field note, July 12
Same prompt, different ceilings. Claude Code and AI Studio reached hi-fi, prototype-grade output; Stitch stalled at concept quality.
References beat adjectives. Stitch only produced strong work when fed Matisse paintings and the written audit — not descriptions.
Hallucination is a real cost. AI Studio invented content, ignored the brief — and relocated me to Canada.
The model matters as much as the tool. The SDD dragged for ~6 hours on a light model; a stronger model finished it in minutes.
Unscoped prompting doesn't scale. Two exploratory iterations consumed 41% of a session's tokens — the math forced a process change.
Migration is the hidden cost. AI → Figma was smooth; Figma → Framer broke layout on every page — text sizing, absolute positioning — forcing manual fixes layer by layer.
Solutions
Token burnout → Spec-driven development. Full spec written once, one focused prompt per page — roughly 40% of a session's tokens saved.
Tool sprawl → One workflow. Claude Design to generate, Figma as the inspection bridge, Framer for production.
Migration breakage → Page-by-page QA checklist. Text fit→fill, pinned absolute elements, padding — checked against the Figma source.
Inconsistency risk → Component library. Shared elements from the finalized ML Arena page reused across every case study.
Broken small screens → Responsive re-spec. Mobile HTML regenerated to hold down to 320px; five viewports tested per page.
Taste vs. deadline → A shipping rule. Taste-only tweaks dropped; only changes that affect responsiveness earned rework time.
Design process
The "before" — text-heavy case-study cards nobody finished reading.
La Gerbe, 1953
— the full palette on paper
Icarus — Jazz, 1947
— star + lemon on cobalt
Inspiration — the Matisse cut-outs fed as references to every tool. Photos: mine, at the exhibition.
Cobalt
Actions only
#2749D8
Red
Accents
#E0492E
Lemon
Shape fills
#F2D21B
Emerald
Results only
#169B62
Ink
Text & bands
#1D1C21
Paper
Backgrounds
#FDFBF3
Display & headings
Aa
Archivo
700–900
Body
Aa
IBM Plex Sans
400–600
Primary
Secondary
Star cut-out — accents
only
Star cut-out - accents only