The all-in-one UI builder for the AI era

Plan the UI. Your coding agent builds exactly that.

Design every page, set your brand, and plan it live with your team. UIPrompt is the one source of truth your agents build from, so they ship what you planned instead of hallucinating.

Try it freeHow it worksSee pricing

No signup. The editor runs in your browser.

Works with the AI tools you already use

Claude
Claude Code
ChatGPT
CodexCursorGitHub CopilotWindsurfGemini CLI
Live demo
Try the live editorNo signup needed · runs in your browser

Same agent. Different brief.

A vague prompt leaves the agent to fill the gaps. A UIPrompt brief describes every section, in order, with your copy and your stack, so there are no gaps left.

Without UIPrompt

A one-line prompt

Build a pricing page for my SaaS. Make it look modern.

What comes back

4th tier
Not asked for
  • A plan tier you don’t sell
  • Sections nobody asked for
  • Placeholder copy and made-up colours

With UIPrompt

The brief your agent reads

# Pricing Hero [order: 0]
- **Headline**
  - Exact Copy: Simple, honest pricing
- **Billing Toggle**: Monthly | Yearly
# Plan Cards [order: 1]
- **Plan Card ×2**
  - Exact Copy: Starter $12/mo | Pro $29/mo
  - Forbidden Patterns: extra tiers
# FAQ [order: 2]
- **Accordion**: 4 questions
### Required [MUST follow]
- Project colour tokens only

Result

Exactly the page you planned

+
+
+
+
  • Only the three sections in the brief
  • Your prices and copy, word for word
  • Your stack and colour tokens

Sharing

One project for the whole team.

Invite teammates as viewers or editors. Everyone works from the same, current plan, in the app and through their own agent, so nobody builds from an old copy.

Sam opens Share, invites alex@studio.test as an editor, and the invite shows as pending. Alex accepts it from their Projects page, opens the project and renames the hero component. Sam's editor then shows the change with the note "Alex Chen changed this project."

Branding

On brand from the first build.

Give UIPrompt your logos, colors and fonts once. Every brief carries them, so every page your agent builds looks like yours.

  1. 01

    Start from your website

    Paste your site’s address. UIPrompt reads its colors, fonts and logos, and you keep what fits.

  2. 02

    One kit for the whole brand

    Logos for light and dark backgrounds and an icon, plus colors by role and fonts, kept in a brand kit you reuse across projects.

  3. 03

    Share it with your team

    Invite teammates as viewers or editors of the kit. Change a color once and every project using the kit picks it up.

  4. 04

    In every brief

    Your agent gets the brand with the plan: the exact colors and fonts, and the logo files themselves, through the connector or in your repo.

GitHub, built in

From repo to shipped UI.

Import your app, plan every page on the canvas, and UIPrompt puts the brief in your repo, where Claude Code, Codex or Cursor picks it up. No copy and paste.

  1. 01

    Import your repo

    Private repos too. Pages, stack and design tokens are detected, and every route becomes an empty page ready to plan.

  2. 02

    Plan on one grid

    Start from ready-made sections (hero, pricing, sign-in, checkout and more) that snap to a 12-column grid, so every page lines up like a real site.

  3. 03

    The brief lands in your repo

    Open a pull request, or send it straight to main in one click. .uiprompt/brief.md and AGENTS.md point your agent at the plan.

  4. 04

    See what's built

    Every page shows Built or Planned straight from your repo, and the skeleton deploys to GitHub Pages with live status.

Connectors

Works inside your agent.

Add UIPrompt as a connector in Claude, ChatGPT or Codex. Your agent plans pages on your canvas, then builds from the brief. No copy and paste.

Claude
Claude Code
ChatGPT
Codex
Cursor

  1. 01

    Add the connector

    Paste uiprompt.app/api/mcp as a custom connector in Claude or ChatGPT, or add it to Claude Code, Codex or Cursor.

  2. 02

    Sign in once

    Approve access with your UIPrompt account. No API keys to copy, and you can disconnect any app at any time.

  3. 03

    Your agent plans on your canvas

    Describe a page or drop in a screenshot. Your agent lays out sections and atomic components with exact copy, right on your UIPrompt canvas.

  4. 04

    Build from the brief

    Your coding agent pulls the finished brief straight from UIPrompt (stack, tokens and every section in order) and builds it in your codebase.

Included in every plan · disconnect any app from your projects

UIPrompt

Loading pricing plans...

Frequently asked
questions.

UIPrompt (also written UI Prompt) is a web app for planning your UI before your coding agent builds it. You lay out every page on a canvas, set your brand, and your agent builds from that brief in your own repo.

Claude Code, Codex, Cursor, GitHub Copilot, Windsurf and Gemini CLI. Your agent reads the brief from your repo or through the UIPrompt connector, and any agent that accepts a prompt or context file can use it.

No. UIPrompt is built for developers, not designers. You describe what you want in plain language, pick a tech stack, and enable design rules. The canvas handles the structure, the AI handles the visuals.

Figma produces design files your agent can’t read. v0 generates UI from a prompt and builds it for you. UIPrompt is the plan for your whole app (every page, your brand and your stack) and the coding agent you already use builds it in your own repo, so the result is a consistent interface instead of isolated pieces.

When you send one prompt for an entire page, the AI has to make up the structure, hierarchy, and intent on its own. UIPrompt gives each component its own targeted prompt — the hero block gets one instruction, the CTA gets another, the nav gets another. The agent receives a blueprint, not a paragraph.

Yes. You configure your framework (Next.js, React, Vue, SvelteKit…), styling (Tailwind CSS, CSS Modules…), and component library (shadcn/ui, MUI, Radix…). With Strict Stack mode on, the AI will only use what you listed — no hallucinated imports.

Three ways. Copy the full brief from Agent context and paste it into your agent. Ship it to your repo with Publish → Pull request for your agent: UIPrompt opens a pull request (or commits straight to main) that adds .uiprompt/brief.md and points AGENTS.md at it, so Claude Code, Codex or Cursor picks it up without copy and paste. Or connect UIPrompt to your agent as a connector, and it pulls the brief itself with the get_agent_context tool.

Yes. Add https://uiprompt.app/api/mcp as a custom connector: in Claude under Settings → Connectors, in ChatGPT with developer mode turned on, or in Codex with codex mcp add (Claude Code and Cursor work too). Sign in once with your UIPrompt account, and your agent can plan pages on your canvas and pull the finished brief to build from. Connectors are included in every plan, and you can disconnect any app from your projects page.

Yes. Create a project from any repo you give the UIPrompt GitHub app access to, private ones included. UIPrompt detects your pages, stack and design tokens, and every route becomes a page on the canvas. Page content is not imported: each page starts empty, ready for you to plan.

No. It only adds the .uiprompt/ folder and a small marked block in AGENTS.md, always through a pull request you can review (or a merge you choose). The public skeleton for GitHub Pages lives on its own gh-pages branch. Your application code is never touched.

For imported projects, every page shows Built or Planned based on the routes in your repo, and routes added later can become pages in one click. When you publish the skeleton to GitHub Pages, the deployment status shows live in the editor.

Ready to stop re-prompting?

Try it free