Get started

Guide

How to make precise UI changes with GitHub Copilot

Copilot can build a page in seconds, but the last 10% — nudging a button, tightening a gap, fixing a heading that wraps — is where prompts go in circles. This guide shows a workflow that replaces "a bit more to the left" with exact values Copilot can apply once.

The core idea: make the visual decision in the browser first, then hand Copilot the measured change instead of asking it to infer your intent from a sentence or a screenshot.

Install free - try the workflow

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 Copilot loops on UI fine-tuning

Copilot only sees your code and your words. A prompt like "make this tighter" leaves it guessing which element, which property, and how much. Each guess costs a round trip: prompt, apply, reload, compare, re-prompt.

Attaching a screenshot helps Copilot locate the problem, but it still has to reverse-engineer the fix. The reliable shortcut is to give it the fix directly: selector, property, before value, after value.

The workflow, step by step

  1. Step 1

    Open the rendered page in Chrome (dev server or deployed).

  2. Step 2

    With Modify, select the element and adjust it visually until it looks right.

  3. Step 3

    Copy the generated prompt — it contains the selector, the changed CSS property, and the old and new values.

  4. Step 4

    In VS Code, paste it into Copilot Chat or Copilot Edits, referencing the component file with #file if the repo is large.

  5. Step 5

    Review Copilot's in-place edits, accept them, and hard-refresh to confirm the page matches.

Prompt patterns that work

  • One visual fix per prompt keeps Copilot focused on a single component.
  • Prefer measured values (translateX(-12px), gap: 16px) over subjective language.
  • Ask Copilot to preserve existing design tokens and Tailwind utilities.
  • When a change spans a breakpoint, edit at that viewport and say so in the prompt.

When to use this instead of plain chat

Use plain Copilot chat for logic, refactors, and well-described tasks. Use this visual-first workflow when the change is easy to see but expensive to describe: spacing, alignment, size, color, copy, or a responsive state that only appears in the browser.

The result is fewer retries and a page that matches the state you already approved, because Copilot starts from exact values rather than a guess.

FAQ

Do I need a special Copilot mode for this?

No. The exported prompt is plain text and works in Copilot inline chat, Copilot Edits, and agent mode.

Is this faster than describing the change?

For visual fixes, usually yes. Handing Copilot exact selectors and values removes the guess-and-retry loop that vague descriptions create.

Does it work outside VS Code?

Yes. The same prompt works with Cursor, Claude Code, Gemini CLI, Codex CLI, and other assistants, because it is plain structured text.