Claude Code vs Cursor for frontend work

Claude Code and Cursor both write frontend code well, because both run frontier models through an agent that reads your project, edits files and checks the page in a browser. They differ in shape. Claude Code is Anthropic's Claude-only agent that runs in the terminal, the desktop app or your editor; Cursor is an editor with its own agent, its own models and a Design Mode for pointing at the running page.

For how the site looks, the specification you hand the agent decides far more than the choice of tool. Pick Claude Code for an agent-first workflow with Claude models inside one subscription, and Cursor if you work in an editor and want to direct visual changes by clicking on the page.

The short answer#

If you only read one section, read this one.

• Choose Claude Code if you want Claude models included in your plan, an agent that runs the whole build loop from a terminal or the desktop app, and Anthropic's plugin marketplace, including the frontend-design skill.
• Choose Cursor if you live in an editor, want Tab completion while you type, want to click an element in the running app and leave the agent a note, or want to switch between Grok, Composer, Claude, GPT and Gemini models in one place.
• Use both if you like. Claude Code runs as an extension inside Cursor, and Cursor reads skills from .claude/skills/, so one design setup can serve both.
• For the look of the site, the tool matters less than the brief. Both build what a full art direction specifies, and both connect to the same MCP servers, Thanor's included.

The two designs below are the kind of page either agent builds when the prompt carries a full art direction: palette in hex, type scale, curves and durations, section order and media.

How this comparison was made#

Everything here comes from each vendor's own documentation and pricing pages, read on 9 November 2026: the Claude Code docs, Claude's pricing, and Cursor's Models and Pricing, Design Mode, Browser, Rules, Skills and MCP pages. No benchmark was run for this article. Where it says a tool does something, the vendor documents it.

Two cautions. Prices and plans in this category move often, and Cursor's changed shape after its acquisition by SpaceX, which Cursor announced as complete on 14 August 2026. Check both pricing pages before you buy. And neither tool's design output can be separated from the prompt it was given, which is the point of the last half of this comparison.

Claude Code and Cursor side by side#

Prices are as listed on each vendor's page at the time of writing, before tax.

How each one works on a frontend task#

Claude Code is built around the agent. You describe the change, it plans, edits across files, runs the dev server and reports back, and you review the diff in your editor or in the desktop app. Plan mode, which you reach with Shift+Tab, makes it propose before it touches a file (common workflows). That shape suits long builds: a hero, then each section, then a check, each pass delegated whole.

Cursor is built around the editor. Its Agent sits in a side pane (Cmd+I), edits files, runs terminal commands and saves checkpoints you can roll back to (Agent docs). Tab, its autocomplete, predicts the next edit as you type, including across files. For larger work, a Project hands the job to a coordinator agent that delegates to others.

The practical difference on UI work is where your hands are.

• In Claude Code you write the brief and review results. It suits a full page built pass by pass, or a refactor of a whole component library against a token file.
• In Cursor you can stay in the code between agent runs, nudge a value with Tab and keep going. It suits iterating on a component you are reading line by line.

One more difference matters for design. Cursor's agent has an image generation tool for mockups and product assets, saved to an assets/ folder by default. Claude models output text, so Claude Code makes no images itself; it builds with the media you supply or a tool you connect. Neither produces the art-directed film or cut-out a cinematic hero needs, so plan the media separately in both.

Seeing the page and pointing at it#

Both tools can look at what they built, which is the single biggest upgrade for frontend work in either.

Claude Code: the Browser pane and Chrome#

Claude Code has two routes. In the desktop app, the Browser pane runs your dev server, and with autoVerify on Claude takes screenshots, inspects the DOM, clicks through and fixes what it finds after each edit (desktop docs). In the terminal, claude --chrome connects it to your real Chrome, with your logins, console and DOM (Chrome docs). The docs name design verification as a use case: build a UI from a Figma mock, then check it in the browser against the mock.

Cursor: the built-in browser and Design Mode#

Cursor has a built-in browser the agent drives: navigate, click, type, scroll, screenshot, console and network (Browser docs). On top of it sits Design Mode, in the browser inside the Agents Window; its current Annotate tool needs Cursor 3.24.18 or later. Press Cmd+Shift+D, click an element or drag across an area, and type or dictate the change. Each note carries the element's tag, classes, selector path, size, six computed styles, the component name in React, Vue and Svelte, and a cropped screenshot. You can edit text in place, change CSS properties in an inspector, or batch several notes into one message.

Which one to reach for#

For "make this card match that one" and "this gap is too big", Design Mode is the more direct tool, because pointing beats describing. For a long build that should check itself after every pass, Claude Code's auto-verify loop does that without being asked. Both serve the same rule from Anthropic's best practices: give the agent a check it can run, and ask for the screenshot as evidence. The check prompts in Claude Code prompts for UI work in either tool.

Rules, skills and design memory#

A design survives across sessions only if it lives in a file the agent reads. Both tools have one, with a difference in how they load.

Claude Code reads CLAUDE.md at the start of every session, and @path imports inside it are expanded and loaded with it (memory docs). .claude/rules/ files can be scoped with a paths field so UI rules load only for UI files. Cursor uses .mdc files in .cursor/rules/, with alwaysApply, globs or a description deciding when each applies (Rules docs). Its docs add one caution: a rule that references another file does not inline it, and the agent reads that file only when it decides to, so values that must always apply belong in the rule body.

A Cursor rule for UI files might look like this:

---
description: Design rules for UI work
globs: src/components/**/*.tsx
alwaysApply: false
---
Colors, sizes and durations come only from src/styles/tokens.css.
Transitions list their properties; never "all". UI response is 240ms on
cubic-bezier(0.32, 0.72, 0, 1). Every animation has a reduced-motion end state.

Skills travel well between the two. Both use folders with a SKILL.md, and Cursor also loads .claude/skills/ for compatibility (Skills docs). That means Anthropic's frontend-design skill, installed in Claude Code as a plugin or copied into .claude/skills/frontend-design/, can serve both tools from one repository.

Models and what they cost#

This is where the two differ most, and the difference is about which models you want.

Claude Code runs Claude models, and its usage comes out of a Claude plan. At the time of writing, Anthropic lists Pro at $20 a month billed monthly or $17 a month billed annually, Max at $100 with five times Pro's usage, and Ultra at $200 with ten times Pro's usage (pricing). It can also run on an Anthropic Console account billed per token. Claude Opus 5.5 is the model Anthropic's docs suggest starting with for most workloads.

Cursor is now sold as part of what its docs call The X Subscription, one subscription for Grok, Cursor and X (Models and Pricing). At the time of writing:

• Plus, $8 a month: Cursor's own models only (Grok 4.7, 4.6, 4.5 and Composer 2.5) at fixed settings.
• Premium, $30: four times Plus's usage, cloud agents, and third-party models.
• Super, $100, and Ultra, $200: fifteen and fifty times Plus's usage.

The included pool covers Cursor's own models and refreshes weekly. Claude, GPT and Gemini models are not part of it: on Premium and above they cost the model's API list price from prepaid credit, which Cursor's page shows as $4 per million input tokens and $20 per million output tokens for Claude Opus 5.5. People on the older Pro, Pro+ and Ultra plans keep them as they were.

For frontend work, then, the question is simple. If Claude is the model you want driving the build, Claude Code includes it in the plan. If you are happy with Grok or Composer, or want to switch models often, Cursor's pool and model list are built for that.

MCP and design context#

Both tools speak MCP over stdio and remote HTTP with OAuth, so the same servers work in both. Only the config differs.

In Claude Code, one command adds a remote server, and /mcp handles sign-in (MCP docs). In Cursor, servers go in .cursor/mcp.json for the project or ~/.cursor/mcp.json for every project, and Cursor asks for approval before it runs a tool by default (MCP docs). Here is the Thanor server in each:

claude mcp add --transport http thanor https://thanor.ai/api/mcp

{
  "mcpServers": {
    "thanor": {
      "url": "https://thanor.ai/api/mcp",
      "headers": { "Authorization": "Bearer YOUR_THANOR_TOKEN" }
    }
  }
}

Claude Code signs in with OAuth, so there is no token to paste. Cursor takes a personal token you generate in your Thanor account. Figma's MCP server follows the same pattern, and Figma recommends its plugin in both: claude plugin install figma@claude-plugins-official in Claude Code, /add-plugin figma in Cursor's chat. The servers worth adding for design work, with what each does, are in the best MCP servers for web design.

Where the design actually comes from#

Swap the tool and the code changes a little. Swap the brief and the site changes completely. That is the pattern the pillar on AI models for web design finds across every release, and it holds here, because both tools run the same class of models with the same habit: an open decision gets the most common answer.

Hand either one "a landing page for an alerting tool" and you get a centered hero, a gradient, three cards and fade-ups. Hand either one a specification with the palette in hex, the display face at clamp(4rem, 12vw, 11rem), reveals on cubic-bezier(0.22, 1, 0.36, 1) at 640ms, a written section order and a hosted film, and both build that page. The same list of defaults shows up whichever model you pick, as the frontend model comparison sets out. These two are harder briefs, because the motion and the interaction are the design:

Where the tools do differ is in how easily they hold a direction once you have one. Claude Code imports the spec file into every session; Cursor applies it through rules and reads referenced files on demand. Both work if the values are written down, and neither works if they live in a chat. How to build a website with Claude Code shows that setup step by step.

Choose Cursor if, choose Claude Code if#

An honest split, with no tie-breaker hidden in it.

Choose Cursor if:

• you spend most of the day in an editor and want Tab completion as you type;
• you want to click an element in the running app and leave the agent a note with its computed styles attached;
• you want Grok and Composer included, and other models one menu away;
• you want image generation for mockups inside the agent.

Choose Claude Code if:

• you want Claude models included in a Claude plan rather than billed per token on top;
• you prefer to brief an agent and review results, in the terminal or the desktop app;
• you want the desktop app's auto-verify loop and Chrome with your own logins;
• you want Anthropic's plugin marketplace, including the frontend-design and Figma plugins.

Using both, or moving between them#

You do not have to choose once. Anthropic's docs give an install link for the Claude Code extension in Cursor next to the one for VS Code, so you can run Claude Code inside Cursor's editor with your Claude plan. Check the publisher and version when you install: on 29 October 2026 Cursor reported that two maliciously modified versions of the extension, 2.1.312 and 2.1.313, not made by Anthropic, had been listed in its marketplace for several hours and removed.

To keep one design setup working in both:

1. Keep the specification in one file, such as design/SPEC.md, and the values in src/styles/tokens.css.
2. Import the spec from CLAUDE.md, and either reference it from AGENTS.md or copy the must-hold rules into a Cursor .mdc rule body.
3. Put shared skills in .claude/skills/, which both tools load.
4. Add each MCP server to both .mcp.json and .cursor/mcp.json. Claude Code's entries carry "type": "http" next to the url; Cursor's need only the url, plus headers when the server takes a token.

Moving a project from one to the other is mostly those four steps. The code itself is ordinary React, Vue or HTML either way, so nothing about the site depends on which agent wrote it.

The verdict on Claude Code vs Cursor#

For frontend design, call it a tie on capability and choose on workflow and cost. Claude Code is the better fit if you want Claude to drive the build inside one subscription and you prefer briefing an agent to editing beside it. Cursor is the better fit if you work in an editor all day, want Design Mode's point-and-annotate edits, or want Grok and Composer included with other models on tap.

What neither decides is the art direction. Both will build a generic page from a vague brief and a designed one from a full specification, so the decision that changes your site most is the one you make before opening either tool.

Bring the art direction into either one#

Thanor is a library of website designs, each shown as a live preview and each with a long prompt that is a full art direction written as values: palette in hex, typefaces and scale, spacing, easing curves and durations, section order, every interaction, and hosted media the built page uses. Paste a prompt into Claude Code or Cursor and the agent builds that site.

The Thanor MCP removes the copy and paste. Connected as shown above, it gives either agent three read-only tools: search_designs to find directions by name or category, get_design for one design's details, and get_prompt for the full art direction. It is included in every paid plan, listed in the Claude connectors directory, and documented in the MCP docs. Plans are on pricing.

What to do next#

Open Vesperion and copy its prompt; it is free with an account. Run it once in Claude Code and once in Cursor with the same model if you can. The two builds will differ in small ways, and both will look far more like Vesperion than like anything a one-line prompt produces, which tells you where to spend your effort. Then browse the library for the direction your next site needs.