谁懂啊！AI 圈真是每天一睁眼就有新玩意儿出现。

今天就看到个 " 炸裂 " 的—— Figma 设计图直接变代码。

仔细一看，是把 Figma 里的设计一键复制到一个叫 Pencil 的窗口里，这个窗口能接入 Claude Code，提示词一输入，AI 读完设计图就直接给了能在浏览器中浏览的代码……

这离谱操作谁看了不说一句 Figma 和 Claude（或 Cursor）生了个孩子？！

一个做设计，一个写代码，它俩一结合——

开发和设计终于不分家了！

而 Pencil 就是新晋爆火的 MCP 画布，在 IDE 中实现像素级精准的设计与代码实时对齐。

VS Code、Cursor、Codex、Claude ……通通适配，直接把设计和开发的工作流揉到了一块儿。

难怪网友们一水儿地直呼太疯狂，这谁看了不喊绝……

重新定义 UI 设计

Pencil 到底是个什么来头？

简单来说，它是一个基于 Agent 驱动的 MCP 画布工具。

这个画布和普通的设计工具还不同，虽然看上去是可编辑的设计页面，实际上是以一种完全开放的设计格式直接扎根在你的代码库里，没有黑盒或任何锁定情况。

就这么说吧，随意在页面上拖来拖去，设计背后的代码逻辑也跟着实时更新。

而且，由于开放格式，你完全可以用自己的工具对它生成的设计文件进行读取、调试或扩展，打破了设计与开发之间厚厚的次元壁。

主要有两种应用方式：

下载 Pencil，接入 Claude Code 进行 Vibe 设计；

直接在 IDE（如 VS Code）中下载 Pencil 插件，将 Pencil 和 Claude（或其他 AI 工具）都接入同一环境中。

也就是说，不管是客户端还是插件，只要把你的想法输入到 AI 提示词窗口中，你就能得到一个 " 临时效果图 "，在 pencil 里你能亲手调整设计图里模块的细节；

调到满意之后，再让 AI 帮你输出代码，就能直接在浏览器上预览。

这么说，VS Code 也能像 Figma 一样搞设计了（doge）。

从下面的作品集设计页面来看，Pencil 客户端的主窗口展示的是视觉设计效果，左侧的 Layers 栏对应模块。

可以清楚地看到，Pencil 能自动拆分出项目中的 Hero、按钮等模块化组件，还能一键导出代码。

来看看大家咋玩的。

有人借助 Pencil，先让 Claude 设计了一个带 shadcn/UI 的仪表盘。

通过像在 Figma 里一样手动调整细节，搭建了由左侧的参数面板和右侧预览区组成的 Dither Engine 图片编辑工具。

最后将其转换为 Framer 组件进行部署，全程只用了 10 分钟。

网页搭成后，通过 Pencil 的实时交互绑定，让滑动条、选项卡等控件与像素风格预览效果同步联动，直接生成了 PNG/JPG 格式的处理结果。

总的来说，以前的设计稿是存在云端的图片，现在有了 Pencil，设计就变成了存在 Git 里的逻辑。

有了 Pencil，你不需要再对着设计图一个像素一个像素地抠 CSS，这种基于 AI 的协作方式，重新定义了 UI 设计的玩法。

设计即代码

说到视觉设计，咱都熟悉的是 Figma 和 Framer。

但我们要搞清楚一个本质区别——

Figma 或者 Framer 做得再好，它们生成的终究是视觉文件。

当这些文件交给开发时，还需要程序员把这些视觉效果翻译成代码。

在这个过程中，难免会出现货不对板的情况。

但 Pencil 走的路子是「设计即代码」，从根上就把设计和代码绑在一起了。

它不生产视觉文件，直接操作代码库中的 UI 定义，你在画布上操作的每一步，都是直接对代码库中的 UI 描述进行修改。

比如说，当你在 Pencil 的画布上移动一个按钮的位置，或者调整一个色块的弧度时；

实际上是在实时修改代码库中的 Layout 属性和样式变量。

设计动一下，代码跟着变，像素级对齐直接拉满。

重点来了，虽然和 Figma 有本质差异，但是Pencil 和 Figma 是完全兼容的。

它支持从 Figma 直接复制粘贴设计，而且向量、文本和样式能够完整保留，随意调整。

也就是设计文件能够像开发代码一样，可以在代码库中进行版本控制、分支和合并。

另外，Pencil 不仅提供 MCP 读取工具，还具备完整写入权限及众多便捷工具，能接入各类 MCP、引入其他数据源数据，能让用户在同一环境下完全掌控设计过程。

只能说，这种神仙结合，反正我服了……

参考链接：

[ 1 ] https://x.com/tomkrcha/status/2014028990810300498

[ 2 ] https://ditheringengine.framer.ai/

[ 3 ] https://x.com/fw3d/status/2014117059005731066

一键三连「点赞」「转发」「小心心」

欢迎在评论区留下你的想法！

—  完  —

 年度「AI 100」产品榜单正式发布！

量子位智库通过三大板块——最强综合实力的「旗舰 AI 100」、最具未来潜力的「创新 AI 100」和十大热门赛道代表产品，全面梳理 2025 年度国内 C 端 AI 产品的发展脉络与创新成果。

一键关注 点亮星标

科技前沿进展每日见