pencil是一款为开发者设计的 AI 驱动 MCP 画布工具，主打 “设计与编码无缝衔接”，可嵌入 VS Code、Cursor 等 IDE，支持通过自然语言生成设计、一键转换为生产级代码，解决传统 “设计 – 开发” 断层问题，适配独立开发者、全栈工程师、UI 设计师等人群。
Pencil是一款专为“VibeCoding”（灵感编程）时代打造的AI原生设计开发工具，它打破了传统设计与代码的边界。该工具作为一个基于MCP（模型上下文协议）的无限画布，直接嵌入到VSCode、Cursor或Windsurf等集成开发环境中，让开发者无需在设计软件与代码编辑器之间反复横跳。Pencil由TomKrcha创立于美国旧金山，旨在通过AI Agent实现从设计图到生产级代码的无缝转换，让设计文件像代码一样驻留在Git仓库中进行版本管理。
功能特点
- IDE 内设计：无需切换工具，在 IDE 中提供无限设计画布，支持像素级精确编辑；
- AI 协作：AI 可并行生成屏幕或用户流程，支持自然语言指令调整设计；
- 设计转代码：一键将设计转换为 HTML、CSS、React 等生产就绪代码，确保像素对齐；
- 开放兼容：设计文件为 .pen 格式（JSON 格式），支持 Git 版本控制，可从 Figma 导入设计；
- 设计资源支持：内置组件化设计套件，可接入团队现有设计系统，支持外部数据源（数据库、API 等）。
优点
- 无需切换工具，减少 “设计 – 开发” 协作成本；
- 零设计门槛，非设计背景开发者也能快速产出专业 UI；
- 代码与设计同步迭代，避免版本脱节；
- 无平台锁定，开放文件格式可自由扩展；
- 支持多 AI 模型集成，生成效率高。
四、使用方法
- 创建设计文件：在 IDE 中打开 Pencil，新建 .pen 文件，进入无限画布；
- AI 生成设计：在画布输入自然语言描述需求（如 “设计音乐播放器的 5 个界面”），点击生成，或从 Figma 复制粘贴现有设计；
- 微调设计：通过拖拽或补充自然语言指令（如 “修改颜色为深蓝色”）优化设计；
- 生成代码：打开 IDE 中的 AI 编程助手（如 Claude Code），确保 MCP 连接，输入指令（如 “将设计转为 React 组件”），选择技术栈（React、Vue 等），生成代码；
- 版本控制：将 .pen 文件纳入 Git 管理，与代码同步提交、分支、合并。
