claudecodeguide.dev

You tried Claude.
It felt generic.
That's a setup problem.

Claude doesn't know you design for first-time mobile users on low-end Android in a price-sensitive market. It knows you're a person with a question. These guides fix that. Pick the journey that matches how you work, and start with Guide 1 to tell Claude who you actually are.

Powered by

Claude.ai

The thinking partner

Claude lives in a Project tab alongside Figma. No terminal. No code.

Powered by

Claude Co-Work

The active collaborator

Claude is in the session with you, pushing back in real-time.

Powered by

Claude Code

The prototype builder

Claude touches files, generates code, and changes the handoff.

02

Same tool. Three completely different jobs.

Each journey reflects a different mode of adoption and a different structural shift in how you work. Pick where you are today.

Claude.ai
Online only

"The Thinking Partner"

Designer who never leaves the browser. Claude lives in a Project tab alongside Figma. No terminal, no code.

Entry path

01claude.ai
02Create a Project
03Write your working agreement
04Start interrogating briefs

Brief work

Re-explain your users, constraints, and preferences at the start of every session.

Claude.ai Projects hold your working context. Every session starts already knowing your work.

Evaluation

Gut-check your designs and hope obvious issues surface in review.

Structured critique against all 10 heuristics, severity-rated and ready for sprint planning.

Research

8 hours of affinity mapping. Post-its everywhere. Themes that shift when someone new joins.

45 minutes. Paste raw notes, run the synthesis, review and challenge the themes.

The structural shift

Claude doesn't touch files. Can't build. Everything happens in conversation. Getting challenged in dialogue is a different experience from getting challenged in a review meeting.

Claude Co-Work
Local workspace

"The Active Collaborator"

Designer using Claude's co-working mode in the desktop app. Claude is in the session with them, actively challenging and building alongside.

Entry path

01Claude desktop app
02Local project folder
03CLAUDE.md working agreement
04Active collaborative session

Research

Manually copy-paste interview notes into a chat window, session by session.

Save notes as all-notes.md. Claude reads the file directly and runs synthesis on the full set.

Figma handoff

Export specs, open a chat, paste everything, explain the context again.

Save exports to your project folder. Claude reads tokens, layer names, and annotations in place.

Brief decoding

Explain the brief from scratch. Paste it. Add background. Re-explain the users.

brief.md is already in the folder. Claude reads it, asks the 20 questions before you open Figma.

The structural shift

The critique loop moves from post-design (review meetings) to in-design (co-work sessions). You stop defending decisions you already made.

Claude Code
Local + terminal

"The Prototype Builder"

Designer who has crossed into the terminal. Uses Claude Code in VS Code or Cursor. Builds working HTML prototypes, not just static specs.

Entry path

01Install Claude Code
02VS Code / Cursor / Terminal
03CLAUDE.md working agreement
04Point Claude at files

Everything Co-Work can do

Brief work, evaluation, and research synthesis still take manual setup each session.

All guides apply. Claude reads your files and runs every workflow Co-Work supports.

Prototyping

Write a brief, hand it to a dev, wait two days to see if the interaction feels right.

Describe the component in plain English. Claude builds and runs it in the same session.

Design handoff

Static screens plus annotations. Dev interprets spacing, states, and edge cases.

Working React component from your Figma prep. Devs review code, not specs.

The structural shift

The handoff artifact changes. Designer arrives at review with a working prototype. The lost-in-translation moment between design and code shrinks dramatically.

03

What each journey unlocks

Each journey covers everything the previous one does, and adds new stages on top. Pick your level and see what you gain.

New at this tier
Inherited from previous
Not covered
Brief
Research
Direction
Frames
Critique
Handoff
Build
Ship
[AI]Claude.ai
Baseline
[CW]Co-Work
+ Direction, Handoff
[CC]Claude Code
+ Frames, Build, Ship

[AI] Claude.ai

Everything in conversation. Interrogates briefs, synthesizes research, critiques designs. No files, no code, no terminal.

[CW] Co-Work

Reads files from your local folder. Challenges direction before you commit to frames. Reads Figma exports for handoff prep.

[CC] Claude Code

Full coverage. Every stage from brief to ship. Adds prototype generation, working code from Figma prep, and Git-based version control.

03

Getting started

Three steps, and the first one takes 10 minutes.

01

Pick your tool

Claude.ai for 8 guides with no setup. Claude Co-Work if you want Claude reading your local files. Claude Code if you want to build and run real components.

02

Write your working agreement

Guide 1 walks you through it in 10 minutes. One block of text that tells Claude who you are, who you design for, and how you want output delivered. Every session starts from there.

Start Guide 1
03

Pick any guide that matches today

Got a brief kickoff tomorrow? Guide 2. Running a heuristic eval next week? Guide 5. Each one is self-contained. No order required after the first.

Browse all guides
04

Why these guides exist

Most Claude guides are written for developers. They assume you want to write code, run tests, or build infrastructure. Useful if that is your job. Frustrating if it is not.

Designers use Claude every day: summarising research, wrestling with briefs, trying to get feedback that is not just “looks good.” But the default output is generic because Claude does not know you design for first-time mobile users on low-end Android in a price-sensitive market. It knows you are a person with a question.

These guides fix that. They are built around what UX and UI designers actually do at work: the brief that arrives too vague, the evaluation that needs to happen before the sprint, the research synthesis that is due Friday, the Figma file that needs to survive a handoff.

Start with Guide 1 to write your working agreement. After that, pick whichever guide matches today.

New guides, when they ship

One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.

Or follow on Substack