Get started

GitHub Copilot UI workflow

A visual UI editor for GitHub Copilot

GitHub Copilot in VS Code keeps getting better at UI work — Copilot Edits, agent mode, even attaching screenshots. But a screenshot only shows the problem; Copilot still has to infer which element, which CSS property, and how much to change.

Modify closes that gap. You adjust the live page in Chrome, and Modify hands Copilot a measured brief: selector, property, old value, new value, page context. Copilot writes the code; it no longer guesses the target.

Install free - generate Copilot 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

Screenshots show the problem. Deltas show the fix.

Attaching a screenshot to Copilot Chat tells it "something here is off". It still has to reverse-engineer the fix: which selector, which property, what value. On a real component tree that inference is where the retry loops come from.

Modify captures the fix itself. You move, resize, recolor, or retype on the live page, and the export names the exact selector and the before-and-after CSS values. Copilot maps that straight onto your code.

How Modify works with GitHub Copilot

  1. Step 1

    Run your dev server and open the page in Chrome.

  2. Step 2

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

  3. Step 3

    Click Copy AI Prompt to capture selectors, before-and-after values, and context.

  4. Step 4

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

Fits Copilot Edits and agent mode

The exported prompt is plain text, so it works in inline chat, Copilot Edits, and agent mode without any extension or MCP setup.

Because the change is expressed as concrete values, Copilot can decide whether to write plain CSS, Tailwind classes, or component styles according to your project conventions.

Tips for better Copilot UI prompts

  • Keep one visual fix per exported prompt so Copilot maps it to a single component.
  • Reference the file or component with #file when your repo is large.
  • Ask Copilot to reuse existing design tokens or Tailwind utilities instead of raw values.
  • Hard-refresh and compare after Copilot applies the change; export a follow-up delta only if something is still off.

FAQ

Does Modify replace attaching screenshots to Copilot?

It complements it. A screenshot shows the problem; Modify supplies the exact selector, property, and target value so Copilot does not have to guess measurements from pixels.

Do I need Cursor or a different editor?

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

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

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