打通设计到编程的最后一公里,有了这个插件我再也没打开过Figma!

现在的AI，UI的设计水平已经很不错了。

但真正到了产品级的设计，

让AI直接写代码设计UI还是太不可控了。

一旦修改起来就要直接修改代码，非常麻烦。

所以现在主流的开发流程依旧是先在figma中设计好，再去写代码。

但这样的话就存在几个问题。

首先，UI设计这部分依旧是纯人工设计。

在AI时代显得格格不入。

其次，AI对设计稿的理解能力也不稳定，有时候会出问题。

但有问题就会有需求，有需求就会有产品。

那么解决这个需求的产品就是今天介绍的：Pencil。

Pencil

Pencil是一款IDE插件。

它的设计理念就是，

既然设计早晚要和代码融合，

干脆一开始，就在同一环境下进行。

它提供无限画布，允许用户自由设计不用受画板限制。

此外，还兼容Figma设计稿。

并且提供MCP，能够让大模型直接调用。

这也就意味着，

原本必须纯人工的UI设计，

现在也可以用AI氛围设计了。

实测

那么，话不多说，让我们直接看看实战效果怎么样。

下载好Pencil后，它会自动配置MCP。

我们只需要让AI直接调用就好了。

这里我使用的是Codex。

Codex和VS code的集成比较成熟，使用更丝滑。

当然大家也可以选择Claude或者Gemini。

我们先新建一个画布。

然后让GPT给我们设计一个音乐客户端：

然后Codex就会自己调用Pencil MCP进行设计。

喝一杯咖啡的功夫，初稿就设计好了。

不过初稿肯定会存在一些问题。

比如排版有些错位，或者颜色不合适等等。

但Pencil的好处就是，

对于不满意的细节我们可以手动编辑。

这回再也不用担心让AI改细节把代码改乱了。

而对于一些比较概括性的东西，我们还是可以让AI直接修改。

比如现在这个配色有些寡淡，

我们让AI把颜色丰富一下。

满意之后我们就可以直接让AI根据设计稿写代码。

设计编程无缝衔接，就是这么丝滑。

安装

而Pencil的安装，同样非常简单。

由于本身只是一款插件，

因此直接在IDE里下载对应插件即可。

VS code，antigravity，cursor等都可以。

作为打通设计和编程最后一公里的高效工具，

Pencil对于开发者的意义是非常大的。

不过大家还是要注意，

AI的审美毕竟有限，

使用Pencil辅助设计，并不是为了一键成稿，

而且用AI帮助我们快速生成初稿，

免去我们前期不断搭积木的时间，

提高效率。

但最最核心的审美，

依旧需要我们人类把关。