Claude Code is Anthropic’s agentic coding tool. It reads a project’s files, edits them, runs commands and works through a task while you watch and redirect. For a designer, that means you can describe an interface change in plain language and see it running in a browser minutes later, inside the real codebase rather than a mock-up.
You don’t need to be a developer to start, but you do need to be comfortable reading what it did and judging the result. This guide covers setup, the working loop, and the limits worth knowing.
What Claude Code actually does
The Claude Code overview describes it as a tool that “reads your codebase, edits files, runs commands, and integrates with your development tools”. It runs in the terminal, in VS Code and JetBrains, in a desktop app and on the web. Most surfaces need a Claude subscription or an Anthropic Console account.
The difference from a chat assistant is that it acts on files. In a typical design task it will:
- find the components and styles a page uses
- propose a change, or make it directly
- run the project, a type check or tests
- read the output and fix what broke
Set up a local project
Install Claude Code with the official installer. On macOS, Linux and WSL the docs give this command:
curl -fsSL https://claude.ai/install.sh | bashThen open a terminal in your project folder and start it. Claude Code asks you to log in the first time.
cd your-project
claudeIf you prefer not to live in the terminal, the desktop app includes Claude Code and shows diffs visually. Either way, work on a branch in git so every change is easy to review and undo.
Your first prompt on an unfamiliar project should be a question, not a change. Ask how the frontend is organised: where pages live, which component library it uses, how styles and tokens are defined, and how to run it locally. Then run /init, which generates a starting CLAUDE.md with the build commands and conventions it found. You’ll add your design rules to that file later.
The working loop: brief, build, look, refine
Most useful design sessions follow the same four steps.
Brief
Describe the screen the way you would to a developer on your team: who it’s for, what it needs to do, what matters most, and any constraints. Point to existing examples in the codebase with @, for example follow the layout of @app/settings/profile/page.tsx. Our guide to making Claude Code build better UI has a full brief template.
Build
For anything bigger than a small tweak, ask for a plan first. Plan mode (press Shift+Tab until the status bar shows it) lets Claude read and propose without editing, so you can correct the approach before any code changes.
Look
Run the dev server and open the page. You can also have Claude look for itself: with the Chrome integration it can open your local site, take screenshots and read console errors. Ask it to compare the screenshot with your reference or brief and list the differences.
Refine
Give feedback in specific, measurable terms. “Make it feel lighter” leaves the model guessing. “Reduce the card padding from 24px to 16px and remove the borders between rows” doesn’t.
Working with images and references
You can paste a screenshot into Claude Code, drag an image in, or give it a file path. That makes visual references practical: a screenshot of a pattern you like, a Figma export, or a photo of a sketch. Always say what the reference is for, because an image on its own doesn’t say which qualities matter. The guide to giving Claude Code visual design references covers this properly.
Limits worth knowing
- It can’t judge taste on its own. It can compare a screenshot with a reference, but deciding whether something is right for your product is still your job.
- Context runs out. Every file, image and message uses space in the context window, and the best practices guide notes that performance degrades as it fills. Use
/clearbetween unrelated tasks. - It follows the codebase it’s given. If the project has inconsistent components, it will copy the inconsistency. Clear rules help more than longer prompts.
- Review everything. Read the diff, check the page at several widths, and test it with a keyboard. Treat the output as a strong first draft.
- Be careful with tools you connect. MCP servers and browser access extend what Claude can reach, so only connect services you trust.
Where to go next
Once the loop feels natural, the gains come from context: the rules in your CLAUDE.md, the references you share and the tools you connect over MCP. Using MCP with Claude Code for design work explains how to connect external context, and the design engineering workflow shows how the pieces fit from first reference to shipped UI.