Figma 要被 Claude 干翻了？？
在前端开发的漫长历史中，一直存在着一道难以逾越的「柏林墙」：墙这边是 Figma 里的像素完美，墙那边是 VS Code 里的 div 和 span。
我们习惯了在两个窗口间反复横跳，习惯了把设计稿导出、切图、测量间距，再手动翻译成代码。但最近两天，一个叫 Pencil 的工具在开发者圈子里刷屏了。它的野心很大，大到想要推倒这堵墙。
简单来说：Pencil 就是住进你 IDE 里的「AI 版 Figma」。
它把设计、编写代码、调整 UI 这整条链路，全部塞进了 Claude Code + MCP 的体系里。作为一名长期关注 AI 编程流（Vibe Coding）的开发者，我认为这可能是今年最值得关注的范式转移之一。
01. 什么是 Pencil？
抛开官方那些 “Infinite Canvas” 的营销词，从技术视角看，Pencil 的本质非常性感：
它是一个嵌在 IDE 里的 WebGL 画布，背后接驳了一群并行工作的 AI 设计 Agent。
以往的流程是：设计师在 Figma 画图 $\rightarrow$ 扔给开发者 $\rightarrow$ 开发者看图写代码。
Pencil 的流程是：你在 IDE 里打开画布 $\rightarrow$ 告诉 AI 你要什么 $\rightarrow$ AI 帮你画出 UI $\rightarrow$ Claude Code 直接把这块 UI 变成你项目里的 React 组件。
它最核心的突破在于**「数据同源」**：
-
文件即代码：Pencil 的设计文件（
.pen）本质上是开放的 JSON 格式。 -
Git 原生：这个文件直接存在你的 Git 仓库里。这意味着，你的 UI 设计稿可以像代码一样，支持分支（Branch）、合并（Merge）和版本回滚。
02. 核心体验：当 Claude 拥有了「眼睛」
Pencil 并不是要取代专业设计师手中的 Figma，它是为全栈开发者和独立黑客准备的神器。
1. 真正的「Vibe Design」
你不需要从零开始画矩形。在画布上，你可以直接写：「帮我生成一个适合 SaaS 产品的定价页，要突出年付方案」。
后台的 AI Agents 会并行工作，一次性给你吐出 3-4 个不同风格的版本。通过 MCP 协议，这些 Agent 甚至能读取你项目里的 Tailwind 配置或现有组件库，确保生成的 UI 「像即使是你亲手写的」。
2. Figma 的完美桥梁
Pencil 很聪明，它知道 Figma 的生态壁垒太高，所以它选择「打不过就加入」。
它支持像素级复制粘贴：在 Figma 里 Cmd+C，在 Pencil 里 Cmd+V，图层和样式完美保留。这意味着你可以把 Figma 当作素材库，把 Pencil 当作「代码转化车间」。
3. 从向量直接到 React
这是最杀手级的功能。选中画布上的任意一块区域（比如一个 Hero Section），右键调用 Claude Code。
下一秒，它就变成了一段整洁的、符合你项目规范的 JSX/TSX 代码。
不是那种乱七八糟的机器生成代码，而是基于你现有代码库风格生成的代码。
03. 为什么说它是「范式转移」？
在 Reddit 和 X 上，有人惊呼「Figma 要完」，也有人冷静地指出「这只是玩具」。
在我看来，Pencil 最大的价值不在于它能不能画出多精美的图，而在于它改变了前端工程的 I/O（输入/输出）方式。
在此之前，Claude Code 只是一个在终端里跑的「无头骑士」，它很强，但它看不见 UI。
有了 Pencil，可视化画布变成了 Claude Code 的 I/O 面板。
-
输入端：你可以用自然语言、Figma 粘贴、甚至手绘草图作为输入。
-
处理端：Claude Code + MCP 负责逻辑和代码生成。
-
输出端：直接落地为 Git 仓库里的代码文件。
对于习惯了 Cursor 或 Claude Code 的开发者来说，这填补了最后一块拼图。你不再是一个人在战斗，你拥有了一个随时待命的 UI 设计团队和前端切图仔。
最后
Pencil 并不是「又一个画图工具」，它是开发环境（IDE）进化的一个缩影。
如果说过去十年，我们致力于把「设计」和「开发」分工明确化；那么 AI 时代的未来十年，趋势则是将它们重新融合。
对于会写代码的你来说，Pencil 极大地降低了「从想法到 Demo」的阻力。
「未来开发环境」的雏形，已经悄悄在你的屏幕上长出来了。
🔗 相关资源
Pencil 官网：pencil.dev
更多关于 AI 编程、Claude Code 实战与 MCP 工具链拆解，欢迎访问我的博客：cc.guapihub.net