pencil.dev

Pencil 是一款agent 驱动的 MCP 画布工具，核心定位为 “在编码环境中直接设计，无需设计交接”，实现 “画布中构思，代码中落地”（Dream on canvas. Land in code.），让设计与代码统一存于代码库，打破设计与开发的割裂。

核心功能亮点

1. 编码环境内嵌设计能力

多 IDE 兼容：支持 Cursor、VSCode、Claude Code、OpenAI Codex 及其他任意 IDE，无需离开编码界面即可设计。 无限设计画布：具备像素级精准设计能力，设计与代码仅一屏切换之隔，无需跳转外部工具。

2. AI 辅助设计

AI 多人协作模式（AI multiplayer）：可生成并行的设计界面或完整流程，如同 “额外帮手”，助力快速探索设计方向，提升效率。 精准快速设计：支持直接在场景中对整个界面或特定部分进行指令设计，可使用优化后的预设操作，也能自定义操作，兼顾速度与质量。

3. 设计与代码无缝衔接

像素级代码生成：生成生产级可用的应用，代码与设计高度匹配，设计和代码统一存储于代码仓库，避免偏差。 多格式代码输出：支持生成 HTML、CSS、React 等代码格式。

4. 灵活的设计资源与文件管理

设计套件支持：可使用内置的组件化精选设计套件（具备资深设计师水准），也能接入团队已有的代码库设计系统。 开放文件格式：无 “黑箱” 和锁定限制，可通过自定义工具读取、调试或扩展设计文件。 Figma 设计迁移：支持从 Figma 直接复制粘贴设计，向量、文本、样式可完整保留。 设计即代码（Design as code）：设计文件存储于代码仓库，可像开发流程一样用 Git 进行版本控制、分支管理和合并。

5. 双向 MCP 向量画布

不仅提供 MCP 读取工具，还支持完整写入权限，可接入各类 MCP 资源，集成数据库、API、图表数据、Playwright/Puppeteer 等外部数据，也能轻松接入其他 agent，用户拥有高度控制权。