✦ 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 AI tools were used, what worked, and what didn't.

04 Entries logged
Ongoing Cadence
2026 Started

About this lab

Purpose

Integrating AI into real product work — not in theory, not in tutorials. What actually works, what quietly fails, and what's still missing. Documented in public because the honest version is more useful than the polished one.

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. This log is how I build that fluency intentionally, one session at a time.

Tools in rotation

Claude and Perplexity for strategy and research — used together before anything gets built. Claude Code in VS Code for implementation. Figma as a design intervention when visual judgment is needed. Other tools introduced only when a specific gap appears.

My approach

How the process works

01 —

Identify what matters

Figure out what's worth building next — whether that's a product decision, a content question, or a business problem.

02 —

Strategise and research

Claude for reasoning, critique, and shaping direction. Perplexity for deep research — sourcing claims, exploring categories, advising on business decisions. Both used together before anything gets built.

03 —

Build with Claude Code

Specify what's needed and let Claude Code handle the implementation — in VS Code, reading Figma designs via MCP. Figma steps in when visual judgment is needed.

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
#009 August 2026
UI Refinement Infrastructure
UI Refinement Infrastructure

UI refinement and preparing the codebase to scale

The codebase needed cleaning up and the UI needed fixing. Claude Code had introduced elements not in Figma and drifted from the defined design — caught only after testing on a real phone. Both tracks ran in parallel: code quality and real-device UI corrections.

Tools used

Claude, Claude Code, Figma, Vercel, GitHub Desktop

Type

UI Refinement / Infrastructure

Time

~4 hours across multiple sessions

Outcome

UI corrected for mobile. Claude Code's unsanctioned additions removed or aligned to Figma. Codebase cleaned — dead code removed, components consolidated, accessibility and security passes done, README updated. Additional skills installed for the cleanup made the process more systematic. Vercel Analytics integration ready to add.

Key insights & challenges

Claude Code doesn't always follow the design — it fills gaps with its own judgment. Real-device testing caught things a browser preview missed. AI output needs to be checked against two sources of truth: the design file and the actual device. Installing dedicated skills for the cleanup session made a noticeable difference in how systematically Claude Code approached the work.

#008 July 2026
Product Design Claude Figma Next.js
Product Design Claude Figma Next.js

From prototype to near-MVP

With the content structure defined and an HTML prototype as reference, Claude Code built out the full app — all pages, components, and content layer. The visual identity was explored and resolved in parallel: new colour palette, serif typography, photographic texture. By this point the project had shifted: this was no longer just a portfolio piece but something worth turning into a real business.

Tools used

Claude, Claude Code, Figma, Next.js, Vercel

Type

Product Design / Build

Time

Multiple sessions across several weeks

Outcome

The app is now functional and content-complete — all screens built and connected, full content across every category and detail page, verified sources throughout, and a resolved visual identity that holds across the whole product. What remains before launch is real authentication and user testing.

Key insights & challenges

Claude produced a good enough first prototype to validate structure, but bringing the visual quality to where it needed to be required moving into Figma and rebuilding from scratch — proper spacing, considered typography hierarchy, refined colour application. Once the designs were solid, Figma MCP in Claude Code implemented them with full accuracy. The workflow is now clear: Claude for speed and structure, Figma for quality, Claude Code via MCP for precise implementation.

#007 June–July 2026
Content Strategy Claude Perplexity Notion
Content Strategy Claude Perplexity Notion

Writing and structuring the full app content — before a single component was built

With strategy locked, the next layer was content. I used Perplexity for deep research across every category, then Claude to refine the tone and voice of the content. Notion was connected as a live wiki — both tools feeding into it as decisions evolved. I also built a quick HTML prototype in Claude to understand how the content might be laid out before committing to components. Claude helped structure the content architecture and translate rough thinking into a coherent system.

Tools used

Claude, Perplexity, Notion

Type

Content Strategy / Content Writing

Time

Multiple sessions across several weeks

Outcome

Full content written and structured for all MVP categories. Every recommendation follows a consistent field structure. A three-layer content hierarchy was established to balance depth with scannability. Notion became the central wiki — research, strategy, and content decisions all in one place, updated in real time.

Key insights & challenges

Sourcing was the harder constraint. Every claim needed either a verified institutional source or an honest label admitting it wasn't. Claude produced plausible-sounding URLs that didn't exist, cited figures without traceable origins, and referenced documents that didn't say what was claimed. Catching these required verifying every link manually — slower, but the only thing that makes the product's trust positioning credible.

One prompt pattern worth keeping: asking Claude to audit its own content for sourcing issues before finalising. It caught several of its own fabrications when prompted to look — which raises the question of why it didn't flag them unprompted.

#006 June 2026
Workflow Claude Claude Code Skills Tooling
Workflow Claude Claude Code Skills Tooling

Teaching Claude to remember — setting up Project Instructions and Claude Code skills

Two different memory systems, one shared goal: stop re-explaining the same things every session. Project Instructions in Claude.ai for persistent context across conversations. Four Claude Code skill files — design system, accessibility, UX practices, security audit — saved locally and loaded at the start of each build session.

Tools used

Claude, Claude Code

Type

Workflow setup

Time

~2 hours

Outcome

Sessions now start informed rather than blank. Project Instructions hold the full context — design system, tool stack, workflow rules. Claude Code skill files load the right rules for each task without re-pasting anything.

Key insights & challenges

The two memory systems work completely differently. Project Instructions in Claude.ai are conversational — Claude reads them silently and applies them throughout the chat. Claude Code skills are reference documents you explicitly invoke at the start of a session. Neither is automatic in the way you'd want: Project Instructions still drift in long sessions, and Claude Code skills still need to be called by name. These tools shift the burden from memory to discipline — you still have to write the rules clearly and invoke them consistently.

#005 June 2026
Strategy Claude Product Thinking
Strategy Claude Product Thinking

From blank slate to product strategy — user research, competitive analysis, JTBD, and MVP scope

Using Claude as a strategic thinking partner, I ran a full PM workstream: defined positioning, conducted competitive analysis across an existing product category, synthesised qualitative user research from seven interviews, mapped Jobs To Be Done across core use cases, and locked MVP scope. The goal was to build the right thing before building fast.

Tools used

Claude

Type

Strategy / Product Thinking

Time

~3 sessions across multiple days

Outcome

The core product decisions — MVP scope, login strategy, and overall flow — came from my own judgment, with Claude helping pressure-test and articulate the thinking. Where Claude added most value was in research synthesis: two participants independently described the same failure pattern in different contexts, which became a hard content rule; one participant had deleted a comparable app for low utility, which sharpened the first-session brief considerably.

Key insights & challenges

The most unexpected insight came from a bias Claude introduced without flagging — it assumed gender for participants whose pronouns were never stated in the transcripts. When caught, the same assumption had been made across multiple users. For a product designed to be non-judgmental and inclusive, it was a useful reminder: AI makes demographic assumptions quietly and confidently, and human oversight isn't just a quality check — it's an inclusivity check.

#004 May 2026
Iteration AI Lab Figma Claude Code Tooling
Iteration AI Lab Figma Claude Code Tooling

Iterating on the AI Lab page — design system, Figma MCP, and where Claude falls short visually

A full refinement session on the AI Lab page — typography scale, spacing, copy tone, responsive layout, entry structure, and collapsible log entries. The session also established the workflow going forward: Claude Code in VS Code reads Figma designs via MCP, generates components, and those components get integrated into the live page.

Tools used

Claude, Figma, html.to.design, Claude Code

Type

Iteration / Tooling

Time

~3 hours

Outcome

The page now accurately reflects the real process. Entry format split into separate Outcome and Key Insights blocks. Tools section updated to reflect the actual stack. Copy cleaned of references to workflows not in use. Figma MCP connected to VS Code via remote server — Claude Code can now read Figma frames directly and generate code from them.

Key insights & challenges

Claude lacks visual design judgment. The expand/collapse functionality it generated was structurally correct but visually wrong. I had to open Figma and draft how I actually wanted it to look. To bring the HTML into Figma I tried two tools: Magic Patterns (did not import files or add autolayout) and html.to.design plugin (converted the HTML into a proper Figma file with styles, components, and autolayout — this worked). Claude is strong at structure and logic, weak at visual feel. Figma remains the right place to make visual decisions, even when working code-first.

#003 May 2026
Infrastructure Next.js Vercel Claude Code
Infrastructure Next.js Vercel Claude Code

Migrating to proper infrastructure — Claude recommended Next.js and that's what we built

Once it was clear that Claude Code could build a real product, the single HTML file wasn't going to cut it. I wanted proper infrastructure before going further. I described what I needed — a scalable structure, clean component separation, shared design tokens — and Claude recommended migrating to Next.js. Claude Code handled the implementation.

Tools used

Claude, Claude Code, Next.js, GitHub, Vercel

Type

Infrastructure / Migration

Time

~1.5 hours

Outcome

Proper Next.js app structure — organised folders, React components, CSS modules, design tokens in a single tokens.css. Connected to GitHub and live on Vercel. Each error Claude Code encountered was explained in plain language and fixed in context — no documentation required.

Key insights & challenges

The hardest part wasn't the code — it was the tooling. Git branch mismatch, wrong Vercel framework preset, CSS module rules that work differently in Next.js. Each a 2-minute fix once diagnosed, but invisible without knowing where to look. The bigger point: I didn't choose Next.js, Claude recommended it based on what I described needing. That dynamic — describing intent and letting Claude suggest the approach — is more useful than asking for specific technologies you don't fully understand yet.

#002 May 2026
Infrastructure GitHub Vercel
Infrastructure GitHub Vercel

Starting the product — testing Claude Code with a simple HTML build before committing to anything

With the log in place, the next step was to actually start building. I had a product idea in mind and wanted to see what Claude Code was capable of before investing in proper infrastructure. So we started simple — a single HTML file, just to test the waters. I asked Claude to help set up the foundation for the app, and it recommended GitHub and Vercel for hosting and deployment. Coming from a non-technical background, I had no idea this combination existed, let alone that it could be set up in under an hour.

Tools used

Claude, Claude Code, GitHub, Vercel

Type

Product build / Infrastructure

Time

~45 minutes

Outcome

A live URL, a working HTML page, and a connected deploy pipeline — all from scratch. The page wasn't much, but it proved the point: Claude Code can take a non-technical person from idea to live product, fast. GitHub and Vercel connected, automatic deploy on push working, the foundation in place.

Key insights & challenges

Claude and Claude Code genuinely lower the barrier for non-technical people to build real products. Not prototypes, not mockups — actual deployed software with proper infrastructure. The recommendation to use GitHub and Vercel came unprompted; I wouldn't have known to ask. Shipping something live, even something simple, changes how seriously you take what comes next.

#001 May 2026
Workflow Claude Portfolio Friction
Workflow Claude Portfolio Friction

Setting up the AI Lab page — a public log to document building with AI

Before building anything, I wanted a place to document the process in public. This session was about creating the AI Lab page itself — a portfolio sub-page that would serve as a running log of everything that followed. Starting point was a brief description of intent and a link to my existing portfolio. 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

The AI Lab page was built and published — a live log to document everything that follows. Claude couldn't reliably extract exact color values or design tokens from the portfolio URL, so a proper design system spec had to be defined first before alignment improved. Later in the same session, instruction drift became a real problem: earlier rules quietly reverted as the conversation grew longer.

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.

Tools in rotation

Introduced only when needed

Strategy + Reasoning

Claude

Design critique, product thinking, prompt strategy, and content generation. The primary thinking layer — used alongside Perplexity to shape decisions before anything gets built.

Deep Research

Perplexity

Used for sourcing content claims, researching product categories, and advising on business decisions. Where Claude reasons, Perplexity retrieves — the two work in combination.

Building + Code

Claude Code

Component and page generation in VS Code. The build step — specifying what's needed and letting Claude Code handle the implementation, connected to Figma via MCP.

Version Control + Deploy

GitHub + Vercel

GitHub for version control via GitHub Desktop. Vercel connected to the repo — every push deploys automatically, no build step needed.

Design Intervention

Figma

Everything starts in Claude. When Claude falls short on visual decisions — layout, interaction, feel — Figma is where I step in, draft what I actually want, and hand it back via MCP.

Analytics — Queued

Amplitude

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