Google Stitch 对比 Pencil
浏览器优先的 Google 画布 vs pencil.dev 推出的 IDE 原生设计面板。
最后更新: 2026 年 4 月
核心差异
- 1载体 — Stitch 是网页应用 stitch.withgoogle.com；Pencil 是 VS Code / Cursor 插件。
- 2文件格式 — Stitch 产物是 HTML/CSS、Figma 粘贴、DESIGN.md；Pencil 以 .pen JSON 保存，AI 代理可直接解析。
- 3并发能力 — Stitch 一次运行单个 Design Agent（Agent Manager 可做分支）；Pencil 支持 Agent Swarm 模式，最多 6 个代理并发。
- 4目标用户 — Stitch 面向设计师与通才；Pencil 面向希望设计与源码共存的工程师。
- 5设计系统 — Pencil 内置 Shadcn UI、Lunaris、Halo、Nitro；Stitch 依赖 DESIGN.md 和 prompt 上下文。
功能逐项对比
| 维度 | Google Stitch | Pencil |
|---|---|---|
| 发布 | I/O 2025 · 2026 年 3 月重设计 | 2026 年 1 月发布 · 数周内 10 万用户 |
| 运行载体 | 浏览器（网页应用） | VS Code / Cursor 扩展 |
| 价格 | Google 账号即可免费 | Freemium · IDE 内定价 |
| AI 模型 | Gemini 3.0 Flash / 3.0 Pro | Bring-your-own via MCP（常搭配 Claude Code） |
| 主文件格式 | 生成的 HTML/CSS + DESIGN.md | .pen JSON（人类与机器可读） |
| 并发代理 | 1 个代理 + Agent Manager 分支 | Agent Swarm — 最多 6 个并发代理 |
| 设计系统 | DESIGN.md token + prompt 上下文 | Shadcn UI、Lunaris、Halo、Nitro 预设 |
| 代码产出 | HTML/CSS + 通过 MCP 交付代码 | React、HTML、CSS 在 IDE 内直接生成 |
| 原型 | Play 按钮 · 5 屏流程 | Sticky-note prompt · 在命名帧内生成 |
| 协作 | 基于 Google 账号的画布 | 基于 Git（.pen 文件提交到仓库） |
工作流与交付
Stitch 贴合设计师主导的闭环：浏览器里头脑风暴、分支变体、播放原型，然后导出 HTML/CSS 或通过 MCP 交给 AI IDE。Pencil 贴合工程师主导的闭环：在 VS Code 打开组件文件、放一个便签 prompt、用 Agent Swarm 同时跑 6 个变体、挑一个、让 Claude Code 把 .pen JSON 翻成生产 React。两个闭环互补，并不互斥。
价格与额度
Stitch 完全免费：每月 350 次标准 + 200 次实验生成，没有座位或积分系统。Pencil 在 IDE 内采用 freemium 模型；重度代理使用与高级设计系统在付费层。由于 Pencil 通过你自己的模型连接跑 AI（通常是 MCP 上的 Claude Code），真实成本也取决于你的 Claude 订阅或 API 开销。
如何选择
什么时候选 Google Stitch
你想要浏览器画布，让团队任何人都能访问；不想让设计被绑在某个 IDE 上；需要语音输入和无限画布探索；或设计发生在工程师写代码之前。
什么时候选 Pencil
你在马上要发布的代码旁做设计；希望 .pen 文件和 React 组件一起进 git；需要多个代理并发探索方向；或你的设计系统已经是 Shadcn UI / Lunaris / Halo / Nitro。
最终建议
如果你的重心在浏览器和设计师那一侧，选 Stitch。如果重心在 IDE 和工程师那一侧，选 Pencil。希望两全的团队可以在 Stitch 里做早期探索，用 Pencil 做工程师主导的精修，让 Claude Code 通过 MCP 做两侧桥梁。
常见问题
Pencil 是开源 Figma 替代品吗？
Pencil 本身（pencil.dev）是商业化的 IDE 原生设计工具。另有一个独立的开源项目 OpenPencil，以 Pencil 的开源替代品自居，主打并发代理团队与 design-as-code 理念。
Pencil 能用 Stitch 所用的相同模型吗？
Pencil 与模型无关，通过 MCP 与代理通信。常见搭配是 Claude Code，但你可以接任何支持 MCP 的代理。Stitch 则通过 Google Labs 后端紧密绑定 Gemini 3.0 Flash / 3.0 Pro。
Agent Swarm 模式是什么？Stitch 有吗？
Pencil 的 Agent Swarm 模式一次对同一任务派出最多 6 个代理。Stitch 通过 Agent Manager 提供类似能力 — 多个 Design Agent 探索不同方向 — 但工具链和并发模型不同。
哪个工具产出更接近生产级代码？
Pencil 的 IDE 原生布局能直接在项目里生成框架特定代码（React、HTML、CSS）。Stitch 导出 HTML/CSS，然后依赖 MCP 交给 AI IDE 产出框架代码。要更快拿到生产级产物，Pencil 路径更短。
必须只选一个吗？
不必。2026 年许多团队在上游用 Stitch 探索，下游用 Pencil 落地。来自 Stitch 的 DESIGN.md 也可以驱动 Pencil 内的 prompt，让设计 token 在两个工具间保持一致。