Claude Code加 Pencil，AI又把设计师干掉了？！

家人们，周末好呀！

在看了Claude Code 能编码、写作、办公等等一系列操作后， 它终于还是把手伸到了设计领域。 

在AI出来之后，设计师和程序员第N次被杀死。。。 

以后的路数是万物皆可Vibe。

昨天我正好刷到一个产品叫Pencil， 热度非常高。

主要的点在于它把Claude Code 和画布结合起来了。

Claude Code 自然不用多说了，我现在是就算不写代码了，也要在终端里打开Claude Code 帮我做别的事儿。

画布，其实更多的是偏向设计类的一种产品形态，可以帮助你不断拓展自己的创意脑洞。

现在，这两个结合在一块儿，Vibe Design 氤氲而生。

虽然这个产品目还没有完全成熟，但是我感觉看到了更理想化的一种交互形态。 

或者说，是更未来的一种形态？？

这点我们放在最后再谈，先来带大家看看这个叫Pencil的产品究竟长什么样，以及该如何使用。

2

有两种使用方式，一种是直接使用Pencil的官方软件，还有一种是在AI IDE 里使用插件，然后Claude Code 通过调用MCP的方式来运作。

我们先说使用Pencil官方软件。

官网链接在此：

https://www.pencil.dev/

下载下来之后，如果你之前已经安装过Claude Code了，它就会自动读取配置的。

打开之后，你应该看到一个这样长得有点像figma但是跟figma又不同的样式。

中间这块就是画布，左下方就是Claude Code 的对话框。

我们可以直接在对话框里说我们的需求了。比如我让它给我设计了一个记账APP。

这是它正在工作中的样子。

其实想必你也看出来，这里设计主要靠的就是Claude 的能力。

最后整个设计完成的样子就像上面展示的这样。

它这里好的点是，对什么地方不满意的话，可以直接自己动手编辑。 所有的元素、图层都是可编辑修改的。

当然，我们既然讲了Vibe Design， 那肯定是不愿意动手改的。我们可以接着在对话框里进行修改。

比如我就对首页这个本周支出的这个板块，它用的颜色和样式很不满意，我让它给我改成Github上那种很流行的热力图样式。

直接用嘴开喷就行。

这里特别再强调一下，这些元素、图层都是可编辑修改的。

比如下面这个我想改个热力颜色。

但其实用官方的应用有一点不够好，就是当你想要开始让AI帮你写代码完成已经设计好的页面的时候，就非常不方便。

你得再切换到终端，然后再用Claude Code 执行。

来回切换就很烦。。

那有没有办法，不来回切换呢？ 让所有的创意想法，实施都在一个地方完成。

其实是有的。

简单说，就是通过MCP的方式来进行。

所以，只要是任意一个支持MCP的Coding Agent 都是可以的！

我们可以随便用一个AI IDE 下载一个叫Pencil 的插件。

我这里用的是Trae和VS Code。

同时要准备好Claude Code 插件，或者Codex 啥的也都行。

下载完成之后，在左侧你应该会看到像上面这个图中这样的列表。

然后可以试着点击看一下welcome 这个，

会看到右侧展开的画布。 等于说就是把画布内嵌到了IDE里面了。

在我们开始开动之前，先要确保Pencil Mcp 服务装好。

可以在插件里面直接输入/mcp 这个命令来查看mcp的状态。

理论上只要之前安装了Pencil 这个应用，应该是已经自动安装好了MCP的。

毕竟官方是这么说的==

剩下的操作其实跟在APP中没什么两样了。

比如我让它给我画一个QQ音乐的界面，就直接对着Claude Code 的插件说就行了。

它会自己调用Pencil MCP去完成这件事儿。

或者是让它做一个Todo APP的设计。 

唯一我觉得在IDE里操作比较方便的是，

终于不用来回切换，可以直接让Claude 对着设计好的界面写代码。

比如，我跟它说用HTML直接给我实现首页-发现界面。

它就能给我写出来一样的效果。

3

现在可以来谈谈为什么我觉得这是一种非常理想化、未来的交互形态。

Pencil 整体其实还是有不错的点的，比如我前面提到的支持图层、元素的编辑修改，还有最重要的是支持导入编辑Figma 文件 ，和Figma 兼容。 

甚至我觉得它能打通IDE 和设计稿这件事就挺酷的，

毕竟IDE伴随着AI能力的增强，已经变成了很多人的写作、代码的第二系统，现在又加上了设计，变成真正的ALL-IN-ONE。

但目前我觉得这个产品也是不成熟的。

虽然设计和代码终于可以不分家，放在一块儿了，听上去很美好，

但这个产品它目前真的纯纯依赖模型的能力。

想必大家也看得出来前面的这些个样例，看着还不错，但从设计的角度来说，肯定是不完全达标的。

这还是Claude 做的，要换成次一级的模型，可能效果还要更差点。

如果是设计师使用的话，它还要先安装Claude Code 或者 Codex 这类Coding Agent，非常不友好。

如果是写代码的工程师使用的话，既然都用了Claude Code 为啥不直接写代码开干呢。。。

所以我觉得这个产品可能只适合一类人， 叫设计工程师, design engineer。

既懂设计，又懂工程，从设计到工程可以自己一条龙搞定。

设计完了，咱直接自己就撸起袖子开干。

感觉只有这类岗位才适合用Pencil。。。

当然，本身超级个体从目前来看，已经是一个不可逆的趋势了，所以谁又说得清未来呢，

说不定三个月之后，

模型的能力真的能强到一句话就可以做出更好看的页面来了，到那时我觉得这个产品应该会更加牛批。

你觉得呢？

文章来自于微信公众号 “BubbleBrain”，作者 “BubbleBrain”