Skip to content

Internal tool for Dreamtree product teams

On-brand prototypes from any AI, in minutes.

Ask Claude, Codex, Gemini or Cursor for a screen. ProtoPro makes it build with real twreact-ui components in your product's brand, checks it against our design rules and accessibility, and shows you a live preview you can share.

Connect your AI client
  • Claude
  • ChatGPT
  • Cursor
  • Codex
  • Gemini

How it works

Five steps, the same for every model. The AI builds; ProtoPro keeps it on brand and shows you the result.

  1. Connect

    Add ProtoPro to your AI client as a remote MCP server and sign in with your company account.

  2. Prompt

    Describe the screen, or hand it a mockup image.

  3. Check

    Design lint, TypeScript and accessibility run on every version.

  4. Preview

    See it live at desktop and phone width, in your brand.

  5. Share

    Send a review link; take the code into the product.

Add ProtoPro as a remote MCP server

Add a remote MCP server with the URL https://protopro.app.drm3.org/mcp. Your client discovers the sign-in page from the server: sign in with your company id, email and password, approve the scopes, and it is connected. Any MCP client with remote servers works, including:

  • Claude Code
  • claude.ai
  • ChatGPT
  • Cursor
  • Codex CLI
  • Gemini CLI
  • opencode
  • MCP Inspector

Local

Or run it on your machine

No account needed: npx protopro init --brand practicepro, then npx protopro preview.

    What you get

    • Real code, not pictures

      Screens are React with twreact-ui components and blocks, ready to move into a product repo.

    • Your brand by default

      Each prototype uses its product's tokens. No raw colours, no one-off sizes.

    • Checked every time

      The design-lint rules product CI uses, plus TypeScript, axe and a 390 px check.

    • Any model

      ProtoPro is an MCP server, so each person can use the AI they prefer.

    Questions

    Do I need an account?

    Not on your own machine. The shared server asks you to sign in with your company account when your AI client connects.

    Can prototypes use real client data?

    No. Prototypes use mock data only, shaped like the product's models.

    Which products are supported?

    Any product with a brand file in twreact-ui tokens. PracticePro is the first.

    How do I get the code into my product?

    Copy it from the screen viewer today. One-click export to Next and Vite projects is planned.