pen.dev
在IDE里直接做界面设计
支持AI生成与修改、设计转代码、代码还原设计，设计文件和代码一起进Git
核心功能
AI生成与修改
选中画布元素后，用自然语言生成新界面或调整布局、颜色、字体
设计转代码
把画布上的设计生成React、Next.js、Tailwind等框架的代码
代码还原设计
把项目中已有的组件导入画布，还原成可编辑的视觉界面
设计系统管理
统一维护颜色、间距、字体等变量，以及组件和主题库
Figma与素材导入
支持导入Figma文件和图层，也支持PNG、JPEG、SVG图片
多格式导出
选中元素可导出PNG、JPEG、WEBP、PDF，也可通过AI生成代码
命令行自动化
通过CLI创建、修改和批量处理.pen文件，支持无界面场景
产品特色
- 01
设计文件直接存在代码仓库里
.pen文件是文本化格式，可以和代码一起提交、看差异、建分支、做合并
- 02
AI助手能读写本地设计文件
MCP服务在本机运行，AI助手可以直接读取和修改本地的.pen文件
- 03
设计到代码可以双向来回走
既可以从设计生成代码，也能从现有代码还原出设计，适合持续迭代的项目
- 04
Figma设计可以直接粘贴进来
从Figma复制图层，向量、文字和样式都能保留
- 05
内置设计套件也能用自己的
内置了Lunaris、Shadcn等设计套件，也可以接入团队自己的设计系统
应用场景
✅ 独立开发者
一个人兼顾设计和前端，在IDE里完成界面构思到代码落地，少开多个工具
✅ UI设计师
直接在矢量画布上搭界面，通过变量和组件维护视觉规范，还能导出代码给开发
✅ 前端开发
把现有组件还原成设计稿做调整，或把确认的设计直接生成代码，减少照着截图还原
✅ 设计系统维护
统一管理颜色、字体、间距和组件库，修改源组件后同步更新所有实例
✅ 工程团队
把.pen文件和项目代码放同一个工作区，通过Git记录设计变更，分支和合并都一起走
常见问题
解答您关于"pen.dev"的常见疑问，让您更好地使用这款AI工具
-
可以导入Figma的设计，但不是要替代Figma。它更像是把设计能力搬到IDE里，让设计和代码在同一个地方
-
支持VS Code、Cursor、Windsurf，AI方面可接入Claude Code、Codex、Gemini CLI等支持MCP的工具
-
是JSON格式的文本文件，描述了画布上的图形对象，类似HTML或SVG的结构，可以直接放进Git做版本管理
-
目前在早期体验阶段是免费的，但官方透露未来会推出付费方案
立即体验“pen.dev”
pen.dev是一个把矢量设计画布直接放进IDE的工具，支持VS Code、Cursor等。设计文件以.pen格式存在代码仓库里，可用Git做版本管理。支持AI生成和修改界面、设计转代码、代码还原为设计，还有MCP协议让AI助手读写本地设计文件。适合想减少设计到开发之间反复沟通和手工还原的团队。
