How I built this portfolio with Figma and Claude

I designed this site in Figma and built it with Claude Code. I set up the design system and the rules, and made the calls wherever the code and the design disagreed. The AI wrote the code.

Tokens

Every colour, type style and spacing value comes from one file, matched 1:1 to the Figma variables and text styles. Nothing on the site is hardcoded.

Colour

  • White#ffffff
  • Grey background#f7f7f7
  • Divider#dbdbdb
  • Highlight#f65e21
  • Text emphasis#222222
  • Text normal#5b5b5b
  • Text light#8e8e8e
  • Error#f55c5c

Type

  • Heading 128/36 Semibold
  • Heading 224/32 Semibold
  • Heading 320/28 Medium
  • Heading 418/24 Semibold
  • Body16/24 Regular
  • Body emphasis16/24 Medium
  • Sub12/16 Regular
  • Sub emphasis12/16 Medium

Spacing

Named by pixel value, so 24px in the Figma inspector is p-24 in code.

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 64
  • 80

Components

Each one built from its Figma component, then every page put together from them. These are the real thing: hover, click, type.

Button

Enter the password to continue.

Password field

01

A numbered goal.

20%

A stat.

Info card
Image 1
Image 2
Image 3
Carousel

Ask Fellow

A trustworthy AI assistant that turns enterprise meeting recordings into answers people act on

2025Fellow

Project card

Process

From Figma file to live site.

  1. Figma

    Design in Figma

    Pages, components, colour variables and text styles. The file is the source of truth for everything that follows.

  2. Figma MCP · Tailwind CSS v4

    Extract styles

    Through the Figma MCP, Claude reads the variables and text styles straight from the file and writes them into one tokens file. No handoff specs, no hex codes copied by hand. Tailwind v4 keeps that whole design system in a single CSS file I can read myself, and with its defaults deleted, only my tokens exist.

  3. Claude Code

    Build components

    One component per Figma component, built against its frame. Claude Code reads a rules file at the start of every session, so it sticks to the tokens every time, not just when I remember to ask. Every state is real: hover, pressed, focus, error.

  4. Claude Code · Astro

    Assemble pages

    Pages are put together from those components and nothing else. Astro, because a portfolio is a handful of pages that rarely change: it builds them into plain static files with almost no JavaScript, so they load fast.

  5. GitHub · Vercel

    Deploy to my own domain

    Every change pushed to GitHub is built and published by Vercel within a minute, free, at a custom domain with HTTPS. The site is static, so there’s no server to maintain. The password for the NDA pages lives in Vercel’s settings, never in the code.