Pencil
设计稿直接变代码
在IDE中画界面，AI理解设计并生成生产级代码
核心功能
IDE内嵌画布
在VSCode或Cursor里直接拖拽、画图，不用切换到Figma或PS。
AI并行画图
能同时让多个AI帮你画界面，比如一个画表格，一个调颜色，互不耽误。
Figma无缝导入
直接把Figma里的矢量图、文字、样式复制粘贴过来，细节不丢失。
Git版本管理
设计文件像代码一样入库，支持分支开发、合并修改和历史回滚。
双向MCP协议
AI既能读画布内容，也能直接帮你改画布，还能对接数据库和API。
产品特色
- 01
设计与代码同源
设计文件直接存在代码仓库里，不存在“设计稿改了，代码没跟上”的问题。
- 02
告别低效的设计交付
不用再出标注、切图、写样式说明，AI直接生成像素级还原的代码。
- 03
开放文件格式
设计文件不是黑盒，自己能读、能改、能扩展，不会被单一工具绑架。
- 04
内置多套设计组件
系统自带了一些高质量的设计元件库，也能把自己团队的组件库接进去。
- 05
支持多AI协作
不同AI可以分工处理同一张画布的不同部分，生成界面的速度很快。
应用场景
✅ 独立开发者
一个人搞定设计和前端，快速把脑子里的界面做成真实网页。
✅ 前端工程师
拿到设计想法后，在IDE里边看边生成代码，少写很多CSS和HTML。
✅ 全栈产品经理
自己画低保真原型，让AI直接生成可点击的演示链接，拿去测试。
✅ AI编程爱好者
用Cursor或Claude Code时，结合可视化画布让AI更准确理解你的布局意图。
常见问题
解答您关于"Pencil"的常见疑问，让您更好地使用这款AI工具
-
可以用内置的设计组件库，直接拖拽拼凑，减少从零画起的工作量。
-
目标是直接可用的生产级代码，不是 Demo 用的“玩具代码”，但上线前建议做一次代码审查。
-
支持VSCode、Cursor、Windsurf等主流IDE，也兼容Claude Code、OpenAI Codex。
-
可以，插入你自己团队的组件库后，生成的代码会自动遵循你们的设计系统。
-
具体定价需要去官网查看，目前展示的信息重点在产品功能上。
立即体验 Pencil
Pencil是一个嵌入在VSCode、Cursor等代码编辑器里的无限画布。它解决了设计师和开发之间“来回传图”的麻烦：你可以在写代码的地方直接画出界面，改好样式，AI能看懂设计图并生成对应的React或HTML代码。设计文件像代码一样放在Git仓库里，能分支、能合并、能回溯。