S/M

Building a Repeatable Workflow from Figma to Delivered Code

Tokens, components, and layouts give AI clear intent and context. That makes building faster and revisions easier to manage.

Screenshot of this portfolio's home page with its work tiles and client logos

Overview

I wanted my portfolio to reflect how I work today: designing with intent, using AI to move faster, and keeping a human in the loop on key decisions. The result is a secure site that’s easy for me to update and stays consistent from design to code.

Scroll or tap to enlarge

Design in Figma

Every page starts as a Figma design built with shadcn/ui components and design tokens for color, type, and spacing. Each case study has its own accent color, set with a single variable, so one set of components serves every page.

Build with Claude

I used Claude to plan the technical approach first. Claude Code then reads the Figma designs through MCP and builds them in Next.js, Tailwind CSS, and shadcn/ui. Because Figma and code share components and tokens, a design change becomes a small, reviewable code change.

Deliver with Vercel

Code is versioned in GitHub and deployed on Vercel. Case studies are shared in confidence, so they sit behind a password check: one password unlocks every case study, and each company I share the portfolio with gets its own.

Measure with PostHog

PostHog shows which case studies people read and how far they get, which helps me understand what’s most useful to the people reviewing my work.