Skip to content

Leave a comment.Get a pull request.

Designers, developers and PMs work in one place, on your real components and styles. Leave a comment for a teammate, or write “@Agent make this mobile-friendly”, and the design and the code change together.

Start freeSee how it works

1 month free for individuals, 3 months free for teams. Commenters and viewers are always free.

Product demo: on the Compot canvas, Leo (PM) comments “@Maya these cards get cramped on phones, can we stack them?” on a row of three pricing cards. Maya (Design) replies “@Agent stack these cards on mobile”. The agent replies “Done. Cards stack below 640px and the gap tightens to 16px.”, the cards stack vertically on the mobile screen, and a code diff shows the Tailwind classes changing from grid-cols-3 to grid-cols-1 with sm:grid-cols-3.

Designs live in Figma. Code lives in the repo. They drift.

  • Every small UI change takes the long way round: designer, ticket, developer, review.
  • What ships is close to the mock, but never quite the mock.
  • And product managers can’t change anything themselves.

Today

  1. Mock
  2. Ticket
  3. Developer
  4. Review

Ships a near-copy of the mock

With Compot

  1. Comment
  2. Agent edits design + code
  3. Pull request

Ships exactly what you approved

In Compot, the canvas is the code. Every layer is a real JSX element and every style is a real Tailwind class, rendered live. What you see is what ships.

Your whole team works on the same UI.

Designers, developers and product managers open the same file, built from the same components. Leave a comment on any element for a teammate, or hand it to the agent. Every edit and comment has a name on it, and it all ships as one pull request.

A shared Compot file. A product manager asks the designer to make the empty state say what to do next. The designer asks the agent to use the team’s EmptyState component with a primary button, and the agent does. A developer confirms props and tests are untouched and opens the pull request.
Comments on the element
Pin a thread to the exact button or card. Write to a teammate, or to @Agent.
Names on everything
Every edit, comment and pull request shows who made it.
Version history
Look back at any version and restore it.

  • For designers

    Your mock stops being a reference and becomes the shipped UI. You set spacing, states and breakpoints yourself, with the team’s real components and tokens.

  • For developers

    You review a clean React + Tailwind diff in a pull request, and your logic, props and accessibility work stay exactly where you put them.

  • For product managers

    You fix the copy, the order or the empty state yourself, or leave a comment for the designer. It arrives as a pull request instead of a ticket.

Solo builders and founders

Design it, ask for changes, ship it to your repo. One tool instead of three.

Your design system, connected.

Connect your GitHub repo and Compot reads your Tailwind v4 theme and your React components. Your colors, type and spacing become styles, your components land in the panel, and everyone on the team, plus the agent, builds with them.

Your styles, by name
Colors, type, spacing, radii and shadows come from your theme tokens. Fields show “md · 16px”, not a random hex code.
Your components, not copies
Button, Input, Card and the rest appear in the components panel with their variants and props, as real instances of your code.
The agent stays on system
It uses your tokens and places your existing components instead of drawing new ones.
Kept in sync
Save any value as a project-wide style. Pull latest brings code changes from the repo back into the canvas.
The acme/web repo connected to Compot. Its theme tokens appear as named colors, type styles and spacing, and its Button, Input and Badge components appear with their variants.

From the UI you have to a pull request, in five steps.

  1. Step 1: Bring in your UI

    Connect a GitHub repo or .zip of your components, so your design system is there from the start. Or paste a Figma frame link, drop a screenshot, or import an HTML/CSS page. Screenshots are rebuilt as editable layers with real text, buttons and inputs.

  2. Step 2: Edit it like Figma

    Work on a board with real Mobile, Tablet and Desktop breakpoints. Use auto layout or free positioning, multi-select, align and distribute, snapping guides, and a layers and components panel.

  3. Step 3: Ask the agent

    Leave a comment on any element, for a teammate or for the agent: “@Agent add a dark hover state and stack these cards on phones.” The agent updates the canvas and the React/TSX code together.

  4. Step 4: Review the change

    Changed layers are outlined and you get a code diff. Keep it, undo it, or reply in the thread to refine it: “a bit smaller.”

  5. Step 5: Ship it

    One click opens a pull request in your GitHub repo with working React + Tailwind code, image assets, and a design file you can reopen in Compot.

Everything a design tool does, on top of real code.

An AI agent that edits design and code together

Ask in a comment pinned to an element, or in the chat panel. The agent changes the canvas and the TSX in one step, and shows you exactly what it did.

Uses your design system
Your colors, spacing, radii, text styles and shadows, from your Tailwind v4 theme tokens. It places your existing components instead of drawing new ones.
Leaves your code alone
Hand-written logic, props and accessibility work stay in place.
Shows its work
Live progress, plus token usage and cost for every run.
Review, then keep
Changed layers are highlighted next to a line diff. Keep, Undo, or reply in the thread to refine.

A real canvas, not a picture of one

The canvas renders real Tailwind classes with a live runtime, so it looks exactly like what ships.

Responsive by design
Mobile, Tablet and Desktop screens, with per-screen overrides you can see and edit.
An inspector that writes Tailwind
Typography, fill, layout, border and effects. Fields show token names with resolved values, like “lg · 24px”.
Save as style
Turn any value into a project-wide design token.
Tools you already know
Frame, Rectangle, Text, Image, Pencil markup, Comments. ⌘D, ⌘C/⌘V, align with ⌥A/D/W/S, snapping, zoom and pan.

Components, states and prototypes

Build behavior on the board, not in a spec. The pull request contains it as working code.

Components with variants
Variants and text props, linked across pages. Edit once, and every instance updates on the canvas, in the prototype and in code.
States and interactions
Default, Error, Success and more, wired with interactions like “On click → Error”, drawn as arrows on the board.
Prototypes that run real code
Prototype mode runs the component’s actual code, with real state, handlers, hover and focus.
Behavior in the PR
States become useState and real event handlers in the generated code.

Review and shipping

Everything the team agreed on in comments ends up in one pull request, under a real name.

One review for everyone
Designers see the changed layers, developers see the diff, PMs see the result.
Version history
Look back at any version and restore it.
GitHub, as you
Sign in with GitHub, pick a repo and base branch, and open the PR under your own name.
Pull latest
Code changes made in the repo come back into the canvas.

Use the model you trust. Pay your provider directly.

Claude is the default. Switch to OpenAI, Gemini, OpenRouter, or any OpenAI-compatible server, including local ones. Bring your own API key; Compot stores it encrypted.

  • ClaudeDefault
  • OpenAI
  • Gemini
  • OpenRouter
  • OllamaOpenAI-compatible
  • LM StudioOpenAI-compatible
  • GroqOpenAI-compatible

Work with Compot from your own tools.

Compot isn’t only an app. Everything you do on the canvas is also available through an API and an MCP server, so your scripts and your AI coding tools can work with the same files, components and comments as your team.

  • API

    Build on top of Compot

    Read and update files, components, styles and comments from your own scripts, internal tools and CI.

    • Scripts
    • Internal tools
    • CI
    Read the API docs
  • MCP server

    Bring Compot into your AI tools

    Connect Claude Code, Cursor or any other MCP client to your Compot files. Your coding agent sees the real designs, components and styles, and builds with them.

    • Claude Code
    • Cursor
    • Any MCP client
    Set up MCP

Free to start. Simple after that.

Try everything first. After that, pay only for the people who edit.

  • Individual

    First month free

    For solo builders and founders who design and ship their own UI.

    $0during the trial, regular price$7

    then $7 per month

    Start free

  • Team

    First 3 months free

    For designers, developers and PMs working on the same components.

    $0during the trial, regular price$15

    then $15 per editor seat, per month

    Commenters and viewers are free, so PMs and stakeholders can join without a paid seat.

    Start a team trial

Both plans include

  • Comment threads and version history
  • Connect your design system from GitHub
  • The canvas, with Mobile, Tablet and Desktop screens
  • The AI agent in comments and chat, on your choice of model
  • Components, states and prototypes
  • GitHub pull requests and Pull latest

AI runs on your own API key, so model usage is billed by your provider, not by Compot.

Your next UI change could be a comment.

Start with a free month on your own, or 3 months free for your team. Commenters and viewers never need a paid seat.

Start freeStart a team trial
Read the docs