John Etokhana Get in touch
Notes

How I design with AI

First published July 2026 · Ongoing

I use AI, mostly Claude and Claude Code, across most of what I do as a designer. Not as a novelty, and not to make prettier pictures faster. I use it to remove the cost of the parts that were never the point, so I can spend more time on the part that is: deciding what to build, and knowing when something is off even though it technically works. Here is what that looks like in practice.

1I prototype in the real stack

The best way to know if a flow works is to use it, not to look at it. On Episode I built the harder flows in code: the generation loader, the brand-confirm step, the Studio shell. When the prototype is the real React app, timing, empty states and error paths get designed against real data instead of faked in a static file and lost in handoff.

Claude Code makes that cheap enough to do early, so I can put something real in front of a teammate or a user before the idea has hardened. Most of it gets thrown away. That is the point.

episode · prototype
Build a quick prototype for the new onboarding: workspace, invite team, pick a template. For a usability test tomorrow.
Thought for 10s
I'll build a self-contained prototype with a step indicator and transitions between screens.
prototype/onboarding/page.tsx+142−0
1Workspace
2Team
3Template
Workspace name
Acme Inc.
URL
acme-inc.app
Continue
Prototyping a real flow in code, ready to put in front of someone tomorrow.

2I make the call, then update Figma

Judgment is still the job. AI is good at laying the options out and arguing both sides. It is not the one who decides. A typical loop: Claude reads the Jira ticket and inspects the Figma frame, tells me exactly what is off, and lays out the change. I make the call, and it carries the decision into the file.

Designing with Claude
Recommend changes for the spacing issue in PROJ-1842. Figma: figma.com/design/…
Thought for 12s
get_issue· Jira
PROJ-1842: Card spacing inconsistent with design
get_design_context· Figma
Frame: Settings/Card — padding 24, gap 12
The card padding should be 24 not 16, and the item gap 12 not 8. I'd also change the subtitle from "Manage your settings" to "Workspace settings" to match the nav.
PropertyCurrentRecommended
Card padding16px24px
Item gap8px12px
SubtitleManage your settingsWorkspace settings
Claude reads the ticket and the frame; I decide; it updates Figma. The thinking is mine, the busywork is not.

3Research at the speed of the question

The slow part of research was never the interview. It was turning forty transcripts and a survey export into something you can act on before the moment passes. I point Claude at the raw material and my questions, and it helps me find the pattern, which I then verify against the data myself.

On Rivva this is how I found the decisions that reset the product: completing a single task in the first session drove a 50% chance of five-day retention, and a second connected calendar drove a 12.5x lift. The synthesis was fast. The judgment about what to do with it was the work.

Activation analysis
What in the first session predicts 5-day retention? Cohort the last 8 weeks.
Thought for 9s
query· Analytics
8 cohorts · 3,410 new users
Two behaviors stand out. One completed task gives a 50% chance of 5-day retention. A second calendar is the real driver.
First-session behavior5-day retention
No task completed12%
Completed 1 task50%
Connected 1 calendar34%
Connected 2 calendars12.5× baseline
Finding the cause of retention, then building straight at it.

4First drafts, never blank

A blank page costs more than it should. PRDs, research briefs, test scripts, screeners: all of them take real time to draft from nothing, and none of them are better for having been started from scratch. I hand Claude the product brief and a template, and it fills in the structure. Then I review, cut and sharpen.

Research brief · draft
Draft the research brief for the onboarding v2 test. Use our template.
Thought for 7s
read_file· brief-template.md
Loaded: objectives · hypotheses · tasks · screener
Filled in the structure from the product brief. Review and sharpen.
Objectives
Hypotheses
Tasks
Never a blank page. The first draft is not the deliverable, it just gets me past the empty document.

5Designing the AI, not just using it

Using AI to work is half of it. The other half is designing the AI that ships to users, and there the hard part is not capability, it is restraint. On Rivva I designed Nia as a controlled action layer: it could break a vague task into steps, replan a day, draft a message or suggest the next move, but nothing was scheduled, sent or committed until the user said so.

The same rule runs through Episode's automation, which shows what it is doing and hands control back on demand. When the machine can act, the design job is deciding what it may do on its own, and making the moment of control impossible to miss.

Rivva · Nia
Today
My day fell apart. Can you fix it?
Here's a lighter plan. I moved your deep work to your morning peak and dropped a low-priority item. Nothing is saved yet.
Review actions
Revamp brand guidelines
→ 09:00, your morning peak
Moved
Newsletter draft
Low priority today
Dropped
1 task moved1 task dropped
✕ Cancel✓ Confirm
Applied. Your day is replanned, deep work at 09:00.
Nothing is scheduled until you confirm.
Ask Nia…
Nia proposes; the user approves. The AI can act, but never commits without a clear yes.

The part that does not get cheaper

AI removed the cost of execution across all of this. It did not remove the need for taste. Knowing what to build, what to leave out, and when something feels wrong even though it works: that instinct still has to be earned the slow way, by shipping things and watching people use them. The tool gives me more reps at the decisions that matter, and fewer at the ones that never did.

What I reach for
Design & thinkingClaude·Hex·Magic Patterns·Figma·Mobbin
BuildClaude Code·Cursor·React & TypeScript
Working with peopleLoom·Slack·Monologue
© 2026 John Etokhana ← All work