谁懂啊！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 组件进行部署，隔热条PA66生产设备全程只用了 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 家具的发展端倪与立异恶果。

键温存 � � 点亮星标

科技前沿明白逐日见南昌塑料管材生产线价格