深度报告：Pencil - IDE 原生 AI 设计画布

背景介绍

Pencil（pencil.dev）是 High Agency, Inc. 开发的 IDE 原生设计工具，由 a16z 和 Speedrun VC 联合投资。产品于 2025 年 9-10 月间上线，核心定位是将可视化设计工作流直接嵌入代码编辑器（Cursor、VSCode、Claude Code、OpenAI Codex），通过 MCP（Model Context Protocol）双向通道与 AI 代理协作。

截至 2026 年 3 月，Pencil 月访问量达 816,010，MoM 增长 +112.76%（Toolify 2 月趋势榜），已成为 Toolify AI 工具趋势榜的头部增速产品之一。目前产品仍处于 beta 阶段，对所有用户免费开放。

---

产品拆解

核心价值主张："Dream on canvas. Land in code."——在画布上构思，直接落地代码。

核心功能：

1. IDE 内嵌画布：无需切换应用，直接在 Cursor/VSCode 侧边栏或全屏模式下打开设计画布
2. 双向 MCP 通道：AI 代理（Claude、GPT、Cursor Agent）可读取画布内容，也可将设计修改写回画布——这是与 Figma 插件的本质区别
3. 设计即代码：设计操作直接对应代码库文件变更，无需 Figma → Zeplin → 开发 的多工具转移链
4. 像素级渲染：实时预览组件，确保设计稿与最终渲染结果一致

技术推断：

• MCP Server 实现：Pencil 作为 MCP Server 暴露 design canvas 工具给 Claude/Cursor 等客户端
• 画布渲染：可能基于 Canvas API + 自定义组件渲染引擎
• IDE 集成：VSCode Extension + Cursor 插件生态
• 代码同步：解析 React/CSS/Tailwind 组件，双向映射设计属性

差异化亮点：

• 不是"Figma 的 AI 版"，而是"活在代码仓库里的设计工具"
• 设计资产版本与代码版本同步（git-native）
• AI 代理参与设计迭代，而非只是"生成初稿"

---

商业模式

当前状态：Beta 阶段完全免费，"P