pen.dev

Use it when

You work in Cursor, VS Code, Claude Code, OpenAI Codex, or another MCP-capable IDE and want hi-fi UI design files versioned next to React/HTML—without exporting from a separate design tool.

What it does well

• Agent-driven MCP canvas with .pen open format stored in your codebase (Git-friendly)
• Works across Cursor, VS Code, Claude Code, OpenAI Codex, and other IDE or agent setups
• Bidirectional MCP: read and write the canvas; connect DB/API/Playwright MCPs for richer flows
• Figma paste import (vectors, text, styles); curated design kits or hook your repo design system
• Export HTML, CSS, and React; agents can generate parallel screens and flows on canvas
• Desktop download plus IDE extension; pencil.dev redirects to pen.dev

Skip it when

• You need fully open self-serve signup without Request Access or early-access gating
• Your team does not use an IDE or MCP coding agent—pen.dev assumes you bring Cursor, Claude Code, Codex, or similar
• You want hosted monthly credits instead of BYO agent or API subscriptions
• You need a full-stack app builder (Softgen/Lovable) rather than design-in-repo plus export
• Do not confuse with trypencil.com—unrelated marketing GenAI platform