Skip to main content

Pen 是什么？AI 设计 + Claude Code 一键转代码

· 6 min read

pen（原 Pencil）是 AI 驱动的 UI 设计画布——自然语言描述需求，AI 出多页面 UI，Claude Code 直接读懂转 React 代码，设计 + 代码从此一个工具链。

  1. 核心定位：自然语言描述需求，AI 自动产出可编辑的多页面 UI
  2. 最关键的差异：跨多页风格始终统一，Google Stitch 多页后会漂移
  3. shadcn UI 风格：实测效果最好，组件库自动扫描调用
  4. Sticky Note 微调：拖个便签写 prompt，省 token 局部改组件
  5. Claude Code 闭环：核心卖点——选 frame 直接产出 React + Tailwind，像素级复刻
  6. Figma 互通：复制粘贴单个 frame 到 pen
  7. Git 版本管理：设计稿是 JSON，跟代码一样 git diff
  8. 结论：Claude Code 工作流里，pen 是当下最闭环的选择

pen 是什么​

pen 是一款 AI 驱动的 UI 设计画布——自然语言描述需求，AI 自动产出可编辑的多页面 UI，原生集成 Claude Code，用选中的 frame 一键转 React + Tailwind 代码。

跟传统设计工具（Figma / Sketch）的本质差别：

  • AI 是一等公民：自然语言直接出 UI，不是「画完再让 AI 微调」插件
  • 不是 SaaS：macOS / Linux 桌面应用（Windows 走 MCP），不存在云端配额焦虑
  • 设计文件 = JSON：可 Git 管理，可版本回滚，可被 Claude Code 直接读懂

一句话概括：pen 把 UI 设计从「作图工具」变成「Agent 可调用的中间产物」。

跟 Google Stitch、Figma 实际差在哪​

把 pen、Stitch、Figma 三者拉直对比，覆盖三个最常用维度：

维度FigmaGoogle Stitchpen
设计主体设计师手画 + AI 辅助AI 主笔AI 主笔，设计师审核
跨页风格一致性设计师自己保证>3 页后漂移风格锁死，统一
输出物.fig 文件，AI 难读懂截图 / HTMLJSON，Claude Code 可解析
转代码第三方插件 / 手动重新描述需求选 frame 直产 React + Tailwind

最关键的是第四列：前两条路都得「设计稿 → 重新描述 → 让 AI 重生成」，设计等于被丢弃了一次。pen 是设计稿本身被 Claude Code 当作输入，生成的是同构的代码实现——这是「闭环」的真正含义。

shadcn UI 是默认最优解​

pen 内置了几套组件风格（shadcn UI / Material / 其他）。实测 shadcn UI 效果最好——shadcn 组件本就是 Radix + Tailwind 拼出来的可复制源码，pen 扫描组件树直接拼装，生成的 UI 可控性高、风格干净，几乎不用二次清理。

Claude Code 闭环：选 frame 一键转代码​

这是 pen 最大的差异化，也是写进工作流里最值的功能。

操作流程：

  1. 在 pen 里选中一个 frame
  2. 切到终端 Claude Code
  3. 输入 prompt：根据选中的 frame，用 React + Tailwind 实现
  4. Claude Code 读懂 pen 输出的 JSON（UI 结构 + 样式描述）
  5. 生成的代码「几乎像素级复刻」原 UI
为什么 "几乎" 不是 "完全"

图像素材 Claude Code 不会复制——它用 SVG 占位符或调 Unsplash 类开源图源近似。如果你对原图有要求，把图丢进 public/ 即可。

适用场景：

  • 数小时内出原型 demo——原型阶段 pen 是碾压级选择
  • 多页 + 风格一致——落地页 / 注册流 / 设置中心，这种 Stitch 容易漂的场景
  • 程序员独立交付——不需要设计师介入，省一次交付的还原度损耗

Sticky Note 微调：省 token 的局部 prompt​

一个被忽略但极其实用的功能。

设计稿改一处小东西（比如把按钮颜色改成白色），正常做法是「选中 → 在对话框写 prompt → 重发整页上下文」。Sticky Note 解决的就是这个浪费：

  1. 在右下角拖一个 Sticky Note 出来
  2. 选中要改的组件
  3. 在便签上写「把组件颜色改成白色」
  4. 选个小模型（Haiku 这种便宜的）跑

只跑局部上下文，省 80% 以上的 token，速度也快不少。一个工作日内反复迭代几十次小改，累计下来差距可观。

Figma 互通 + Git 版本管理​

Figma 互通过程：

  • pen 支持把 Figma 中选中的 frame 复制粘贴 直接导入到 pen
  • 反过来不行：pen 的 .json 是私有 schema，在 Figma 里打不开
  • 结论：从 Figma → pen 单向，从 pen → Figma 需要重新画

Git 版本管理：

设计稿存盘后就是 .json，放进项目仓库就能 git diff，每次设计变更都能看具体改了哪个组件、哪个颜色、哪个文案。比 Figma 的版本历史直观太多——Figma 的版本对比要么靠肉眼，要么靠导出对比，pen 直接是 diff 友好的文本。

选不选 pen？决策框架​

场景推荐
原型阶段（数小时出 demo）pen
多页 + 风格必须统一pen
设计师要交付最终生产稿Figma（精细调字距 / 跨组件约束这层 pen 还做不到）
已经有一整套 Figma 设计资产复制粘贴 frame 渐进迁移到 pen，再 Claude Code 转代码
需要跨团队协作评审Figma（多人实时光标 / 评论生态 pen 还没起来）

一句话：pen 不替代 Figma，是吃掉 Figma 上「原型 + 转代码」那一段——设计师终稿仍然走 Figma，但中间环节 pen 是当下最闭环的选择。

References​

  1. 🚀神器来袭！Pencil让UI设计彻底变天：AI同时生成多个专业级UI，Claude Code一键转代码，Pencil高级使用技巧保姆级教程！ —— AI超元域