让不懂建站的用户快速建站，让会建站的提高建站效率！
谁懂啊！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 居品的发展眉目与调动效力。
一键随和 � � 点亮星标
科技前沿施展逐日见江苏配资炒股资讯平台-股票配资学习资源汇总
江苏配资炒股资讯平台-股票配资学习资源汇总提示：本文来自互联网，不代表本网站观点。
