Design Mode for Cursor — 嵌入 IDE 的 Agent 驱动设计画布
Pencil 是一个直接集成到开发环境（Cursor、VS Code、Claude Code）的矢量设计工具，消除传统设计-开发交接流程。设计文件（.pen）以开放格式存储在代码库中，与代码一起版本控制。
核心定位：让开发者不离开 IDE 就能完成设计和编码。
核心特性
- IDE 原生：作为 VS Code/Cursor 扩展或 macOS 桌面应用运行，设计文件存于代码库
- MCP 全写访问：不只是 MCP 读取工具，提供完整写访问权限，AI 可直接操作画布（读取、修改
.pen文件） - 无限画布（Infinite Canvas）：前端开发者在 IDE 内操作视觉元素，直接转换为生产级代码（HTML/CSS/React）
- AI 提示生成 UI：通过 AI 提示生成像素级精准的 UI 组件
- Figma 导入：支持从 Figma 导入设计稿
- 版本控制：设计文件与代码同仓库，Git 管理设计历史
- 省 Token：视觉编辑替代用 Claude Code token 描述 UI 改动，节省成本
安装与集成
# Claude Code 认证
claude # 完成认证后 Pencil MCP server 自动连接
# 验证 MCP 连接
# Settings → MCP → 确认 Pencil MCP server 已连接支持平台：
- Cursor 扩展（原生支持）
- VS Code 扩展
- Claude Code（通过 MCP）
- macOS / Linux 桌面应用
与同类工具对比
| 工具 | 定位 |
|---|---|
| Pencil.dev | IDE 内嵌设计画布，设计即代码，MCP 全写访问 |
| Figma | 独立设计工具，需手动交接给开发 |
| v0.dev | 纯 AI 生成 UI 代码，无可视化画布 |
| Gamma | 演示文稿生成，非 UI 组件设计 |
定价
目前对开发者免费提供。