Google Stitch vs Pencil
Browser-first Google canvas vs IDE-native design surface from pencil.dev.
Last updated: April 2026
Key differences
- 1Surface — Stitch is a web app at stitch.withgoogle.com; Pencil is a VS Code / Cursor plugin.
- 2File format — Stitch produces HTML/CSS, Figma paste, and DESIGN.md; Pencil stores designs as .pen JSON files that AI agents can parse directly.
- 3Concurrency — Stitch runs a single Design Agent at a time (with Agent Manager for branches); Pencil ships Agent Swarm Mode with up to six concurrent agents.
- 4Target user — Stitch targets designers and generalists; Pencil targets engineers who want design to live next to source code.
- 5Design system — Pencil ships with Shadcn UI, Lunaris, Halo, and Nitro out of the box; Stitch leans on DESIGN.md plus prompt context.
Feature-by-feature
| Dimension | Google Stitch | Pencil |
|---|---|---|
| Release | I/O 2025 · March 2026 redesign | Launched January 2026 · 100K users within weeks |
| Runtime surface | Browser (web app) | VS Code / Cursor extension |
| Pricing | Free with a Google account | Freemium · IDE-first pricing |
| AI model | Gemini 3.0 Flash / 3.0 Pro | Bring-your-own via MCP (commonly Claude Code) |
| Primary file format | Generated HTML/CSS + DESIGN.md | .pen JSON (human- and machine-readable) |
| Concurrent agents | 1 agent + Agent Manager branches | Agent Swarm Mode — up to 6 concurrent agents |
| Design systems | DESIGN.md tokens + prompt context | Shadcn UI, Lunaris, Halo, Nitro presets |
| Code output | HTML/CSS + code via MCP handoff | React, HTML, CSS generated inside the IDE |
| Prototyping | Play button · 5-screen flows | Sticky-note prompts · generate inside named frames |
| Collaboration | Google-account-based canvas | Git-based (.pen files commit into the repo) |
Workflow & handoff
Stitch fits a design-led loop: brainstorm in the browser, branch variants, play the prototype, then export HTML/CSS or hand off to an AI IDE via MCP. Pencil fits an engineer-led loop: open a component file in VS Code, place a sticky-note prompt, run an agent swarm to fill six variants, pick one, and let Claude Code translate the .pen JSON into production React. The two workflows are complementary rather than mutually exclusive.
Pricing & quotas
Stitch is fully free: 350 Standard + 200 Experimental generations per month, no seat or credit system. Pencil uses a freemium model inside the IDE; heavy agent usage and premium design systems sit behind paid tiers. Because Pencil runs the AI through your own model connection (typically Claude Code via MCP), your effective cost also depends on your Claude subscription or API spend.
When to choose each
Choose Google Stitch when…
You want a browser-based canvas accessible to anyone on the team, you don't want your designs coupled to a specific IDE, you need voice input and infinite-canvas exploration, or your design work happens before engineers start coding.
Choose Pencil when…
You design next to the code you're about to ship, you want .pen files to live in git alongside React components, you need multiple agents exploring design directions in parallel, or your design system is already Shadcn UI / Lunaris / Halo / Nitro.
Bottom line
If your center of gravity is the browser and the designer, Stitch wins. If your center of gravity is the IDE and the engineer, Pencil wins. Teams that want both can use Stitch for early exploration and Pencil for engineer-led refinement, with Claude Code bridging the two via MCP.
Frequently asked questions
Is Pencil an open-source Figma alternative?
Pencil itself (pencil.dev) is a commercial IDE-native design tool. There is a separate open-source project — OpenPencil — that positions itself as an open alternative to Pencil with concurrent agent teams and a design-as-code philosophy.
Can Pencil use the same models Stitch uses?
Pencil is model-agnostic and communicates with agents through MCP. It is commonly paired with Claude Code, but you can connect it to any MCP-capable agent. Stitch, by contrast, is tightly coupled to Gemini 3.0 Flash and 3.0 Pro through the Google Labs backend.
What is Agent Swarm Mode and does Stitch have it?
Pencil's Agent Swarm Mode spawns up to six agents working on the same brief in parallel. Stitch offers a related capability through its Agent Manager — multiple Design Agents exploring different directions — but the tooling and concurrency model differ.
Which tool produces better production-ready code?
Pencil's IDE-native setup produces framework-specific code (React, HTML, CSS) directly in your project. Stitch exports HTML/CSS and leans on MCP handoff to an AI IDE to produce framework-specific code. For fast production-ready output, Pencil has a shorter path.
Do I need to choose just one?
No. Many 2026 teams use Stitch for upstream exploration and Pencil for downstream implementation. DESIGN.md from Stitch can also inform prompts used inside Pencil, keeping design tokens consistent across both tools.