闻乐 发自 凹非寺

量子位 | 公众号 QbitAI

谁懂啊！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