pen.dev 介绍
设计稿改完一轮，代码却还停在上一版；开发照着截图还原，细节又在交接里走样。pen.dev把这段反复拉扯搬进IDE：在VS Code、Cursor或桌面端打开.pen文件，直接在矢量画布上搭页面、调组件，也能让AI读取当前选区，用自然语言生成或修改界面。设计完成后，可继续生成React、Next.js、Tailwind等代码；现有代码也能反向还原成可编辑设计，并同步颜色、间距与字体变量。组件、设计库和主题可统一维护，.pen文件还能进入Git分支、对比与合并。对需要同时推进设计和开发的团队来说，pen.dev省掉的是设计稿与实现之间最容易丢信息的那段路，让改稿、交付和落地留在同一套上下文里。
pen.dev 需求人群
UI设计师：直接在矢量画布上搭建界面，通过组件、变量和主题维护整套视觉规范。
前端开发者：把现有组件还原为可编辑设计，或将确认后的界面生成前端代码，减少照图还原。
独立开发者：在Cursor、VS Code或桌面端完成界面构思、修改与代码落地，少开多个工具来回切换。
设计系统维护者：统一管理颜色、间距、字体、组件和设计库，修改源组件后同步更新多个实例。
工程团队：将.pen文件与项目代码放进同一工作区，通过Git记录设计变更、分支和合并。
pen.dev 主要功能
AI生成与改稿：输入自然语言即可从零生成页面，也能选中画布元素后调整布局、字体、颜色和组件结构。
设计代码双向转换：把画布中的界面生成React、Next.js或Tailwind代码，也能读取项目里的现有组件并重新生成可编辑设计。
设计系统管理：通过变量、组件、主题和设计库统一维护颜色、间距、圆角、字体与复用模块，减少多页面样式跑偏。
Figma与素材导入：支持导入完整Figma文件、复制单个Figma图层，并添加PNG、JPEG、SVG图片和常用图标。
多格式导出：选中的界面或元素可导出为PNG、JPEG、WEBP和PDF，也能通过AI生成对应代码。
可编程画布：通过Script节点关联JavaScript文件，在画布中生成图表、网格、重复图形和参数化视觉内容。
命令行自动化：通过CLI创建、修改和批量处理.pen设计文件，可在无图形界面的流程中生成设计或导出图片。
pen.dev 产品特色
设计留在IDE：画布直接进入VS Code和Cursor，设计文件与项目代码处于同一个工作环境，减少跨工具切换。
选区就是上下文：画布中选中的元素会自动进入AI上下文，局部改稿时不必反复解释修改对象。
设计与代码双向流动：既能从设计生成代码，也能从现有代码恢复视觉界面，更适合持续迭代的真实项目。
设计文件可以进Git：.pen采用文本化文件形式，可与代码一起提交、查看差异、创建分支和合并版本。
本地MCP连接：MCP服务在本机运行，AI助手可读取和修改本地设计文件，设计操作不依赖远程画布。