谁懂啊！AI 圈简直每天一睁眼就有新玩意儿出现九游体育app(中国)官方网站。

今天就看到个"炸裂"的—— 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 产物的发展端倪与编削斥逐。

一键柔软 � � 点亮星标

科技前沿施展逐日见九游体育app(中国)官方网站