Building this portfolio with an AI-assisted workflow

Starting with words instead of screens

I opened ChatGPT and gave it everything I had. Sites I liked and why. What the portfolio needed to do for someone skimming it between meetings. Who I am, what I am drawn to, the kind of work I want next. Less of a prompt, more of a long brief written out loud.

Writing it down was useful before anything visual existed. It forced me to say what the site was for, which later became the thing I measured every idea against.

Letting it go looking on Mobbin

Then I asked it to pull references from Mobbin and come back with directions rather than a single answer. That is where the first real theme appeared: the warm porcelain field, the soft-black type, the idea that the page should feel calm and instrumented instead of loud.

I would not have landed there by browsing on my own. I would have picked whatever looked impressive that week.

Into Figma, with Codex wired in

With a theme to work from I moved into Figma and connected Codex through MCP. That combination built out the bones: the design system, the type and colour decisions, the layout logic, the tokens that everything else would inherit.

It was fast in a way that still surprises me. It was also where I learned to be careful, because a system built that quickly can look finished long before it is actually considered.

Then into code, where most of it got decided

Once the basics were chalked out I moved into the codebase and kept designing there. Mobbin came back out constantly at this stage, not for whole layouts but for specific problems. How does a good index row handle its metadata. What does a confirmation state look like when it has to feel like a real answer. How much shadow is too much.

I kept adjusting until the thing held together. Most of that was small: a border that was too hard, a label two pixels too small to read properly, motion that looked good in isolation and wrong in sequence.

Some of it was not small. The desk in the homepage hero started life as one generated image, and it fell apart the moment it was scaled across the width of the page. I rebuilt it from five separately exported objects, lit to match, each one displayed well below its native size. That is the kind of problem you only find by putting the thing on a screen and looking at it properly.

• Repeated the next section

  The homepage opened with an interactive stack that led to the same three projects listed right below it.

  I swapped it for one shipped product, so actual work shows up before any scrolling.

• Motion got in the way

  Per-element reveals made text flicker and the scroll feel unsteady.

  Content now starts visible, and the motion that survived is short and skippable.

• Polish drifted

  Each new section quietly invented its own type sizes, shadows and spacing.

  I pulled it back into tokens and wrote down one light source, one type scale, one job for orange.

What the tools were genuinely good at

• Looking: surfacing references I would not have found, and explaining what made a composition work.
• Building: turning an agreed layout into responsive code fast enough that I could judge it in a browser instead of in my head.
• Catching drift: finding the duplicated styles, undersized labels and conflicting shadows that crept in as the site grew.
• Checking: running builds, type checks and route checks after changes, so a visual tweak did not quietly break a page.
• Remembering: keeping a build log, so I could tell later why something had been tried and dropped.

Where I kept taking the wheel

I asked for the original type system back when a new one made the site feel like everyone else's. I removed an underline treatment I had asked for two hours earlier because it was fussier than the page needed. I reverted a layout fix that solved the measurement and made the section worse.

None of that was tidying up after the real work. That was the work. The tools widened the field and shortened the distance to something I could look at. Deciding what stayed was the part that took judgement, and it never moved.

What I would keep

The site is one output. The more useful one is the way of working: write the brief before the interface, look widely and early, build fast enough to test, and keep a record so today's decision can be argued with tomorrow.