Pencil：设计和写代码，全部交给AI！

最近有个叫 Pencil 的工具在圈里传得挺热。我试了几天，确实有点意思——它把设计和写代码这两件事，硬是塞进了一个窗口里。

file

以前是什么样？设计师在 Figma 里调间距、改颜色，折腾半天导出一堆标注；开发者拿到后还得猜：“这个 hover 效果到底要多快？”、“这个组件能不能复用？”——两边像打哑谜。

Pencil 的做法更直接：你在界面上拖个按钮，AI 立刻给你生成对应的 React 或 Vue 代码。你说“想要苹果风的卡片”，它就出一个带圆角、阴影、毛玻璃效果的组件，连动画过渡都写好了。

而且它能装进 VS Code，也能读 Figma 文件，不用来回切窗口。

当然，生成的代码还得人来审——变量命名有点随意，逻辑也未必最优。但它省掉的是最烦人的那部分：把视觉稿“翻译”成结构化代码。这活儿本来就不该由人干。

装完第一次启动时，它会自动装一个叫 MCP 的后台服务——别慌，这是它用来跑 AI 和同步数据的，安静待着就行。

点 VS Code 侧边栏的 Pencil 图标，选 “New .pen File”，会打开一个无限画布。
工具不多：矩形、文本、图片、容器……但够做线框图或简单高保真原型。

关键功能是 AI 辅助：
比如你打字：“一个深色主题的登录框，带邮箱和密码输入，下面有个‘忘记密码’链接”，它几秒就给你画出来。
还能说：“把按钮改成苹果风格”，它就加圆角、阴影、微妙的渐变。

⚠️ 注意：AI 理解力有限。说“现代感”它可能给你一堆玻璃拟态；说“简洁”它又可能太素。最好描述具体元素。

画完后，右键 → “Generate Code”，选 React / HTML / Vue。
它会直接在当前项目里新建一个组件文件，连状态管理（比如表单控制）都给你搭好骨架。

我试了 React 输出，代码虽然不算完美（变量名有点随意，没用 TypeScript），但结构清晰，能直接跑。
改样式？要么回画布调，要么直接改 CSS——两边是双向同步的。

<code>.pen</code> 文件本质是 JSON + 资源引用，可以正常提交 Git。
我和同事协作时，直接 PR 里 review 设计变更，就像看代码 diff 一样——谁改了颜色、谁加了按钮，一目了然。

但它不适合复杂交互动效（比如 Lottie 动画、自定义手势），也不替代 Figma 做设计系统管理。
把它当成“从草图到可跑代码”的加速器，而不是全能设计工具，体验会好很多。

Pencil 不会取代设计师，也不会让程序员失业。
但它确实把“把想法变成可运行的东西”这件事，变得简单了一点——而这，往往是创业或迭代中最卡人的一步。