← Experiments

This site (meta, I know)

Squarespace was great—until I hit a paywall just to edit my own CSS and get total layout control. To fix that and truly flex my design engineer biceps, I redesigned and rebuilt hannahgrossman.com from scratch. Leveraging a hybrid stack of classic tools and new AI workflows—Figma, Claude Design, Claude Code CLI, GitHub, and Vercel—I traded rigid templates for custom code and total creative freedom.

Repo—coming soon

The shape of the project

Updated as the build moves

Role
Design and build, solo
Timeline
Ongoing, 2026
Stack
Figma, Claude Design, Claude Code CLI, GitHub, Vercel
Status
Live, mid-migration
01 - Foundations

Tokens before pages

I pulled the palette from a photo I took in my office/workout hybrid room: dusty mauve, burnt sienna, cream, honey wood. I often find inspiration in physical spaces, and since I’d designed my office/workout room to feel like “me,” I wanted to translate that “me-ness” to the digital representation of myself. Before laying out a single screen, I wrote the palette as tokens, then expanded the details to match. Fraunces for display, DM Sans for body, DM Mono for labels, and a deliberately tight 3px radius so the warmth never tips into soft.

The Design.md file is the contract. Every page, and every tool downstream of it, reads from the same list—which is why the design and the deployed HTML never drifted apart.

Mirror photograph of a home studio: dusty mauve top, sienna strap, cream walls, honey wood floor and a black shoji screen
The reference photograph—every token in the system was sampled out of it
The Design.md file open in an editor, showing the color token table
Design.md—the token table Claude Code reads on every pass · view the file
02 - The loop

Five tools, one artifact

  1. 01FigmaDesign system source of truth, plus the vectors—the wordmark started as a pen path here
  2. 02Claude DesignWhere the pages get designed: layout, type, motion, responsive behavior, all in real markup
  3. 03Claude Code CLITurns the design into the static site, wires the nav, keeps the export in sync
  4. 04GitHubEvery change is a commit, so a bad idea is one revert away
  5. 05VercelPush to main, live in twelve seconds
03 - Deployments

Ship it!

The layouts were the easy part. It’d been years since I’d deployed a site to prod, and I was using new tools and a new provider. Good thing I know my way around the command line. Getting a static site to behave (build settings, clean URLs, a stale cache serving yesterday’s hero) is where I learned the most, mostly by arguing with a terminal.

claude code—hannahgrossman.com
$vercel --prod
>Error: No Output Directory named "public" found after the build completed
methere's no build—it's hand-written HTML and CSS in /site
ccThen set the project root to site/, framework preset "Other", and output directory "." so Vercel serves the files as-is.
$vercel --prod
>Production: https://hannahgrossman.com (12s)
me/experiments 404s if you refresh on it
ccAdd vercel.json with cleanUrls: true—/experiments will resolve to experiments.html without the extension.
meand the hero image is still the old crop after deploy
ccThat's the CDN cache holding the old asset name. Fingerprint the filename when the image changes and the cache stops being a debate.
$git push origin main
>Vercel: deploying 9f2ac31—ready

Paraphrased from the Claude Code CLI

04 - Where it stands

Still mid-migration, on purpose

The landing page, this experiments index, and the detail pages are live. Contact and the newsletter are still stubbed while I decide how much backend I actually want to own. The writing archive is next.

What I'd tell another design leader: the tokens file is the whole trick. Once the palette, type and spacing live in one plain text file, handing work to a model is the same as handing it to an engineer—the constraint travels with the request.

← Back to experiments