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

推荐语

AI设计工具Pencil和Claude Code的结合，正在重新定义创意工作流，设计师的未来会怎样？

核心内容：
1. Pencil产品介绍：AI设计工具与Claude Code的完美结合
2. 两种使用方式对比：官方软件vsAI IDE插件
3. 对未来设计工作流的思考与展望

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

家人们，周末好呀！

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

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

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

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

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

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

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

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

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

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

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

有两种使用方式，一种是直接使用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直接给我实现首页-发现界面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

说不定三个月之后，

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

你觉得呢？

也希望看到大家在评论区交流对这款产品的想法～

以上，