Get started

Claude Code UI editing

Claude Code UI editing with visual context from the live page

Claude Code is useful for codebase-aware changes, but UI polish still needs precise visual direction. Modify gives Claude a concrete target by turning live page edits into structured implementation prompts.

The workflow is built for teams that want Claude to make the code change while a human still approves the visual state first.

Install free - generate Claude prompts

Free. No credit card required.

Read docs

Visual prompt handoff

Edit the page first.
Then prompt the AI.

Modify is designed for the last-mile UI changes that are obvious on screen but expensive to describe in chat.

Exported prompt includes

Target

Element selector and page context

Change

CSS property or visual operation

Before

Original value from the live page

After

Approved value after visual editing

Why Claude Code needs visual context for UI work

Code context helps Claude understand files and components. It does not automatically tell Claude how much a card should move, which gap should change, or what the final browser state should look like.

Modify captures that missing visual layer. You tune the live page, then provide Claude Code with a prompt that ties the visual result to selectors, CSS properties, and page context.

How Modify works with Claude Code

  1. Step 1

    Open the live route, preview, or staging page you want Claude to update.

  2. Step 2

    Use Modify to make the visual adjustment in the browser.

  3. Step 3

    Export a structured prompt that describes the exact UI delta.

  4. Step 4

    Paste the prompt into Claude Code so it can map the visual change back to the codebase.

Real workflow example

A React component looks close, but the card spacing and CTA hierarchy feel off. You adjust the real rendered page in Modify, then export a prompt that tells Claude Code which visual state to implement.

Claude can then inspect the codebase and choose whether to update component markup, CSS modules, Tailwind classes, or shared design tokens. Modify supplies the visual intent; Claude applies it in code.

Tips for better Claude Code UI prompts

  • Make the visual adjustment before asking Claude to edit the component.
  • Paste the exported prompt with the route or component context Claude should inspect.
  • Group related visual changes only when they belong to the same component.
  • Ask Claude to preserve existing design tokens and local styling patterns when applying the delta.

FAQ

Can Modify work with Claude Code?

Yes. Modify exports plain text prompts that Claude Code can use as implementation guidance for UI changes.

Does Claude need access to Modify?

No. You use Modify in Chrome to create the prompt, then paste the exported instructions into Claude Code.

What kinds of Claude Code UI edits work best?

Spacing, alignment, sizing, color, copy, component hierarchy, and responsive layout adjustments work especially well because Modify captures the visual delta.