Give GitHub Copilot a UI plan it can build from

Copilot's agent writes good components. What it can't know is the rest of your plan: which sections each page has and in what order, the exact copy, your colors, fonts and logo, and the libraries you already use. UIPrompt is where that plan lives. Copilot reads it over MCP or from your repo, and builds every page the same way.

Why GitHub Copilot's UI drifts

Ask for “a pricing page” and GitHub Copilot has to decide the structure, the hierarchy and the copy on its own. Then it decides again, differently, for the next page. Over a few sessions you get:

• Pages that don't match. Different spacing, button styles and section patterns from one page to the next.
• Placeholder copy. “Streamline your workflow” instead of what you actually want to say.
• Off-brand details. Close but wrong colors, a default font, a redrawn logo.
• Libraries you don't use. A new component library or icon set pulled in because nothing said otherwise.

Copilot instructions help with conventions, but not with the plan for each page. That is the part UIPrompt holds.

Two ways to connect

1. The MCP connector

In VS Code, add UIPrompt to .vscode/mcp.json, start the server and sign in to UIPrompt when VS Code asks. Use it from Copilot's agent mode.

{
  "servers": {
    "uiprompt": {
      "type": "http",
      "url": "https://uiprompt.app/api/mcp"
    }
  }
}

GitHub Copilot can then pull the finished brief with get_agent_context, fetch your logo files with get_brand_logo, and plan new pages on your canvas itself: describe a page or drop in a screenshot, and it lays out the sections with exact copy for you to review before anything is built.

2. The brief in your repo

From the editor, choose Publish → Pull request for your agent. UIPrompt opens a pull request (or commits straight to main) with:

• .uiprompt/brief.md: pages, sections in order, design tokens, stack and rules
• .uiprompt/skeleton.json: the same structure as data
• a short marked block in AGENTS.md (and CLAUDE.md if you have one) pointing agents at the brief

Copilot's coding agent reads AGENTS.md in your repo, so it picks up the brief with no copy and paste. For projects imported from your repo, each page in UIPrompt shows Built or Planned based on the routes GitHub Copilot has added.

What GitHub Copilot receives

Not a paragraph: a structured brief, with a separate prompt, exact copy and visual weight for every component. This is part of the brief for the demo project:

<design_tokens>
Colors: Ink: #111111, Primary: #2c7ef8, Success: #1bc47d, Soft surface: #f4f6fb
Fonts: Sans: Inter / system-ui
Spacing: Base: 8px grid, Section: 96px desktop / 56px mobile
</design_tokens>

<frameworks>Next.js, React</frameworks>
<styling>Tailwind CSS</styling>
<component_library>Shadcn UI, Radix</component_library>

# Hero Section [order: 1]

- **Hero copy**: Main headline, supporting value prop, and CTAs.
  - **Prompt:** Write and render a left-aligned hero for AtlasOps. The headline
    should promise release clarity without hype. Add a short paragraph and two CTAs.
  - **Exact Copy:** Know what shipped, who felt it, and what broke. | Start free | Watch demo
  - **Forbidden Patterns:** gradient blob background, abstract AI sparkle decorations
  - **Visual Weight:** HERO — dominant focal point
- **Product preview**: Dashboard preview showing release and incident signals.
  - **Visual Weight:** PRIMARY — clearly subordinate to hero

Things to ask GitHub Copilot

• “Build the pricing page from my UIPrompt project.”
• “Plan a settings page in UIPrompt from this screenshot, then build it.”
• “Which pages in the brief are not built yet? Build the next one.”
• “Use the brand logo from UIPrompt in the header and as the favicon.”

Frequently asked questions

Also using Claude Code, Codex, Cursor, Windsurf or Gemini CLI? The same plan works there too.