以前的套路大家都懂：设计师在 Figma 里画图，开发在 VS Code 里撸代码，两边完全是两个世界。设计改了？开发可能根本不知道。代码动了？设计稿还是老样子。来回扯皮全靠喊。

Pencil 有一个与众不同的思考：反正最后设计和代码要揉到一块，那干嘛要分开搞？为什么不从一开始就放在同一个地方？

有半懂不懂的自媒体博主会告诉你：使用Pencil，必须购买正版的Claude Code套餐、只能使用Claude Code。

他们的理由是，Pencil界面上默认会提示你使用Claude Code，并且只支持使用/login走官方通道，不支持使用自己的API。如下图所示。

他们放屁。活该只会当自媒体博主骗人，假装自己真会AI编程的样子。

我来教你。

1. 使用Pencil，并不需要购买官方正版Claude Code套餐。
2. 使用Pencil，并不需要强制使用Claude Code，任何一个AI编程工具都可以。无论是VS Code、Cursor、Codex、Windsurf、Cursor、Gemini Cli、Google Antigravity，全都可以。

为啥？

这是因为：Pencil的原理是MCP，然而现代的AI编程工具，全都支持MCP。

我们甚至不需要安装Pencil应用。

我们甚至不需要知道Pencil的官网地址。

官方说了：无需独立应用 - 与 Figma 不同，Pencil.dev 不需要额外的桌面客户端，它直接嵌入到 VS Code 或 Cursor 中。

好的，那我们开始。

如何正确安装Pencil

第一步：千万不要到官网下载安装Pencil应用

千万不要到Pencil官网下载安装Pencil。为了避免你安装错，我甚至都不打算告诉你官网地址是啥。

为啥不要安装？因为我们打算用IDE来使用它。

如果同时安装IDE插件和Pencil应用，偶尔会出现冲突。它们两者会同时提供MCP服务。

我不建议你使用Pencil应用的另外一个原因是，标题说了，我们的最终目的是“设计和写代码一起干”，那当然我们应该找个编程工具来用Pencil啊。

第二步：选择任何一个主流IDE，推荐VS Code

包括并不限于：VS Code、Cursor、Google Antigravity、Windsurf等等。

下面的示例，我们使用的VS Code。

第三步：到VS Code插件商店搜索Pencil，安装

安装完成后，VS Code最左侧会出现一个铅笔的图标，它就是Pencil了。请看下图。

对了，可以点击插件的设置

你可以看到：当插件打开的时候，会自动为你所有的编程工具，安装Pencil MCP。

我们上文提到了，Pencil根本就支持全部的AI编程工具，原因就在于此。

第四步：打开你喜欢的AI编程Agent。

如果是VS Code，那么你选用Claude Code IDE Extension、Codex IDE Extension都很好。

我把Claude Code和Codex放到了VS Code的右侧，这样看着比较顺眼。

对了，这里我们最好是选用Claude Code IDE Extension而不是Claude Code CLI，会更方便一些，会让你感觉到更加Vibe。

这个案例当中，我们先演示 Claude Code IDE Extension ，然后演示Codex。

注意：我这次使用的Claude Code根本不是官方正版包月套餐，而是中转API。前文也说了，使用Pencil并不需要我们购买官方正版Claude Code包月套餐。 那么，我的Claude Code是怎么来的？详见 不会封号的Claude Code使用方法！已稳定测试一个月，还能共享给团队。

有朋友会问：可以使用其他模型来驱动Claude Code吗？ 嗯，可以的，只不过，他们审美不如Claude Opus 4.5模型好，效果略微有折损。

第五步：确保你的Claude Code或者Codex已经安装了Pencil MCP

如果你不确定是否已经安装好了Pencil MCP，可以直接问AI，让AI帮你装。

下面的方法，我分别试过Claude Code、Codex，都可以。

这是Codex的

开始使用Pencil

全流程

点击左上角的New .pen file

会新建一个打开的空白画布

我有洁癖。我首先选用中间那个白色的矩形，删了它。世界清净多了。

直接开始喷

使用pencil mcp在当前活跃的画布上然后重新设计「QQ音乐」手机App的所有主要界面，界面要像苹果公司的设计风格，浅色系

静静的欣赏过程，下图已经完成了5个界面中的前3个，正在设计第4个

不一会儿就设计完成了

一个不要错过的细节： Pencil完全是Figma兼容的，界面上的每个元素，你都可以去点击、做微调修改，就和使用Figma一样

你可以随便在界面上拖来拖去

当然，我们说好了是Vibe Design，那就懒得点懒得拖了，全程用Vibe吧。

我们试试：

第三个播放器的界面，怎么没有显示歌词的地方？加上！！！而且紫色太多了，不好看！！！

完成了，可以看到，‘播放器’这一页，和之前的情况相比，多了歌词、多了周杰伦的图片。

通过不断的Vibe、不断的微调，直到达到你想要的效果。

然后，我们开始让AI写代码。

我对当前的设计非常满意。请你开始写代码

此时，如果你用的是Claude Code，它会自动调用AskUserQuestion来问你一些细节问题。

关于技术栈，这里我选择我最喜欢的Next.js，因为我喜欢做网站产品。

确认后，AI就开始写代码了。

代码写完了。它竟然要求我自己运行，我这么懒，怎么可能我自己运行？

我请它帮我运行代码。

帮我搞定，让我直接看

来了！！怎么样？美吧？

这就是刚刚我们精心打磨过的‘播放页’，看看！

用Codex也很好

等等，刚刚说，还可以用Codex？

是的，使用流程一模一样。只不过Codex的审美不如Claude Code、Gemini 3 Pro、Gemini 3 Flash好。

快速演示一下吧。

我们使用pencil mcp，在当前活跃画布，设计一个Switch游戏机，并且里面运行着超级玛丽的游戏，要非常逼真

这是Codex在Pencil设计出来的样子

然后，我们让Codex实现成代码，

代码运行起来，效果也很不错的。

Pencil的其他功能

Pencil的功能非常强大，上面只是基础入门教程，挂一漏万，有更多功能和玩法等待你探索。

如果你懒得探索，你也可以留言讲一讲还想看什么，下次我写个复杂点的。

这里我们先简单讲两个。

1. Figma的设计，可以直接导入Pencil。

1. Pencil自带了很多设计规范、示例风格，可以直接用

1. 可以整体设置设计的主题、设置变量

1. 和Figma一样：设计是分层的

1. 可以打开一个预设组件版，然后使用这些预设组件进行设计

你学会了吗？

期待你的反馈。欢迎在评论区交流。