Log in

Kite vs pen.devA pen.dev alternative your agents design in.

Kite is a design tool where your team and its agents work in the same file at once, with live cursors, comments and share links. pen.dev keeps designs as local files for one person at a time.

Start designingPricing

  • Kite is best for

    Teams designing and reviewing together, with agents in the same file.

  • Kite costs

    Free to start. Pro $20 per editor a month, $16 billed yearly. No AI credits.

Key differences.

11 things Kite does that pen.dev doesn't, or does less.

FeatureKitepen.dev
What a design isReal HTML and CSS, the language agents already read and write.pen JSON on a WebGL canvas
ComponentsComponents with variants, properties and instance swapYes, no variants
Hosted MCP serverAny agent connects from anywhere, signing in with OAuthNo
Jobs from comments@-mention an agent in a comment and it makes the changeNo
Where files liveIn the cloud, open in any browser or in Kite for MacOn your disk only
FigmaPaste to and from Figma, or import a whole file by its linkNo
Live cursorsLive cursors and selections for everyone in the fileNo, one person at a time
CommentsComment threads pinned to the design, with email notificationsNo
Workspaces and rolesWorkspaces with owner, editor and viewer rolesNo
Share linksOne link per file, and guests comment with just a nameNo
Browser extensionKite Capture copies any web page into Kite as layersNo

Bring your own agents.They design in Kite, beside you.

Claude, Cursor, ChatGPT or any MCP client connects in a click, with no key to copy, and draws on the same board as your team.

  • ClaudeOne click from Claude's connector directory.
  • Claude CodeOne command, or already there with Claude.
  • CursorAdd to Cursor in one click, then sign in.
  • ChatGPTKite as an app, on in your sources.
  • CodexTwo commands, shared with the app and IDE.
  • VS CodeOne click; Copilot Chat uses it in Agent mode.
  • GitHub CopilotOne command in the Copilot CLI.
  • GrokA custom connector on grok.com.
  • MuseAsk Muse; it sets the connector up itself.
  • AntigravityOne line in its MCP config.
  • ManusA custom MCP server, with a Kite key.
  • v0A custom MCP from the prompt form.
  • Any MCP clientStreamable HTTP and OAuth: just the address.
See how each one connects

Leave a comment. Your agent does it.

Pin a comment where the change belongs and mention your agent. It reads the frame and the layer you clicked, does the work and answers in the thread.

Comments

  • Around · Guide

    Speakeasy bars in Bangkok

    TAX★ 4.7 · Bar · Chinatown · $$$
    Lennon's★ 4.8 · Bar · Lumpini · $$$$
    Root Bar★ 4.6 · Bar · Lat Phrao · $$
    BLESSING SHOPHOUSE★ 4.5 · Bar · Sukhumvit · $$$
    OpenTAX★ 4.7 · Bar · Chinatown · $$$
    OpenLennon's★ 4.8 · Bar · Lumpini · $$$$
    OpenRoot Bar★ 4.6 · Bar · Lat Phrao · $$
    OpenBLESSING SHOPHOUSE★ 4.5 · Bar · Sukhumvit · $$$
    Claude

    @Claude turn this list into cards

    Run with Claude Code when sent

    Loukmannow

    @Claude turn this list into cards

    Claude is working…Done by Claude

    Claudenow

    Done: a Place card for each bar, its photo at 3:4 with the Open chip on it.

    Ask in a comment, get it doneMention your agent on the frame and send. In Kite for Mac it starts at once with Claude Code or Codex, does the work, and answers in the thread.

  • do my Kite requests

    3 requests waiting, oldest first.

    • Turn this list into cards
    • A phone version of this screen
    • Try a warmer hero photo

    Done, each answered in its thread.

    Do my Kite requestsIn a browser, requests wait on their comments. Say this to your agent and it works through every one.

  • OpenTAX★ 4.7 · Bar · Chinatown · $$$
    Place cardPhoto at 3:4, the Open chip on it.
    Warmer photo?

    Notes on the boardSticky notes and annotations sit beside the work. Agents read them, and leave their own.

Works with what you have. Figma, and your Mac.

Bring your Figma files in and send frames back the other way. Keep Kite in its own app, where a request in a comment runs on your Mac.

Figma

  • Import from Figma

    figma.com/design/Around-AppImport

    • Create component
    • Copy
    • Copy/Paste as
    • Copy as PNG
    • Copy for agent
    • Copy to Figma
    • Copy as Tailwind

    Figma, both waysPaste frames from Figma, or import a whole file by its link. Right-click any frame for Copy to Figma, and it pastes in Figma as layers.

  • Claude finished your Kite requestnowIt answered on the comment.

    Kite for MacA tab per file, a mark on the tab an agent is working in, and requests that run with Claude Code or Codex on your Mac. It tells you when they're done.

Why teams switch from pen.dev.

What changes the day your agents design in Kite.

  • Designs are real HTML and CSS, not a JSON format that has to be translated to code.
  • Live cursors, comments and share links. pen.dev is one person at a time.
  • A hosted server, so ChatGPT and other agents in the browser can connect.
  • Components with variants.
  • Figma both ways. pen.dev has no Figma import.
  • Version history without setting up git.

Questions.

About Kite and pen.dev.

Is Kite a good pen.dev alternative?

Yes. Kite is a design tool where your team and its agents work in the same file at once, with live cursors, comments and share links.

How much does Kite cost?

Kite is free to start, with 1 editor and 3 files. Pro is $20 per editor a month, or $16 billed yearly. There are no AI credits: your agent runs on the plan you already pay for, so you never pay twice for the AI.

Which AI agents work with Kite?

Claude, ChatGPT, Cursor, Codex and any other MCP client that signs in with OAuth. They connect to Kite's hosted server, or to the local one in Kite for Mac.

More comparisons

Checked against each tool's own docs and pricing in October 2026. Something out of date? Tell us at hello@kite.new.

You and your agents,on one board.

In your browser, or in Kite for Mac. Bring the agent you already use.

Start designingDownload for Mac