My AI workflow: from Figma sketch to live site

AI has become part of how I design, so using it to build my portfolio felt like a natural next step. I wanted to see how far I could take it: from supporting my daily work to building and launching a custom website.

I also wanted a portfolio that reflected my own design decisions, without spending weeks learning to code or squeezing my work into a template.

I started the way I start any project: in Figma, sketching what the site needed to say before worrying about how it looked. Then I went straight from the sketch to Claude Design.

The homepage came together quickly and I was happy with it. Then I started on the case-study page, and things fell apart. The spacing didn’t match, the typography had no rules, and corners were rounded differently from one element to the next. The agent wasn’t doing anything wrong. It just had nothing to be consistent with.

So I went back to Figma and used Figma AI to build a small design system first: spacing, a type scale, colors, corner radius, elevation and layout, with written rules for each. With that in place, Claude Design had rules to follow instead of guessing, and every new page looked like it belonged with the others.

It’s the same lesson I learned on Propulsion at Pax8, just faster. A system isn’t overhead. It’s what lets other people, or agents, build without you checking every pixel.

Once the foundations were set, I exported a handoff bundle from Claude Design and moved to Claude Code: chat on the left, a live preview of the site on the right. From there, every change followed the same loop: brief, preview, review, refine.

I described each change the way I’d explain it to a developer, including why. “Show two cards stacked, overlapping a little, with more white space” worked. “Make it more interesting” never did.

The agent made the change, and I looked at it live, next to the rest of the page rather than on its own.

Reviewing is where most of my time went. I compared each result with what I had pictured and with the rest of the site, and said what was off: too heavy, too tight, the wrong order.

Then I refined it with small, precise adjustments, usually over several rounds, until it was right.

The Thinkific tile in the gallery is a good example. My original shot was a light landing page with a 3D illustration. Next to the newer work it felt dated, so I asked for a dark redesign: a serif headline, a pill-shaped navigation and an earnings card that shows what teachers make. The illustration was cut out and reused, so the work stayed recognizably mine.

A lot came out between my first Figma version and the live site. I wanted the site simple and to the point: enough to show my work, without extra sections to scroll past.

The Experience section went. My CV already covers it, and it pushed the work further down the page.

Selected work changed from a single card linking to a separate page into a gallery right on the homepage. A separate page was one click more, and the images give the homepage some life so it doesn’t feel bland.

The case-study cards got small interactive demos instead of plain text, so each one shows the kind of work before you click.

I don’t read code, so I needed a way to trust the parts I couldn’t see. Instead of checking everything myself, I wrote down standing rules in a file the agent reads at the start of every session. When I caught a mistake once, it became a rule, so I never had to catch it again. For example, I kept spotting headlines that ended with one word alone, so instead of fixing each one, I made it a rule.

The tools will change. They already did while I was building this. What doesn’t change is the job: set up the system before asking for output, be precise about what you want and why, review the result honestly, and turn every repeated fix into a rule.

That’s the same work I do with a design team. Here the team was an agent, and you’re looking at what we made.