谁懂啊！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 产品的发展脉络与创新成果。
一键关注 � � 点亮星标
科技前沿进展每日见掌上世界
网络配资炒股提示：文章来自网络，不代表本站观点。
