Claude Code is Anthropic's coding agent. For designers on a product team, Claude Code is good at the work around a change. It reads how a screen is built, makes one small change on a branch, previews it and opens a pull request engineers review like any other. The prompts to copy, for reading a screen and for one scoped change, are in what Claude Code does on a real codebase.
It is weakest at the change designers make over and over, the run of small visual adjustments, because each one is a sentence and a round trip. Its own canvas, /design, drafts options beside the product, not on it.
So keep Claude Code for the pull request loop and move the visual loop to a canvas that edits the running product, unless you already read diffs comfortably. Shipping through pull requests is the whole idea of the design engineer guide, and Claude Code is one way in.
Key takeaways
- Use Claude Code to read how a screen is built, make one scoped change on a branch, preview it and open a pull request for review.
- Claude Code and Claude Design are separate products. Claude Code works in your repository and needs a seat on Pro, Max, Team or Enterprise. Claude Design drafts visual work on a canvas.
- Small visual adjustments are the slow part: every nudge goes through the agent. Claude Code's
/designcanvas drafts options beside the product, not on it.- Engineers review a designer's change like any other code: a draft pull request, a preview link per pull request, line comments and suggested changes, then a merge.
What Claude Code is, and how it differs from Claude Design
Anthropic's Claude Code overview says "Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools." It runs in a terminal, an IDE, a desktop app and the browser.
For a designer, the desktop app is the way in. Anthropic's desktop quickstart says "You can ask Claude to work on the code in a folder on your computer and review its changes without using a terminal." The app includes Claude Code, so there is no Node.js or CLI to install.
If you already use a terminal, the CLI installs with one line on macOS, Linux and WSL: curl -fsSL https://claude.ai/install.sh | bash. If you have never opened one, Anthropic's terminal guide starts from there.
Claude Code needs a paid plan. The quickstart says "Claude Code requires a Pro, Max, Team, or Enterprise subscription." For companies, Anthropic's Help Center adds that "Claude Code is included with every Team plan seat."
Claude Design is a separate product. Anthropic launched it as "a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work" (Claude Design launch post). It is on every Claude plan, including the free one. The launch post adds that "Claude packages everything into a handoff bundle that you can pass to Claude Code."
Nate Parrott, the product designer who built Claude Design, draws the line himself on Anthropic's blog: "And if you're shipping production software, stick with Claude Code."
If you are the one designer on a team where every engineer already runs Claude Code, you have probably been told to try it too. Maybe you started with Claude Design or Figma's MCP server, and got a screen that looked close but was not built from the team's components.
Claude Code changes your repository. Claude Design draws on its own canvas.
What Claude Code does for designers on a real codebase
On a team codebase, Claude Code is most useful to a designer around the visual change itself.
Read how a screen is built
Start with questions. Ask which component renders the screen, where its values come from and what else uses it, and tell Claude Code not to change anything yet.
Which component renders the plan cards on the pricing page?
Where does the spacing between the plan name and the price come from?
Which other screens use this component?
Do not change any files yet.
The answers name the file a change would touch and the screens it could break. The five code concepts a designer needs cover any new words in them.
Make one small change on a branch
Make the first change one you can say in a sentence. Name the file, the value and what stays the same. Anthropic's overview says Claude Code "stages changes, writes commit messages, creates branches, and opens pull requests," so ask for the branch in the same request.
For the plan card on a pricing page, the request reads: "In components/pricing/plan-card.tsx, change the card's gap from gap-4 to gap-6. Keep everything else as it is." The diff swaps gap-4 for gap-6, 24px, and touches nothing else.
A request that names the file, the value and what stays produces a one-class change.
In components/pricing/plan-card.tsx, change the card’s gap from gap-4 to gap-6. Keep everything else as it is.
return (−<div className="grid gap-4 p-6">+<div className="grid gap-6 p-6"><h3>{plan.name}</h3>
One class changed. gap-6 is 24px, still a step on the spacing scale, and nothing else in the file moved.
An example request and the diff it produces. The rest of the file is unchanged.
The prompt and the pull request description for a first change are in your first pull request.
See it in the Browser pane
Anthropic's desktop docs say "Claude can start a dev server and open it in the Browser pane to verify its changes." Auto-verify is on by default, and the docs describe it: "it takes screenshots, inspects the DOM, clicks elements, fills forms, and fixes issues it finds."
The command that starts the app lives in .claude/launch.json. Ask whoever set up the repo for a local copy that runs. If nobody can, the repo-orientation skill from the design engineer skills gets the app running.
The pane runs on your laptop, and cloud sessions show a diff, not a running app.
Read the diff before anyone else does
The diff view shows exactly what changed. The desktop docs say "To comment on specific lines, click any line in the diff to open a comment box." Then "Claude reads your comments and makes the requested changes, which appear as a new diff you can review."
Before you commit, run /code-review. Its findings arrive as a Code review card with two actions, "Walk through in diff" and "Apply fixes".
Michael Angeles, who designs and builds his own products, wrote on Konigi: "I read every diff Claude Code produces, I reject a good number of them."
Give it the repo's rules and your design context
Claude Code reads the repo's rules before it starts. The overview calls CLAUDE.md "a markdown file you add to your project root that Claude Code reads at the start of every session." And: "If your repository already has an AGENTS.md for other coding agents, Claude Code can read that in place of a CLAUDE.md."
Dikssha Dinesh, Staff Product Designer at Merge, wrote on Merge's blog: "A design system only helps Claude if it's easy to reference." A CLAUDE.md that points at the component library and the spacing scale is one way to make it easy. Skills add repeatable steps on top.
When the design starts as a Figma frame, Claude Code can take its design context through Figma's MCP server. The setup, step by step, is in our guide to connecting Figma's MCP server in Claude Code.
Where you need a canvas
Claude Code is slowest at the change designers make over and over, the small visual call. Every adjustment is a sentence you write, a result you wait for and a page you check.
Nate Parrott's tips for Claude Design make the same point. "Make the last mile manual," he writes. "Direct edits use no tokens, and small calls like sizing and alignment are better eyeballed anyway." In Claude Code you can watch the Browser pane while it works, but each adjustment is still a sentence.
Take one card and the gap under its title. "More room under the title" comes back as gap-8, 32px. "A little less" gives gap-5, 20px. "Between those two" lands on gap-6, 24px, on the third request.
One gap, three requests: each small visual call is a sentence and a wait.
“More room under the title”
gap-8 = 32px8px more than the 24px the design needs.
An example. The card renders the class each request produced. Pick a request.
We hear the same thing on our calls with customers: the first pass happens in Claude Code or Claude Design, and the visual tweaks are planned in Figma, with a traditional handoff file after them. Interaction, responsiveness and visual detail are the parts AI tools do not get right for them.
What /design adds, and where it stops
Anthropic's own canvas for Claude Code is /design, a research preview added in August 2026. Its changelog entry says "The /design skill brings Claude Design's artboard workflow into the CLI and Claude Code Desktop, built on artifacts."
Per the artifacts docs, "Claude drafts the design as artboards on one canvas and publishes the canvas as a Claude Design artifact." The docs add: "Select an element on an artboard and change it, and your edits save automatically." The changelog sums up the loop: "Pick one, tweak it, then have Claude implement it."
That canvas holds options beside the product. Implementing the chosen artboard is a new request to Claude, and the running product, with its real components and data, is not on the canvas.
So split the loop. Keep Claude Code for reading, diffs and pull requests, and make the visual calls on a canvas that edits the running product itself.
A canvas adds little for a designer who already reads diffs comfortably. Dikssha Dinesh at Merge wrote: "That's when I moved into Claude Code and stopped thinking about design and engineering as separate phases." Her changes take an engineer's route: "Once I've rebuilt the UX, it goes through the same code review process as any other change."
Canvases that edit the running product
Several canvas tools work on the code. Cursor's Design Mode lets you click an element in the running app, draw on the page or describe a change by voice. The Cursor comparison covers where a code editor stops. Onlook's FAQ says it starts from your team's existing code, and "your engineers review it as a pull request."
Modeinspect puts a design canvas on the running product. You change the page with design controls, and the coding agent writes the code and opens a pull request. It follows the repo's CLAUDE.md and AGENTS.md files, and it needs no MCP server. It works on Next.js React codebases that use Tailwind, and the repository has to be connected once first.
For Claude Code next to Cursor and Codex, see the design engineer tool stack, side by side.
What tools let designers propose UI changes that engineers review like code?
Designers propose UI changes the way engineers do: a branch, a draft pull request, a preview link, review comments, then a merge. Each step already has a tool engineers use.
Branch and draft pull request
Claude Code makes the branch and opens the pull request. In the desktop app, Create PR uses the GitHub CLI. The desktop docs say "If gh is not installed, Desktop prompts you to install it the first time you try to create a PR."
Open it as a draft. GitHub's docs say "Drafts are useful when you want to share work-in-progress without formally requesting reviews." Code owners are not automatically requested on a draft. Once you mark it ready, a CODEOWNERS file requests review from the engineers who own the files you changed.
The preview link
The preview link is how teammates see the change, because the Browser pane runs only on your laptop. We hear the same thing on our calls with customers: designers who build in Claude Code on their laptop have no easy way to show colleagues what they built.
The team's hosting closes that gap. Vercel builds a preview deployment for each pull request, and Vercel's docs say "you'll typically see links appear in your Git provider's PR comments." Netlify Deploy Previews build per pull request too and post the link as a comment. Without a preview per pull request, teammates see only the code.
Review comments
Engineers review the code in the pull request. GitHub's review docs say "Reviewers can also comment on specific lines, suggest exact changes, and discuss implementation details." A suggested change applies in one step: "To apply the change in its own commit, click Commit suggestion" (GitHub's guide to incorporating feedback).
Comments can also sit on the preview, with Vercel Comments (every commenter needs a Vercel account). Netlify's docs say "Any comment added using the Netlify Drawer on a Deploy Preview is automatically posted in the corresponding pull/merge request at your Git provider and vice versa." If the team runs Storybook, Chromatic's UI Review is "like code review, but for UI."
Edits from comments, then the merge
Claude Code can also make the edits a review asks for. Anthropic's GitHub Actions docs say "Mention @claude in a pull request or issue comment to have Claude analyze code, implement changes, and push commits." A repo admin sets that up once.
With auto-fix, "Claude can watch a pull request and automatically respond to CI failures and review comments" (cloud session docs). In the cloud it needs the Claude GitHub App, and each reply on GitHub is labeled as coming from Claude Code. In a local desktop session, auto-fix answers new review comments too.
Anthropic's Code Review, on Team and Enterprise, adds Claude's own review of the pull request. The Code Review docs say "A review never approves or blocks the pull request, so the decision to merge stays with your team." An engineer approves the pull request and merges it.
Every step of the review already has a tool your engineers use.
- BranchDesignerClaude Code
- Draft pull requestDesignerClaude Code, GitHub
- Preview linkThe team's hostingVercel, Netlify
- Review commentsEngineersGitHub line comments and suggested changes, comments on the preview
- Edits from commentsDesignerClaude Code, @claude in the pull request
- MergeEngineerGitHub
For designers who want to edit the real production code with other tools, the best AI tools for designers lists the options. The reverse case, a designer reviewing an engineer's pull request, is design QA in code.
How to start with Claude Code this week
Give the first week to one screen and one change.
- Get a seat on Pro, Max, Team or Enterprise. If your company is on a Team plan, your seat already includes Claude Code.
- Install the desktop app and open the Code tab. Ask an engineer for a local copy that runs, or use the
repo-orientationskill to get one running. - Pick one screen and ask the three reading questions from above. Change nothing yet.
- Pick one visual change you can say in a sentence. Name the file, the value and what stays, check it in the Browser pane, then read the diff.
- Ask the engineer who reviews your area where the preview link appears. If there is none, ask whether the hosting can build one for each pull request.
Then open the draft pull request for that one change, and send the preview link to your reviewer with it.
Frequently asked questions
Can designers use Claude Code without knowing how to code?
Yes, for scoped work. A designer can ask Claude Code which component renders a screen, where its spacing comes from and what else uses it, without changing a file. Making a change still means reading the diff, because you decide what goes into the pull request. That takes a handful of concepts rather than a programming course, and what a designer needs to know about code lists them.
Is Claude Code free?
No. Anthropic's desktop quickstart says "Claude Code requires a Pro, Max, Team, or Enterprise subscription." On company plans, Anthropic's Help Center says "Claude Code is included with every Team plan seat." The desktop app includes Claude Code, so there is no separate install for the Code tab. Claude Design, Anthropic's separate product for visual work, is available on every Claude plan, including the free one.
What is the difference between Claude Code and Claude Design?
Claude Code is a coding agent that works in your repository. It edits files, creates branches and opens pull requests that engineers review. Claude Design is a separate Anthropic Labs product for visual work on a canvas on claude.ai, and it packages a handoff bundle for Claude Code. Inside Claude Code, the /design research preview publishes a Claude Design artifact with artboards you can tweak before Claude implements one.
Do I need the terminal to use Claude Code?
No. The desktop app includes Claude Code. Anthropic's desktop quickstart says "You can ask Claude to work on the code in a folder on your computer and review its changes without using a terminal." Creating a pull request from the desktop app uses the GitHub CLI, and the app prompts you to install it the first time. If you want the command line too, Anthropic's terminal guide starts from zero.
Can Claude Code preview my app while it works?
Yes, in the desktop app. Claude can start a dev server, open it in the Browser pane, take screenshots, inspect the DOM and click elements to check its changes. The pane runs on your machine, so teammates need a preview link from the team's hosting to see the result. For a Figma design, Claude Code can take design context from a frame through Figma's MCP server. Our guide to the Figma and Claude Code workflow covers the setup.
Is using Claude Code the same as vibe coding?
Not on a team codebase. Vibe coding usually means prompting until something works without reading the code. On a product team, a designer's Claude Code change should stay scoped to one file and one value. The designer reads it as a diff, and an engineer reviews it in a pull request before it merges. The three rungs of designing in code set the two apart.
Can Claude Code use our design system?
It uses what the repository already has, and it follows what the repository tells it. Claude Code reads CLAUDE.md at the start of every session, or AGENTS.md if the repo has one for other agents. A file that names the component library, the theme and the spacing scale helps keep the agent on them. Read the diff anyway, and check that every color and spacing value is a token or a class from the theme, not a raw number.