Give Claude Code a UI plan it can build from

Claude Code 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. Claude Code reads it over MCP or from your repo, and builds every page the same way.

Why Claude Code's UI drifts

Ask for “a pricing page” and Claude Code 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.

A long CLAUDE.md helps with rules, but not with the plan for each page. That is the part UIPrompt holds.

The quickest way: the UIPrompt plugin

One install adds the UIPrompt connector and a UIPrompt skill that tells Claude Code how to build from your plan: sections in order, your exact copy, your real logo files.

claude plugin marketplace add Curtisx1/uiprompt-plugins
claude plugin install uiprompt@uiprompt

Then run /mcp in Claude Code and sign in to UIPrompt. See the plugin on GitHub.

Or connect it yourself

1. The MCP connector

Add UIPrompt as a remote MCP server, then run /mcp in Claude Code and sign in.

claude mcp add --transport http uiprompt https://uiprompt.app/api/mcp

Claude Code 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

Claude Code reads CLAUDE.md, or AGENTS.md when there is no CLAUDE.md, so it picks up the brief in every session with no copy and paste. For projects imported from your repo, each page in UIPrompt shows Built or Planned based on the routes Claude Code has added.

What Claude Code 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 Claude Code

• “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 Codex, Cursor, GitHub Copilot, Windsurf or Gemini CLI? The same plan works there too.