Claude Code: a programming agent that works in your repo
Claude Code is Anthropic's programming agent: it reads your code, edits files and runs commands. What it does, what it costs and what to check before accepting.
What does it actually do?
Claude Code takes a task in natural language, for example “write tests for the authentication module, run them and fix the failures.” Then it plans, reads the files it needs, writes changes across several files and runs commands to verify them. It works directly with git: it stages changes, writes commit messages, creates branches and opens pull requests.
The official documentation describes it as an agentic coding tool that reads your codebase, edits files, runs commands and integrates with your development tools. What matters for you is that it does not only suggest code: it writes it into your project, and you decide what to accept.
Why does it matter to a designer?
Because it moves the boundary between designing and building. You can prototype an interaction, ask Claude Code to implement it with the project’s components and review the result on a real screen. This connects with the idea of vibe coding, with one important difference: the agent works on a repository that has rules, not on a blank page.
Three pieces make the difference for a designer:
- CLAUDE.md: the instructions file Claude Code reads at the start of every session. Your tokens, components and rules go here. The documentation recommends keeping it short: for each line, ask whether removing it would make Claude get things wrong; if not, delete it. A file that is too long makes Claude ignore some of the rules.
- Skills: reusable workflows you package for your team, such as a screen review or an accessibility checklist. See agent skills.
- MCP: the connection to external tools, such as Figma or Notion. With it, the agent reads the design directly. You connect one with
claude mcp add; see also Figma to code with MCP.
CLAUDE.md is advisory: Claude usually follows it, but it is not guaranteed. What must happen every time (for example, formatting after each edit) is set up as a hook, a command that runs before or after its actions.
How do you get started?
The official documentation offers several surfaces:
- Terminal: the full CLI. On macOS, Linux and WSL it is installed with
curl -fsSL https://claude.ai/install.sh | bash; on Windows PowerShell, withirm https://claude.ai/install.ps1 | iex. Check the install withclaude --versionand start withclaudeinside the project folder. If you have never used a terminal, read terminal basics first. - VS Code and JetBrains: extensions with inline diffs and plan review. The JetBrains plugin requires installing the CLI separately.
- Desktop app: to review changes visually, run several sessions side by side and schedule recurring tasks. It requires a paid subscription.
- Web (claude.ai/code): in the browser, with no local setup, useful for long or parallel tasks.
The CLI asks you to log in the first time. The documentation says most surfaces require a Claude subscription or an Anthropic Console account.
Which commands and modes are worth knowing?
Inside a session, typing / shows the available commands. These are the most useful at the start, according to the official reference:
| Command | What it is for |
|---|---|
/init | Creates a starter CLAUDE.md from the project structure |
/plan | Enters plan mode: Claude reads and proposes, without editing |
/clear | Starts a conversation with empty context |
/compact | Summarizes the conversation to free up context |
/rewind | Restores conversation and/or code to an earlier point (aliases: /checkpoint, /undo) |
/permissions | Manages which actions Claude can take without asking |
/usage | Shows session cost and your plan’s limits |
Permission modes define what Claude can do without asking you. You switch them with Shift+Tab in the CLI:
- Manual (value
default): reads without asking; asks permission to edit or run. - acceptEdits: approves file edits and basic file commands.
- plan: read-only, to explore before changing anything. See plan mode.
- auto: a second model reviews actions instead of you. Since version 2.1.283 it is the starting mode in the terminal and VS Code.
- dontAsk and bypassPermissions: the first is for CI and scripts; the second is only for isolated containers or virtual machines. Do not use them on your work machine.
Check which mode you are in before asking for large changes. To understand the risks, see sandboxing and permissions.
How much does it cost?
According to Claude’s pricing page, checked on October 17, 2026:
| Plan | Monthly price in USD | Includes Claude Code |
|---|---|---|
| Free | 0 | No |
| Pro | 17 with annual billing (200 paid up front); 20 if you pay monthly | Yes |
| Max | From 100 (choose 5x or 20x Pro usage) | Yes |
| Team | Standard seat: 20 annual or 25 monthly. Premium seat: 100 annual or 125 monthly | Yes |
| Enterprise | 20 per seat with annual billing, 20-seat minimum, plus usage at API rates | Yes |
Usage limits reset on a five-hour window and paid plans add weekly limits. Prices can change: check the official page before you decide.
When should you NOT use Claude Code?
- When the project has no version control. Without git it is hard to review and undo what the agent changed, and Claude’s checkpoints do not replace git.
- When you do not understand the code it will touch. You can ask for explanations, but you need to read the changes before accepting them.
- When the task is a one-line change. If you can describe the change in one sentence, editing it yourself is usually faster than planning it.
- When you work with sensitive data and are not clear about what is sent to the service. Check your organization’s data policy.
Example
Illustrative example: a designer wants to test a change to a website’s contact form. She has already connected the Figma MCP server. She opens the terminal in the repo, types claude, enters plan mode with Shift+Tab and asks: “Read the current form and propose how to reorder the fields according to this Figma frame. Use the components in src/components and do not create new fields.” She reviews the plan, approves it and Claude makes the change. She also asks it to take a screenshot of the page and compare it with the design. Then she reviews the diff in the desktop app, fixes one label and commits on a separate branch.
What the example shows: the value is not in writing the code, but in giving a verifiable result (the screenshot against the design) and reviewing a small change with judgment. On a team, the next step is human review of agent PRs.
Common mistakes
- Accepting changes without reviewing the diff.
- Leaving CLAUDE.md empty and repeating the same rules in every prompt, or the opposite: stuffing it until Claude ignores rules.
- Asking for large changes in a single prompt instead of small, verifiable tasks.
- Not giving Claude a way to check its work (tests, a build or a screenshot compared with the design). Without that, you are the only control.
- Mixing unrelated tasks in the same session. Use
/clearbetween tasks. - Working directly on the main branch instead of a separate branch. See branches and pull requests.
- Trusting that because the agent ran the tests, the interface looks right. Look at the screen.