Head to head
Pencil (pen.dev) vs Superdesign
Pencil (pen.dev) and Superdesign solve the same job (AI design builders), so this is a pick-one decision. If cost is the constraint, Pencil (pen.dev) clears it without a card. Watch out: Requires a local checkout via Lovable's GitHub sync — cannot touch the browser editor. Domain is mid-rename (pencil.dev → pen.dev), early access, no published pricing commitment.
Quick read
- Free with no card: Pencil (pen.dev).
| Field | Pencil (pen.dev)pen.dev Not yet swept | Superdesignsuperdesign.dev Not yet swept |
|---|---|---|
| What it is | A Figma-like canvas inside Cursor/VS Code/Windsurf, storing designs as JSON .pen files inside your project folder so they are git-versioned next to the code. Runs as an MCP server, so the agent reads the canvas as structured design context rather than as an image. Two-way: you can import existing components back onto the canvas. | Turns prompts into UI on an infinite canvas and writes production React + Tailwind into your repo via your coding agent. Its differentiator: it reads your existing codebase and design system first, so output matches conventions instead of generating a parallel island. |
| Category | AI design builders | AI design builders |
| Cost tier | free | mixed |
| Pricing | Free during early access | Free tier · $20/mo flat |
| Why builders pick it | Names your exact stack as a first-class target — React + Tailwind + shadcn/ui. Draw the article template, and the drawing becomes real components. Because the .pen file lives beside the code, the design and the build cannot silently drift. | The one that addresses 'my site looks like generic AI output' at the source. Because it inspects your design system, it has a real shot at emitting proper shadcn primitives rather than raw divs. Installs as a portable skill across 70+ agents. |
| Watch out for | Requires a local checkout via Lovable's GitHub sync — cannot touch the browser editor. Domain is mid-rename (pencil.dev → pen.dev), early access, no published pricing commitment. | Needs a local repo like Pencil. The original IDE extension is explicitly no longer maintained — development moved to the web app plus the skill. A 2026 review reports real instability (broken logins, canvas crashes). |
| How to wire it up | MCP server; assumes Claude Code as the agent | npx skills add superdesigndev/superdesign-skill |
| Editor's pick | Yes | Yes |
Other matchups worth running
Agent endpoint: GET /api/public/compare?slugs=pencil,superdesign