✦ Figma to Code ✦ AI-Assisted Research ✦ Prompt Engineering ✦ Design Critique ✦ Workflow Experiments ✦ Component Generation ✦ UX Research Synthesis ✦ Rapid Prototyping ✦ Figma to Code ✦ AI-Assisted Research ✦ Prompt Engineering ✦ Design Critique ✦ Workflow Experiments ✦ Component Generation ✦ UX Research Synthesis ✦ Rapid Prototyping

AI Workflow Lab

Real work,
honest process.

A living record of building a product with AI — from strategy to code. Each entry documents what was attempted, how Claude was used, what worked, and what didn't.

01 Entries logged
Ongoing Cadence
2026 Started

About this lab

Purpose

I used Claude to brainstorm and shape a product strategy from scratch — then started building. This page documents that process as it happens: the decisions made, the tools used, what AI got right, and where human judgment had to step in.

What you'll find here

Real prompts, real outputs, real critique. Each entry captures what was being built, the approach taken, key prompt strategies, and a candid reflection on outcomes and surprises.

Why it matters

AI fluency is becoming a core design skill — not a shortcut, but a new kind of craft. Every build feeds directly into Terra, a product I'm designing in parallel. This log is how I build that fluency intentionally, not accidentally.

Tools in rotation

Claude for reasoning, critique, and code generation. Claude Code in VS Code for building components and pages. Other tools introduced deliberately — only when a specific gap appears.

My approach

How the process works

01 —

Define the brief

One design problem, one focused constraint. Write the brief before opening any tool. Vague inputs produce vague outputs — specificity is the skill.

02 —

Strategise with Claude

Use Claude to brainstorm, critique, and shape the approach before building anything. Product direction, IA, component logic — thinking happens here first.

03 —

Build with Claude Code

Build the component or page directly in Claude Code (VS Code). Ship working HTML/CSS first. Document the real prompts used, not polished ones.

04 —

Extract the insight

One honest takeaway: a prompt pattern worth keeping, a workflow adjustment, or where AI didn't help. Log it. That's the point of this page.

Build log

Newest first
#001 May 2026
Workflow Claude Portfolio Friction

Building the AI lab page — and hitting the limits of Claude in the same session

Starting point: a brief description of intent and a link to my existing portfolio. Goal was to ship a visually cohesive, production-ready page that matches my existing aesthetic while solving a real information architecture problem — without opening Figma first. What followed was also an early lesson in how Claude handles instructions over a long session.

Tool used

Claude Sonnet

Type

Page design & IA

Time to first draft

~15 minutes

Outcome

Claude couldn't reliably extract exact color values or design tokens from the portfolio URL — the page had the right structure but colors were off. Once I defined a proper design system spec and fed it to Claude, alignment improved significantly. Later in the same session, instruction drift became a real problem: earlier rules quietly reverted as the conversation grew longer, creating a repetitive correction loop.

Key insights & challenges

Two lessons from one session. First: Claude approximates visual styles from URLs — define your design system as an explicit spec before asking it to match anything. Second: Claude has no persistent memory within long sessions. The fix is Project Instructions — a persistent system prompt that eliminates re-establishing ground rules each time. Every instruction needs to be written as if it might be the only one Claude ever reads.

#002 May 2026
Infrastructure GitHub Vercel

Setting up Terra's repo and shipping the first live deploy

Before building features, the foundation needed to exist. This session covered getting the GitHub repo live, connecting it to Vercel, and establishing the deploy workflow. No terminal — everything done through the browser and GitHub Desktop. The goal was simple: a real URL that works on any phone, today.

Tools used

GitHub + Vercel

Type

Infrastructure / DevOps

Time

~45 minutes

Outcome

Terra is live at terra-beige-mu.vercel.app, deployed from a private GitHub repo via Vercel's automatic deploy on push. The setup was intentionally quick — the goal was to test whether Claude could build a functional sign-up flow from scratch before investing time in proper infrastructure. It can.

Key insights & challenges

Shipping something live — even a bare minimum — changes how seriously you take the next step. Next: set up the app properly with the right repo structure, move the sign-up flow in, and build from a solid foundation.

#003 — Coming soon
#004 — In progress

Tools in rotation

Introduced only when needed

Reasoning + Critique

Claude

Design critique, research synthesis, prompt strategy, content generation, and planning. The thinking layer for every session.

Building + Code

Claude Code

Component and page generation in VS Code. The build step comes before Figma — code first, canvas second. Skills taught here compound across every future session.

Hosting + Deploy

Vercel

Every session ends with a live deploy. Vercel connects to GitHub and ships in seconds — no build step, no friction between building and seeing it live.

Source of Truth — Queued

Figma

Will become the source of truth once a functioning product MVP exists. Design system, component library, and handoff specs live here — but only when there's something worth systematising.

UI Iteration — Queued

Magic Patterns

Will be introduced for variant exploration when the design system has a stable enough foundation to stress-test against alternatives.

Analytics — Queued

Amplitude

Will be introduced once there's a live product to measure. Analytics without a product is noise.