代码编辑器中的 AI 设计画布。...
Pencil 是一款基于 MCP 协议的 AI 驱动设计工具，直接集成在代码编辑器中。
它采用开放的设计文件格式，设计文件可存储在代码仓库中，通过 Git 进行版本管理。
支持 Cursor、VSCode 等主流 IDE，让开发者无需切换工具即可完成设计与开发工作。
【产品功能】
内置设计画布：在 IDE 中提供无限画布，支持像素级精确设计
AI 并行生成：通过 AI 助手同时生成多个界面或完整流程
智能提示设计：可针对整个屏幕或特定部分进行 AI 提示生成
代码生成：将设计直接转换为 HTML/CSS/React 等生产就绪代码
Figma 导入：支持从 Figma 复制粘贴设计，保留矢量、文本和样式
MCP 双向集成：提供完整的读写权限，可连接数据库、API 等外部数据源
产品有严重BUG, 设计稿难道是一次性的吗? 不会自动保存? 昨晚我在claude code用的很爽, 但是我点开看了一下pencil的桌面app, 莫名奇妙的什么都没了, 按ctrl+z, 也什么都撤销不回来??? 昨晚搞到4点多, 已气晕, 今天又遇到莫名其妙的问题导致画稿消失了, 并且今天我非常明确的进行了手动保存, 顶部标题栏的edited状态保存后消失-我看的清清楚楚, 然后我关掉了app, 过段时间打开之后, 又是空白的!!!!!!!!!!!!!!!!!!这就太过分了!
页面设计算是比较好看的, 内置了挺多套模版, 见仁见智吧
pencil首页的宣传demo里, 生成速度飞快, 我实际用下来生成的有点慢...(我是claude code pro), 其次, 体验了一下vscode的pencil插件, 打开设计稿转半天圈圈
总的来说, 有可取之处, 但是产品还需要好好打磨, 主打跟claude code等cli整合, 但是我体验下来有点一言难尽
BTW: MacOS 26, MacBook Pro(M4 pro, 24G)
第一次看到的时候还是很震撼的，安装也很方便，直接就可以在画布里拖拽预览了。
有一个提示词，或者说调用它的方法，值得给大家分享一下。
使用pencil mcp
在当前活跃的画布上
然后重新设计我当前项目的所有主要界面，你需要给出移动端的界面 demo。
界面要像苹果公司的设计风格，浅色系
虽然它和我实际的前端界面效果不一样，但是我还是看到了一种可能，我可以直接预览前端界面在移动端的适配上，这一点让我觉得很棒。
如果后续有更多使用的话，我再来追评嘞。
非常好用，的确支持像素级精确设计，解决了当前难以通过大模型对话的方式生成可交付设计稿的痛点。
不过还是在原有的工作流上造轮子，期待更 native 的创意工具诞生。
真的超实用，精准实现精细化定制设计，完美解决了当下大模型对话式创作没法产出可落地设计稿的核心问题。只是依旧在原有工作流里做优化，更期待原生适配创意创作的全新工具出现
