Get started

VS Code + Copilot UI workflow

Visual UI editing for VS Code and GitHub Copilot

Cursor and other AI-native editors are adding built-in browser and design modes. VS Code with GitHub Copilot does not have that layer — and most frontend developers still work in VS Code.

Modify fills the gap without changing your editor. You adjust the live page visually in Chrome, and Modify turns the change into a structured prompt with selectors and exact CSS values that Copilot Chat can apply to your code.

Install free - add a visual layer to VS Code

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 UI fine-tuning is slow in VS Code + Copilot

Copilot only sees your code and your words. When the problem is visual — a button slightly misaligned, a heading that wraps wrong, spacing that feels off — describing it in text means Copilot has to guess the element, the property, and the amount.

Each guess costs a round trip: prompt, apply, reload, compare, re-prompt. Modify removes the guessing by letting you show the final state on the live page first.

How Modify works with VS Code

  1. Step 1

    Run your dev server and open the page in Chrome as usual.

  2. Step 2

    Select the element with Modify and adjust it — position, size, color, text, spacing — like in Figma.

  3. Step 3

    Click Copy AI Prompt. You get selectors, before-and-after CSS values, and page context.

  4. Step 4

    Paste into Copilot Chat (or Copilot Edits) in VS Code and let it apply the change to the right file.

No editor lock-in

The exported prompt is plain structured text. It works with Copilot Chat, Copilot Edits, a Continue.dev session, or any other assistant you run inside VS Code — and it works the same if you later switch editors.

Modify never touches your codebase directly. Your assistant applies the change, so it lands in the right component, stylesheet, or Tailwind class according to your project conventions.

Tips for VS Code workflows

  • Keep the dev server page and VS Code side by side; the loop is edit visually, copy, paste, save.
  • Export one visual fix per prompt so Copilot maps it to a single component cleanly.
  • Ask Copilot to reuse existing design tokens or Tailwind utilities instead of raw values when your project has them.
  • Use Modify on the deployed site too — the prompt still tells Copilot exactly what to change in source.

FAQ

Does Modify require Cursor or any specific editor?

No. Modify is a Chrome extension that outputs a plain text prompt. It works with VS Code and GitHub Copilot, and with any editor or assistant that accepts pasted text.

How is this different from Cursor’s built-in browser mode?

AI-native editors bundle a similar visual layer inside their own product. Modify gives the same capability to developers who stay in VS Code, without switching editors or plans.

Does it work with Tailwind or CSS-in-JS projects?

Yes. Modify captures the visual delta as CSS values; Copilot decides whether to express the change as Tailwind classes, styled-components, or plain CSS based on your codebase.