设计转代码的「交接噩梦」要终结了：Pencil 把整个工作流搬进了你的 IDE
2026-02-18 11:10
42
一款名为 Pencil 的新工具正在设计师和开发者群体中迅速流传。它做了一件听起来简单、实现起来很难的事：把 Figma 里的设计稿直接变成生产可用的代码，全程在本地完成，不需要任何第三方导出流程，也不需要设计师和开发者之间反复对齐。
它解决了什么问题
任何经历过"设计-开发交接"的人都懂那种痛苦——设计师标注完稿件，开发者照着自己的理解还原，两边反复拉锯，改一个圆角都要沟通三轮。Pencil 的逻辑是从根本上绕开这个流程：它把一块像素级精准的矢量设计画布直接嵌进了开发者的 IDE（目前支持 Cursor 和 VS Code），让设计文件和代码文件住在同一个 Git 仓库里。
工作方式
Pencil 内置 AI 驱动的设计能力，可以通过对话生成界面、迭代组件，也可以直接从 Figma 复制粘贴帧、矢量图形、文字和样式——素材过来是完整的，没有 SVG 破损，没有字体丢失。设计完成后，通过内置的 MCP 接口，代码（HTML、CSS、React）可以直接导出进入开发流程，省去了中间所有的"翻译"环节。
由于设计文件本身就存在代码仓库里，版本管理也随之解决了：设计回滚 = 代码回滚，一个 commit 管两边，告别"设计稿版本和代码版本对不上"的历史顽疾。
谁在用，用来做什么
早期用户的反馈显示，Pencil 尤其适合"设计师兼开发者"这类全栈型创作者，以及希望加速原型到生产路径的小型团队。设计探索仍可在 Figma 里进行，但一旦进入执行阶段，工作流就完全在 Pencil 内闭环——不再需要在多个工具之间来回切换上下文。
现状与门槛
Pencil 目前处于早期访问阶段，本体免费，但需要配合 Claude Code 订阅使用（起步约每月 20 美元）。暂无浏览器版本，需本地安装运行。对于每天在设计稿和代码之间反复横跳的团队来说，这个门槛或许值得考虑。
0
好文章，需要你的鼓励