Pencil
暂无定价打破设计与代码边界的 AI 协作画布，让 UI 设计直接在 IDE 中进化为生产级代码。
100 次使用
中文、English
关于此工具
Pencil 是一款专为“VibeCoding”时代打造的 AI 原生设计工具。它通过 MCP（模型上下文协议）将无限缩放的矢量画布直接嵌入 VSCode、Cursor 和 Windsurf 等集成开发环境中，彻底终结了设计稿交付（Handoff）的繁琐流程。开发者与设计师可以在同一个 Git 仓库内协同工作，利用 AI Agent 实时将视觉灵感转化为像素级还原的 React、HTML 和 CSS 代码。
不同于传统的设计软件，Pencil 的设计文件以开放格式存储于代码库中，支持版本管理与分支合并。它不仅是一个可视化编辑器，更是 AI 编程助手的“眼睛”和“手”，让 Claude Code 或 Cursor 能够直接理解并操作设计上下文。无论是快速构建原型还是打磨复杂的生产界面，Pencil 都能确保设计与代码始终保持同步，实现真正的“设计即代码”。
工具截图
核心功能(5)
IDE 内嵌无限画布
无需在设计软件与编辑器间反复切换，在 VSCode 或 Cursor 中即可享受类 Figma 的专业级绘图体验。
MCP 协议深度驱动
通过模型上下文协议连接 AI 助手，让 AI 具备读写画布的能力，直接根据视觉意图生成高质量代码。
设计稿 Git 版本化
设计文件不再是黑盒，而是作为代码的一部分存在，支持像管理代码一样进行分支切换、冲突合并和回溯。
AI 多人/多代理协作
支持多个 AI Agent 并行工作，在画布上同步生成组件结构、优化样式细节，极速提升 UI 构建效率。
Figma 无缝迁移
支持直接从 Figma 复制矢量图形、文本和样式并粘贴至 Pencil，保持像素级精度的同时实现自动化转换。
应用场景(3)
常见问题(6)
QPencil 到底是什么，它和 Figma 有什么区别？
Pencil 是一款内嵌在 IDE 中的 AI 原生设计工具，最大的区别在于它打破了传统设计交付（Handoff）流程。通过基于 MCP 协议的无限画布，它让设计文件直接驻留在 Git 仓库中，实现设计即代码的无缝转换。
QPencil 如何在 Cursor 或 VSCode 中使用？
Pencil 作为一个 MCP 服务器运行，你可以直接将其插件集成到 Cursor、VSCode 或 Windsurf 中。通过侧边栏或快捷键唤起可视化画布，即可在开发环境内进行 UI 设计并由 AI Agent 自动生成 React 或 CSS 代码。
Q我可以直接把 Figma 里的设计稿导入 Pencil 吗？
支持。Pencil 具备智能设计转化功能，允许你将 Figma 中的矢量图、文本和样式直接复制粘贴到画布中，并保持像素级精度的还原，方便后续通过 AI 辅助编程将其转化为生产级代码。
QPencil 支持哪些编程语言和框架？
Pencil 专注于生成可直接用于生产环境的高质量代码，目前深度支持 React、HTML 和 CSS。它非常适合前端工程师和全栈开发者在 VibeCoding 模式下快速构建 UI 界面和交互流程。
Q使用 Pencil 进行设计开发的安全性和版本管理如何？
Pencil 采用完全开放的文件格式，设计稿不再是封闭的黑盒，而是像源码一样存储在你的 Repo 中。你可以利用 Git 进行分支管理、代码合并和版本回溯，确保设计与开发流的一致性与安全性。
QPencil 的 AI 多人协作模式是什么意思？
这是一种高效的并行工作流，你可以调动多个 AI Agent 同时在画布上执行任务。例如，一个 Agent 负责构建复杂的组件结构，另一个同步优化视觉细节，大幅缩短从灵感构思到代码落地的周期。
