Claude Code writes good frontend code, but it can't see your design. It works from your files and what you paste in, so it doesn't see your mockup, the page it just rendered, or which button you mean. That's how a one-element request turns into a rewrite. Give it visual context in three places: a reference to build from, a way to see what it built, and a precise target for every change. For a new screen, prompt with a direction. To fix a screen you already have, point at the element, set the exact value, and hand Claude Code that change instead of describing it. You can do that by hand with Chrome DevTools, or in Subframe's built-in browser on macOS: Inspect the live page, edit it, then send the change to an agent or copy a prompt for Claude Code.
The five steps:
CLAUDE.md, plus the frontend-design plugin for new screens./diff.Claude Code sees your repo and whatever you put in the conversation. For frontend work that leaves three blind spots:
Builders we talk to work around this by describing pixel values in prose, trading screenshots, and using Chrome DevTools to find the class to paste in. One builder at a fintech company told us he hates asking an agent to "update the border radius from 16 to 12 pixels." A designer on a five-person team said: "I can't select an item to point Claude Code to."
Anthropic's own features cover a lot of this, so the steps start there.
Put design rules in CLAUDE.md. Claude Code reads it at the start of every session. Run /init to create one and keep it short; Anthropic warns that long files get ignored. A bigger design system can live in DESIGN.md, imported with @DESIGN.md. For example:
# UI rules
- Reuse components in src/components/ui before writing new ones
- Colors, spacing and radii come from the Tailwind theme; no hex values
- Only change the files named in the promptInstall the frontend-design plugin for new screens. Anthropic's official plugin has Claude choose a clear aesthetic direction for the interface, and steers it away from generic fonts and purple gradients. Run /plugin install frontend-design@claude-plugins-official; it loads on frontend prompts by itself.
For new screens, prompt with a direction. OpenDesign's and Thomas Wiegold's guides both say to prompt with "aesthetic direction, not pixel values": purpose, tone, font category, color family. That's good advice for a blank page and helps you avoid the vibe-coded look (more here). It stops working once the screen exists and one value is wrong. That's Step 5.
Screenshots. Drag an image into the Claude Code window, paste it with Ctrl+V (Alt+V on Windows), or give a file path, then ask Claude to match it with your existing components.
Figma frames. If your design lives in Figma, run claude plugin install figma@claude-plugins-official, authorize it from /plugin, and paste a frame link into your prompt. Figma's MCP server gives Claude Code your components, variables, layout data and Code Connect mappings.
What a screenshot can't carry. It's a flat image: no tokens, exact spacing values or hover states, so Claude may hardcode colors (Builder.io's guide makes the same point). Name your tokens in CLAUDE.md and expect to correct a few values in Step 5.
Anthropic's best practices say to give Claude a way to check its work; for UI, "take a screenshot of the result and compare it to the original." Three ways:
claude --chrome. Claude can open your localhost page, read console errors and DOM state, and take screenshots. It needs a Chromium browser, the extension, and a Pro, Max, Team or Enterprise plan.claude mcp add playwright npx @playwright/mcp@latest adds Playwright MCP, which can screenshot the page. Chrome DevTools MCP does the same in Chrome.Check the result yourself too: builders told us screenshots don't always load fonts, and the Chrome extension can clash across parallel Claude sessions.
A vague target invites a bigger change. Make it exact:
@, the element, and what must not change:In @src/components/PricingCard.tsx, change only the card's padding from p-6 to p-4
and make the plan name font-semibold. Don't touch other components, shared styles
or the Tailwind config. If another file needs to change, stop and ask./plan. Claude proposes a plan and edits nothing until you approve. Anthropic's rule of thumb: if you could describe the diff in one sentence, skip the plan..claude/settings.json, such as "deny": ["Edit(src/components/ui/**)"] under permissions, blocks edits to those paths./diff shows every change in your working tree. /rewind (or Esc twice) restores an earlier checkpoint, but checkpoints only track Claude's own edits, so keep using git.Anthropic's best practices put it simply: "The more precise your instructions, the fewer corrections you'll need." A vague prompt such as "make the pricing card tighter" leaves Claude to decide which files and styles to change. The scoped prompt names one file and one element, and tells Claude to stop and ask before touching anything else.
When something on an existing screen is a few pixels off, typing the change is the slow part. Point at the element, set the exact value, and give Claude Code that change.
By hand, on any system. In Chrome, right-click the element and choose Inspect. Try values in the Styles pane until it looks right, then put the exact class, value and file into a Step 4 prompt. It's free; you just translate each tweak back into your own classes or props.
In Claude's desktop app. The Code tab's Browser pane runs your app, and Cmd+Shift+S (Ctrl+Shift+S on Windows) selects an element in it. Select the element you mean, then give the exact value in your prompt, as in Step 4. On Windows or Linux, try this first.
In Subframe's built-in browser (macOS desktop app):
localhost:3000. Inspect works on any HTML and CSS page, not just React./diff, as in Step 4.Subframe's browser, including Inspect, Annotate and Capture, needs the desktop app, which is macOS only today; Windows and Linux are coming soon. Elsewhere, use DevTools.
For a bigger change, Capture the page or an element as an editable design on Subframe's canvas (how to convert a website into an editable design). Or, with Subframe's Claude Code plugin installed (it adds Subframe's MCP server and agent skills), ask Claude Code for up to four variations and open them in Subframe (how to generate UI variations with AI).
To compare tools rather than workflows, see Best Design Tools for Claude Code and Best AI UI Design Tools.
The most-cited guides (OpenDesign's, Thomas Wiegold's and a Medium setup guide) treat frontend design as generation: install the plugin, write rules, prompt with a direction. That's right for new screens. They skip the app you already have, keep feedback to text and show no results. None mentions pointing at an element, though Claude's desktop app now has an element picker.
AI answers share the gap. Of 38 complete answers from ChatGPT, Google AI Overviews and Gemini that we read (Sep 21–Oct 8, 2026), none of the 29 about seeing designs or scoping a change suggested pointing at the element on the running app.
It works from files and what you paste in. Give it a screenshot, Figma's MCP server or a browser tool.
Yes: drag one in, paste with Ctrl+V, or give a file path. With Claude in Chrome, the desktop app or Playwright MCP, it can take its own.
Name the file and element, list what must not change, plan multi-file changes, and check /diff. For visual tweaks, set the exact value on the running page and hand that over.
It helps on new screens; its examples are all new interfaces. For precise edits to an existing screen, use Steps 4 and 5.
Yes. Subframe's built-in browser lets you edit the live page and hand the change to Claude Code (macOS desktop app). Builder.io's Design mode edits visually in its cloud workspace.
No. Screenshots, CLAUDE.md rules and a browser tool cover most of it.
Not yet. The desktop app is macOS only; Windows and Linux are coming soon.
Subframe's free plan works with your Claude subscription. Download the macOS desktop app, connect your codebase, and Inspect the page you're fixing.
