From Figma to Production, Solo — An AI-Augmented Design Build

This case study is the page you're reading. I designed and built this site myself, using an AI-augmented workflow that let me move from Figma to production React without a separate engineering handoff. For roughly the past year I've worked this way in a hybrid research-and-engineering role — using AI agents not as a novelty but as the connective tissue between design intent and shipped code.

The handoff didn't disappear because I skipped it — it disappeared because I was on both sides of it.

The site began in Figma as a component-driven system: OKLCH color tokens, a Poppins/Nunito type scale, and a set of section layouts. Rather than redraw those decisions by hand in code, I used Figma's MCP to pull design context — tokens, structure, component specs — directly into my build environment. Claude then generated and iterated the React 19 + Tailwind v4 implementation against that context, while I directed architecture, naming, and the decisions that mattered.

Motion runs on two tracks. The site's scroll and entrance motion is built on GSAP + ScrollTrigger, gated behind an explicit motion preference so nothing autoplays against a user's wishes. Lottie covers two more moments, built two different ways: the nav's animated-mode toggle came out of Lottie MCP, while the contact form's send-success confetti — a dual-layer celebration, one plane bursting in front of the modal card and one behind it, released with per-fire randomness so no two sends look the same — came from a script I had Claude write to produce the Lottie JSON programmatically, no After Effects and no MCP tool involved.

The distinction that matters to me: AI accelerated the production, not the decisions. Claude wrote a large share of the JSX and Tailwind, but the choices that make the site coherent were mine — the OKLCH palette and its contrast constraints, the rule that coral only appears on dark surfaces because it fails contrast on white, the choice to make motion opt-in, the information architecture of the case studies. When generated code took a shortcut that broke an accessibility rule or a design token, I caught it and corrected it.

The agents are fast. They don't hold the standard — that's still the designer's job.

Working this way collapses the distance between a design decision and a shipped result. I can prototype an interaction in real code instead of a Figma approximation, and feel whether it's right. I can enforce a design system at the level where it actually holds — the code. And I can carry a product from research through to production as one continuous thread. For a research-and-systems designer, that reach is the point: the same instinct that reads a session recording or synthesizes interviews now extends all the way into the components users touch.

AI-augmented building has a real failure mode: it's easy to accept plausible code that quietly violates a standard. My guardrail is simple — I read every diff and hold the same accessibility and design-system bar I'd hold for any engineer's work. The workflow is a force multiplier on execution. It is not a substitute for judgment, and treating it like one is where teams get burned.