I design in the codebase, with Claude Code. Figma is my sketchbook.

Building in code cuts design time a lot. I spend what it saves with the client and the users, on why a feature should exist at all. Below: the workflow behind it, tested on a hotel revenue system (N2Pricing) and a music publisher’s deal app (ConnectMusic), and the parts I never hand over.

Where the saved time goes

Into the business. Workshops, demos and the backend, so what I design is what’s needed and what can be built.

Where the time goes

workshops/Mapping what each role needs, with the people who know the clients best
demos/Clients click the live prototype: salespeople, a data person, the CEO
walkthrough.mdFor whoever wrote the spec: what matches, what differs and why, what they still decide
api-gaps.mdI check the API before I design. What it can’t do yet goes to the back-end dev, flagged [NEEDS BACKEND]

Direction by hand

AI can build a screen. It can’t decide what the product should feel like. So every project starts in Figma: the design system basics, one screen drawn properly, the patterns written into patterns.md, which every plan reads. I skipped this once, and it shows.

The whole flow

The same three stages on every project. The middle one repeats for every feature: Claude plans, I approve, then it gets built. On N2Pricing’s Overview that came to 23 states, each on its own link.

Set up
Once per projectFigma, Claude Code
The product and its domain, the direction in Figma, the design system rebuilt in code, from Figma or from the live app.
02
The design loop
Per featureClaude CodePlan mode on
1. PRD
2. Discovery
3. Plan
4. Happy path
5. Every state
6. Refinement
7. Walkthrough
Next feature
Handoff
git
A front-end dev reviews, fixes and merges my code, or rebuilds it in the real repo from my code and the live prototype.

The branch is the handoff

Every feature gets its own branch and worktree, on the product’s codebase or on a prototype repo with mocked data. A front-end dev picks the branch up and hardens it, and it goes into main through a reviewed PR. On ConnectMusic, six features went from my branches into production code.

mainThe product as the team ships it
featureMy branch, in its own worktreegit worktree add ../feature
Discovery, plan, happy path, one commit per step
Every state, a URL each?scenario=loading
devA front-end dev takes it overReal data, tests, the dev tools stripped out.
Reviewed PR into main

AI builds to rules I write

Claude is a sparring partner, not an order-taker: it questions the flow and proposes variants, then builds to rules that live in the repo. Those rules exist because of a screen I built too fast: looking back, I could defend exactly one decision on it. Now nothing gets built before I approve the plan, and when something goes wrong twice, it becomes a rule.

A project repo (excerpt)

CLAUDE.mdThe rules: push back, ground every screen in the real API
patterns.mdThe UX patterns from the Figma start
.claude/skills/One skill per step of the loop
.claude/agents/Reviewers that check the workRead-only
run-file.mdPhases, open questions, the next prompt

One tool, learned in depth

Claude Code and Git every day: the product lives in code, so that’s where I design. Figma for the direction and the screens that need a hand; Cursor, v0 or Lovable for a quick look at an idea before there’s a repo. Going deep on one tool beats skimming ten.

Every day