Claude Code for Designers

1. Install

Open your terminal and run:

curl -fsSL https://claude.ai/install.sh | bash

Or if you use Homebrew: brew install --cask claude-code

Then type claude and follow the login flow. You need a Claude subscription (Pro, Max, Teams, or Enterprise) or a Console account.

There's also a desktop app, and it works in VS Code, JetBrains, even on the web at claude.ai/code. But if you're an adventurous noob like me, I recommend the terminal with Ghostty.

2. Plan First, Build Second

Hit Shift+Tab twice for plan mode. Every time. You can also do /plan fix the layout bug to jump straight in.

Go back and forth until the plan makes sense, then let Claude build it. A good plan means Claude gets it right on the first try instead of going in circles.

When something breaks mid-build, don't keep pushing. Go back to plan mode and re-plan. I learned this the hard (and expensive) way.

3. Set Up Your CLAUDE.md

This is the file that matters most. CLAUDE.md sits in your project and tells Claude your rules, preferences, and patterns. Claude reads it every session.

If this is the first time Claude sees a project, run /init. It inspects the codebase and creates a CLAUDE.md for you. You don't have to write this yourself — let Claude write and update its own file.

The trick: every time Claude does something wrong, end with “Update your CLAUDE.md so you don't make that mistake again.” I do this constantly... every time it adds a custom Tailwind class that deviates from the system, or recreates a component that could've been reused, I make it add a rule. Over time, the mistakes stop.

Keep it under ~200 lines though. If it gets too bloated, Claude starts ignoring stuff. For bigger projects, break rules into separate files:

.claude/
├── CLAUDE.md
└── rules/
    ├── design-system.md
    ├── components.md
    └── accessibility.md

Each rule file can target specific paths:

---
paths:
  - "src/components/**/*.tsx"
---
# Component Rules
- Always use design tokens, never hardcode colors
- Reuse existing components before creating new ones

4. Be Specific

Claude does better with specific prompts. “Full-height hero, center text vertically, 32px gap between cards, Inter from Google Fonts” beats “make it look better” every time.

Designers already know how to give feedback. Use that. Describe what you want the way you'd describe it to another designer... bluntly.

Voice input: hit fn twice on Mac for dictation. Super helpful for me as a new dad — I'm often carrying baby while telling Claude what to do. We speak faster than we type, and we naturally give more context when talking out loud... but I'll be honest, speaking sometimes gives me a mini mind short-circuit lol. It's weirdly a different mental model.

Claude Code is also rolling out a built-in /voice command — speak commands directly in the terminal without system dictation.

Pasting images: screenshots go straight into Claude. In the terminal it's Ctrl+V (not Cmd+V). Take a screenshot, make notes with something like CleanShot, paste it in, say “this doesn't look right.” Claude can see it.

5. Make Claude Review Itself

Don't just accept what Claude gives you. Push back.

What I do: open another tab with another Claude session and ask it to review the work in the specific worktree the other agent just finished. It gives you insights on what could be improved, mostly in order of priority. Then I pass those back to the original session and tell it someone reviewed their code lol. So yeah, I have two tabs per feature — one building, one reviewing.

There's also /simplify — runs three parallel review agents on your recent changes checking for reuse, quality, and efficiency. Quick way to catch stuff before you commit.

Some prompts I've stolen from Boris Cherny (the guy who built Claude Code):

• “Grill me on these changes”
• “Prove to me this works”
• “Knowing everything you know now, scrap this and implement the elegant solution”

6. Use the Browser Agent

This one is huge. Vercel's agent-browser gives Claude the ability to open a browser, test flows, check different screen sizes, take screenshots, click buttons... EVERYTHING.

npm install -g @anthropic-ai/agent-browser

Now Claude can build a component, open it in the browser, screenshot it at mobile/tablet/desktop, and fix responsive issues on its own. Making Claude test its own implementation is a game changer.

(disclaimer, I work at Vercel... but I really recommend this since it's just so damn useful. Although it can eat a ton of memory from your computer)

7. Use Subagents

Add “use subagents” to your prompt when you want Claude to work harder. It spins up smaller agents that handle pieces in parallel. Keeps your main conversation focused instead of one long messy thread... it just does a better job.

8. Run Multiple Sessions with Worktrees

Run 3-5 Claude sessions at once using git worktrees. Each session gets its own copy of the code so they don't step on each other. One builds, another tests, a third researches. You can ask Claude to set this up for you.

claude --dangerously-skip-permissions --worktree feature-name

Add --tmux to launch each in its own tmux pane if you're juggling a bunch.

Once you try parallel sessions, one at a time feels slow. But be careful... idk why, but Claude does get tripped out and suddenly goes back to main, or gets trapped in another worktree. I honestly don't know why and I wish Anthropic did something about this.

9. Install Skills

Skills are custom commands that extend what Claude can do. Grab community ones from skills.sh:

npx skills add frontend-design        # bold design aesthetics, not generic AI slop
npx skills add web-design-guidelines   # 100+ UI/UX/a11y rules from Vercel
npx skills add screenshot-to-code      # turn UI screenshots into working code
npx skills add agent-browser           # browser automation skill

The frontend-design one is great — pushes Claude toward distinctive typography and color instead of that generic “AI look.” And web-design-guidelines audits your UI against accessibility and UX rules automatically.

Make Your Own

If you do something more than once, turn it into a skill. They live in .claude/commands/ (project) or ~/.claude/commands/ (global):

.claude/commands/design-review.md

Review components for design system consistency:
1. Check that all colors use design tokens (no hardcoded values)
2. Verify spacing uses the token scale
3. Confirm responsive breakpoints are mobile-first
4. Check accessibility (contrast ratios, ARIA labels)
5. Flag any components that could reuse existing ones

I have skills for optimizing images, generating social cards, compressing videos, helping me with blog post images using Sharp...

At v0, Claude kept inventing new colors or styles that looked just right enough that you don't notice it actually deviated from the system. So I made a skill instructing it on our tokens, text styles, components... and now it rarely makes those mistakes anymore.

10. Connect MCPs (Plugins)

MCPs let Claude talk to external tools. For designers, these are the ones that matter:

Figma MCP

Pull design tokens, reference component specs, read your Figma files. Figma also has Code to Canvas now — push code-generated UI back into Figma as editable frames.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Efecto MCP

This is my own tool — an AI-native design canvas where you and Claude design together. Under the hood it's all React and Tailwind. Claude drives the canvas live while you watch and fine-tune.

npx @efectoapp/mcp-studio install

Then tell Claude “design [anything] in Studio” — saying “Studio” is important. It opens in your browser and designs in real time. Still in beta at efecto.app/studio.

SAP Fiori MCP

For y'all — there's an official SAP Fiori MCP server for generating and adapting Fiori elements apps:

npm install @sap-ux/fiori-mcp-server

There's also secondsky/sap-skills on GitHub — a whole set of Claude Code skills covering BTP, CAP, Fiori, ABAP, HANA.

Others worth knowing

• GitHub MCP — review PRs, manage issues
• Vercel MCP — deploy from Claude Code
• Mockuuups MCP — generate device mockups
• Pencil MCP — another AI design canvas

To share MCPs with your team, add them with project scope:

claude mcp add --scope project --transport http figma https://mcp.figma.com/mcp

This creates a .mcp.json that gets committed to git. Everyone on the team gets the same tools.

11. Set Up Hooks

Hooks run commands automatically at key moments. Add them in .claude/settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write $EDITED_FILE"
          }
        ]
      }
    ]
  }
}

Some ideas: auto-format CSS after every edit, run design token validation after file changes, take a screenshot after UI changes, lint accessibility on every component save.

12. Use Loops

/loop is like a cron job for Claude. Schedule recurring tasks while your session stays open:

/loop 10m check if the dev server is still running
/loop 1h run the design token validation tests
/loop 5m check for new PRs and summarize design changes

It can run for up to 3 days. Good for monitoring builds, running periodic checks, or watching for changes.

13. Just Say “Fix”

When something breaks, paste the error and say “fix.” That's it. Don't overthink it... that's your PROMPT ENGINEERING:

fix

For design bugs: screenshot what looks wrong, paste it in, say “this doesn't look right.” Claude can see screenshots.

14. Start Fresh When It Gets Weird

If Claude is going in circles or the conversation gets long and messy, don't keep adding to it:

• /compact — summarizes the conversation and frees up context
• Or just quit and start a new session

A fresh Claude with a good CLAUDE.md picks up where the old one left off. Don't waste tokens on a confused agent.

15. Useful Shortcuts

16. Be Dangerous

One last thing... if you know what you want, and you're sure Claude can handle it without hand-holding:

claude --dangerously-skip-permissions

Like it says, it will stop dangerously asking for permissions. No more saying yes, yes, yes to everything.

Just don't run this on projects you don't trust. Hidden content in files can manipulate Claude into doing things you didn't ask for.

17. Set Up GitHub

Claude can handle all your git stuff. Create repos, commit, push, make PRs... u just have to tell it what u want.

First, install the GitHub CLI and log in:

brew install gh
gh auth login

Once that's done, Claude can use it directly. Just say things like:

"initialize git, create a repo on GitHub called my-project, and push"
"commit everything with a good message"
"create a PR with a summary of what changed"

That's it. Claude runs gh commands under the hood. No need to memorize git — just tell Claude what u want and it handles the rest.

18. Deploy

Vercel: sign up with GitHub, import repo, click Deploy. Every push auto-deploys after that. Or install the Vercel MCP and say “deploy this” inside Claude Code.

19. Resources

• Claude Code docs — code.claude.com — worth reading
• skills.sh — community skills you can grab and use
• Boris Cherny's tips — howborisusesclaudecode.com — how the Claude Code team uses their own tool
• Figma MCP docs — help.figma.com
• Efecto — efecto.app — AI-native design canvas with MCP
• SAP Fiori MCP — github.com/SAP-samples
• awesome-claude-code — GitHub — curated list of skills, hooks, plugins
• agent-browser — github.com/vercel-labs/agent-browser