Portfolio rebuild

The site used to live across two tools. Format hosted the legacy art-practice pages — competent in 2018, dated by now. Framer hosted the newer design work. The brief I set myself was small and concrete: get the whole portfolio off both platforms, into hand-written HTML, CSS and JS, without spending three months on it.

Format was the easier diagnosis — the interface had aged and become very limiting. Framer was harder to part with. On paper it should have worked: it promised the bridge a designer wants — Figma in, working site out. In practice, many nuances in the designs were difficult to translate and the AI integration was lacking. The friction kept showing up in the same places.

• Nav: building anything beyond a basic header was a slog. The fullscreen menu this site uses now would have been an afternoon of fighting the editor.
• Layout: Stacks (Framer's primary primitive) mimicked CSS without giving me the escape hatches CSS actually has. It pushed me toward decisions I would not have made if I were writing the markup myself.
• Motion: every time I reached for something non-trivial, I hit a ceiling and ended up writing code anyway — but with the editor still wrapped around it.

The pattern was not that Framer could not do the work. It was that I was already coding around it, and the tool itself had become the extra step. The actual brief, visible only in hindsight, was bigger than "migrate." The site-builder layer between Figma and the web had stopped paying for itself.

The previous portfolio site, open in the Framer editor — the starting point for the migration.

The pivot was not ideological. I had been using ChatGPT for over a year to write small components and unstick CSS, so the idea of an AI in the loop was familiar. What changed was the integration. Once Figma and Claude could share state directly, and once I could write a CLAUDE.md that codified the design system as a working document, "AI in the loop" turned into an actual workflow rather than a series of disconnected prompts.

The decision criterion was iteration speed on formulaic work. Case studies follow a template. Pages follow a template. Layout decisions follow a system. That is exactly the shape of work where iteration speed matters more than originality on every pass. If I could get a draft of a page in twenty minutes instead of a day, the maths on rebuilding the entire site stopped being daunting.

The classic discover, define, develop, deliver loop assumes a high cost per cycle. The double diamond is a budget as much as a methodology. Drop the cost low enough and the loop does not get replaced — it fractures into hundreds of micro-iterations, each cheaper than the deliberation it would have taken to decide not to do it. It frees you up to explore small ideas without the overhead of traditional design processes. While the AI output is not good enough to ship immediately, small ideas can be tested almost passively, allowing for more rapid exploration.

When you can work this fast, it feels like going from a double diamond method to five hundred tiny diamonds at once.

A typical session — Claude on one side, Visual Studio on the other, the same page taking shape in both.

A new page starts in Figma, but rarely as a complete design. More often I sketch the shape — a section structure, a couple of components, a rough visual tone — and hand the rest to Claude with a clear brief. The shared spine is CLAUDE.md: a document that codifies tokens, components, voice rules, page architecture, and every hard "always" and "never" the site enforces. It is the design system, written for an AI coworker.

CLAUDE.md, the design system written for an AI coworker. The spine of every session.

Before. The old loop, ladder of fidelity, multi-day cycle.

1. Sketch
2. →
3. Mid-fi
4. →
5. Hi-fi
6. →
7. Build

After. Sketch sets the constraint, Claude does the draft, I audit.

1. Figma sketch
2. →
3. Claude
4. →
5. Audit pass

Voice-to-text in the loop

Voice-to-text is part of the workflow, not a gimmick. I express design intent more cleanly when I am talking than when I am typing. The interview that produced this case study was itself an example of the workflow it describes.

Between gesture drawings and wireframes

The metaphor I keep returning to is gesture drawing. The first pass is not meant to be right. It is meant to be fast enough that I can see the shape, feel out how content may look, and react. What used to take a wireframe ladder — lo-fi to mid-fi to hi-fi over multiple sessions — now collapses into a single jump. All the while keeping in mind that human intervention and refinement are to come.

It's fast enough that I can see the shape, feel it and make more informed choices earlier in the process.

Operational labour, near zero

The other shift, easy to undervalue, is operational. Renaming a token across the codebase, restructuring the media folder, propagating a component change to every page that uses it: work that used to soak up afternoons collapses to a single instruction, followed by the same audit pass that catches drift elsewhere. Once Claude knows the system, the organisational tax goes to near zero, and what is left over goes back into the design.

Claude drifts

It hallucinates components that do not exist in the system, reaches for hex values instead of tokens, and occasionally invents a class name out of nowhere. The CLAUDE.md document mitigates this — it is why the document is six hundred and fifty lines and growing — but mitigation is not elimination. Every session needs an audit pass.

The context window decays

Architecture decisions made in hour one quietly stop applying, and you often have to restart with a fresh briefing. On larger projects it hits walls — getting stuck on small inaccurate decisions that pollute future outputs.

Decisions are close, not right

Claude rarely nails it on a first pass. But it lands close enough, fast enough, that the cost of trying three or four variants is lower than the cost of mentally exhausting the options before committing. The honest read is not "Claude can do design"; it is more "Claude can do what I tell it… often." Close, fast and good enough, where tidy-up is still faster than starting from scratch.

You need to communicate clearly

Typed prompts gave me brittle results — flat, half-briefed, missing the parts I had not bothered to spell out. Switching to voice inputs changed that. I could review a page, speak my feedback, and express intent as if I were briefing a somewhat easily-confused and very quiet colleague. Tone, sequencing, hedges, the small asides that do not survive being typed — all of it started making it into the output.

Communication is the most important part. You need to express yourself like a designer to get outputs that you can use.

The unit cost of iteration collapsed. The felt difference is between "I'll get to it next week" and "let's try four versions before lunch."

The qualitative outcomes are larger. Design and development have stopped being sequential. There is no handoff; the loop is one motion now. The site is mine in a way it could not be when a site builder dictated the layout decisions. Tokens, components, motion, voice: every layer is editable within one prompt.

Before and after — the Framer hero needed a hand-built canvas animation wrapped around the editor. Claude writes the rebuilt version directly, and better.

The opportunity cost shifted too. The hours I used to spend fighting an editor are now spent on the things only I can do: writing copy, sequencing case studies, photographing artwork, talking to people about work.

What people said

The rebuilt site went out to a handful of peers for informal feedback before publishing. The read I came back to most often was the simplest one: "This was just Claude? Can you show me how you did that?" — alongside a fair amount of grumbling about their own site-builder applications.

"Can you show me how you did that?"

What surprised me more was the appetite. The people I expected to push back on the AI angle were the ones asking how to start.

The moment that reframed everything was not subtle. I asked it to make a quick motion graphic of the Artpilot logo using a .svg I provided showing the geometry. With minimal revisions it was able to create an HTML canvas animation in under fifteen minutes that met my needs perfectly. It was not perfect, but it was a great starting point. The shift was not "AI can build my site." It was that for some site-building tasks, within constraints, the additional layer between Figma and the web had stopped being necessary.

The Artpilot mark, an SVG construction loop — fifteen minutes with Claude, from geometry to motion.

The feeling of "Oh! I can actually work with that" was when it felt like a viable tool.

I am not claiming this workflow scales to every product, every team, every problem. It scales to this problem: a single designer with a strong system, building work that follows known shapes, willing to do the audit pass. Within that frame it has been transformative. Outside it, mileage will vary.

"The practice has got more designerly, not less." (Claude wrote that one. The audit pass sometimes votes to keep.) With the implementation tax lower, more of the day goes to the decisions that matter — type, rhythm, voice, structure — and less to wrangling a tool.