AI
Development
Claude Code for Designers
A field guide for the design layer that can finally build. Commands, shortcuts, and best practices for designers using Claude Code to build interactive prototypes and UI experiments.
A field guide for the design layer that can finally build
You've spent years designing things you couldn't build yourself. You'd hand off specs, wait for engineers, and then spend the next sprint explaining why the prototype felt nothing like the vision. That loop is over.
Claude Code is an AI coding agent built into the Claude Mac app — and the moment you realise what it can actually do, the way you work changes. Interactive prototypes you can click through. Micro-interactions you can feel. UI experiments shipped without filing a ticket or scheduling a pairing session. You're not becoming a developer. You're just not waiting for one anymore.
This doc is a quick reference for getting the most out of Claude Code — written from a designer's perspective, for designers who are just starting to realize what's now possible.
The Mental Model First
Before the shortcuts, the most important thing to understand is how Claude Code thinks about your project.
Every session has a context window — think of it like Claude's working memory for that conversation. It can only hold so much at once. The longer a session runs, the more of that memory fills up. When it's full, things start falling off. Commands, shortcuts, and best practices all exist to help you manage this — keeping Claude focused, accurate, and useful throughout a session.
Starting a Session
My primary tool is the Claude Mac app — that's where all of my Claude Code interaction happens. Not the terminal. The Mac app is a better fit for how designers actually think, and here's why.
It lets me paste screenshots directly into the conversation. If something looks off in the browser, I screenshot it and paste it in. Claude sees exactly what I'm seeing. No describing, no guessing.
For design references, I use ⌘I in Figma to copy a frame, then paste it straight into Claude as a visual reference via MCP. If I'm building a component and want Claude to match a specific design, I show it the frame rather than try to describe it. You're not translating design to words — you're just showing it the design.
And I'm not typing any of this. I talk. I use Shhhcribble, a transcription tool I built for myself, to dictate everything — prompts, feedback, direction. The whole conversation is voice. It's faster, more natural, and means I stay in the designer headspace rather than switching into "write a precise technical prompt" mode every time I want to say something.
The Commands You'll Actually Use
Managing Your Session
This is the most important category for designers. Claude's context fills up fast when you're iterating on UI — lots of back and forth, lots of file changes.
Command | What it does |
|---|---|
| Wipes the conversation history entirely. Claude starts fresh — no memory of what came before. Use this every time you switch to a new task. Old context bleeds into new requests and causes drift. |
| Compresses your session history without losing the thread. Rather than wiping everything, Claude summarises the conversation so far and continues from that summary. Use this when a session has gotten long but you're mid-flow on something important. It's the middle ground between nuking everything and hitting a wall. |
| Reverts the last file change Claude made. Your safety net. If it wrote something wrong, one command gets you back. |
The pattern that works: One task per session. Start with
/clear, describe the task clearly, iterate until it's done. Then/clearagain for the next thing. Keeping sessions tight keeps Claude sharp.
Setting Up a New Project
Command | What it does |
|---|---|
| Auto-generates a |
| Lists every available command. Worth running occasionally — new ones get added. |
| Switch between models mid-session. |
| Checks that your Claude Code install is healthy. Run this if something feels broken. |
When You're Deeper In
Command | What it does |
|---|---|
| Claude plans before it touches anything. Read-only mode — it tells you exactly what it's going to do and why. For complex UI work or anything you're unsure about, always plan first. |
| Full code review across your files — bugs, performance, style. Useful after a heavy session. |
| Brings additional folders into scope. If your components live in a separate directory, add it. |
| Configure automatic actions — like running Prettier every time Claude edits a file. |
Keyboard Shortcuts
Shortcut | What it does |
|---|---|
| Cycles through permission modes: Normal → Auto-Accept → Plan. The fastest way to drop into Plan Mode without typing a command. |
| Edit your last message. When you realise you said it wrong, don't retype — just escape twice. |
| Cancel whatever Claude is currently doing. |
| Exit the session. |
| Navigate back through your previous prompts. |
| Multi-line input without any setup. |
CLAUDE.md — Your Project Brief
CLAUDE.md is the most underrated feature in Claude Code. It's a plain markdown file that lives in your project root and gets read automatically at the start of every session. Whatever you put in it, Claude knows without you having to re-explain.
For a design-heavy project, yours might look like:
Run /init in a new project and Claude will generate a first draft automatically. Then edit it to reflect your actual decisions.
Picking the Right Model
Model | When to use |
|---|---|
Sonnet | Your default. Fast, capable, handles most UI and component work comfortably. |
Haiku | Quick questions, simple edits, when you want speed over depth. |
Opus | Complex problems — intricate state logic, architectural decisions, hard debugging. Use it intentionally, not by default. |
Switch mid-session with /model.
Tips That Actually Matter
Plan before you build. Hit Shift+Tab to drop into Plan Mode before any significant change. Claude will tell you exactly what it's going to do — and you'll catch misunderstandings before they become file changes you have to undo.
Be specific about what you're designing. "Make it feel better" doesn't give Claude enough to work with. "Add a spring animation on mount with a slight overshoot, 300ms duration" does. The more you describe it like a designer, the better the output.
Use @ to reference specific files. Instead of letting Claude scan everything, type @src/components/Card.tsx to bring a specific file into focus. Faster and more precise.
Clear between tasks, compact mid-task. /clear when you're moving to something new. /compact when a session has gotten long but you're still working through the same problem.
Describe what you see, not just what you want. "The hover state transition is too abrupt, there's no easing" is more useful than "fix the hover." Claude can't see your screen — help it understand what's wrong.
Resources
Awesome Claude Code — community-maintained skills, hooks, and workflows
Thanks for stopping by.
©2026 – Have a
