最近几天，很多粉丝让我讲讲 Pencil 这一款 AI 驱动的 UI 设计画布。通过我这几天的深度使用，我总结了一些经验和技巧。本期视频将为大家分享我使用下来总结的经验和技巧。经过实际使用，我感觉 Pencil 比 Google Speech 还要好用，未来甚至能够超越 Figma。在 Pencil 中，AI 可以同时生成十几个解决方案。它最大的特点是我们可以直接通过自然语言描述来生成 UI，从而实现真正的可视化编辑。这解决了传统设计工作流程中最大的痛点——设计交付的问题。因为设计师完成设计后，开发者需要手动将设计转化为代码，这个过程往往会导致设计还原度下降和效率损失。

想使用 Pencil 非常简单。我们只需要在官方网站点击下载按钮。目前官方提供了 macOS 的安装版以及 Linux 的安装版。Windows 用户可以直接通过 MCP 来使用。为了方便演示，我这里就使用官方提供的 macOS 安装版进行测试。打开 Pencil 后，大家可以根据自己的习惯来设置它的主题，比如切换成暗色模式或亮色模式。这里不需要任何配置，它就能够自动连接到我们的 Cloud Code。而且只要安装之后，我们就不需要手动去配置 Pencil 的 MCP 了。无论是在 Google Ant Gravity 中，还是在 VS Code 中，它都会自动将 Pencil 的 MCP 给安装好。在左下角这个位置，我们就可以直接输入自然语言描述来描述我们需要的 UI。因为它原生支持 Cloud Code，所以这里调用的模型都是 Cloud Code 中的模型。只要我们有了 Cloud Code 的订阅，就可以直接在 Pencil 应用中使用。如果没有订阅 Cloud Code，大家也可以在 Gravity 或 VS Code，甚至 Code EX 中来使用 Pencil。

接下来，我们在 Pencil 中进行测试。先让它为我们生成一个 Apple Music 风格的音乐播放器 UI。在左上角这里我们点击这个图标，然后选择组件的风格。我选择 iOS 风格，因为经过这几天的测试，发现 iOS 风格的效果要好于其他风格。然后我们选中这个 iOS 风格，就打开了这个画布。在这个画布上，我们可以看到默认的一些 UI 组件。下面我们就可以在对话框中使用自然语言描述我们的需求：要求创建一个完整的 Apple Music 风格的音乐播放器 App。在这里是全局风格的描述，包括毛玻璃效果、圆角、深色模式、红色主调。在这里是具体的 UI 组件和页面，包括首页、播放器、播放列表、搜索框、个人库、歌单详情、艺人页、设置页，以及迷你播放条。然后我们只需要将刚才的提示完整地粘贴到对话输入框。模型这里我选择的是 Cloud Code 4.5，然后我们直接点击发送。

随后，Pencil 扫描了 SwiftUI 的组件，并开始生成具体的 UI。同样，我们也用同样的提示词发送给了 Google Stage，来对比它们的效果。可以看到，Pencil 先创建好了所需的 UI 组件和页面，然后开始实现我们要求的第一个 UI 页面的功能。它的生成速度非常快。由于我们输入的提示词是中文，所以这里生成的 UI 中的歌单、排行榜等内容也使用了中文。第一个 UI 页面基本生成完成，并且加入了配图，看起来效果好很多。接下来是底部标签页，然后开始生成第二个 UI 页面。这里立即加入了一个图像，这是播放进度的进度条，这是播放器，还加入了一些歌词，效果确实要好很多。现在开始生成第三个页面，即播放列表页面，以及搜索页面的 UI。在这里，它给出了音乐分类，然后开始生成资料库。生成的 UI 风格完全遵循了提示词中模仿 Apple Music 播放器的要求。

所有页面全部生成完成。可以看到，Pencil 生成的 UI 风格非常统一，不会像 Google Stage 那样，当页面过多时出现风格不统一的情况。下面我们对比一下 Google Stage 生成的 UI 效果。Google Stage 生成的元素看起来更丰富，但 Pencil 生成的 UI 更接近 Apple Music 播放器的风格。当生成完毕后，我们还可以进行微调。例如，在资料库这里，我们可以将歌曲的排列顺序移动到更靠前的位置。如果我们对某个 UI 页面或组件不满意，比如歌单页面中没有加载出图像或图标，我们可以直接选中这个 UI，在对话框中描述问题并发送。几秒钟内，Pencil 就为我们修复了这些问题，包括新增了一个好看的图像，以及加上了图标。

接下来，我们还可以继续测试和手动微调。比如，更改播放组件的颜色。我们只需要选中该组件，在右侧即可看到颜色选项，然后点击并微调。对于一些简单的修改，手动操作可以节省 Cloud Code 的 Token 消耗。在侧边栏，有一个 AI Note 功能。选中 AI Note 后，可以直接将其放在需要修改的 UI 旁边。例如，选中这个组件，然后直接输入提示词“将组件颜色改成白色”，并点击运行。运行后，Pencil 会扫描该组件并立即将其颜色改为白色。这样，在进行局部微调时，也可以直接拖入一个 AI Note，输入提示词，选择合适的模型，让它对组件进行微调。

我们还可以测试让 Pencil 新增页面。比如，让它新增一个个人资料页。我们可以拖入一个 AI Prompt（或称 AI Prompt Note）。然后输入提示词“新增个人资料页”。在当前 UI 中选中该组件，然后点击运行。这样 Pencil 就会知道是为这个组件新增一个进入个人资料页的页面。可以看到，它开始扫描组件，创建的风格与我们要求的 Apple Music 风格保持一致。创建完成后，我们还可以进行微调，比如将“姓名”直接改成“用户名”，这样就完成了微调。

接下来，我们还可以测试在 Cloud Code 中，让它根据 Pencil 中选中的 UI，直接用代码生成该 UI。在 Pencil 中，我们先选中一个 UI 的 Frame。然后打开终端命令行，进入 Cloud Code。我们可以输入提示词，让它根据选中的 Frame 用 React 来实现。直接运行查看效果。可以看到 Cloud Code 正在生成代码。这样，我们只需要在 Pencil 中设计好 UI，就可以在 Cloud Code 等任何 AI 编程工具中，让它为我们用前端代码实现所设计的 UI。生成完成后，我们让它运行并查看效果。运行后，可以看到它几乎完美地复刻了我们选中的 UI 页面中的所有元素，除了图像。Cloud Code 这里用 SVG 的方式生成了图像，其他内容都完全保持一致，实现了真正的像素级复刻。

此外，Pencil 还支持直接将 Figma 中的设计稿通过复制粘贴导入。比如，选中一个 Figma 设计稿的 Frame，回到 Pencil 中直接粘贴。这样，我们就可以完美地将 Figma 的设计稿通过复制粘贴的方式导入 Pencil。

Pencil 中的设计稿还可以直接保存，保存后的格式是 JSON，我们可以直接在 IDE 中打开对应的设计稿文件。比如，我们点开刚才设计的那个。这样，我们就可以查看里面的具体代码。由于它生成的文件都是 JSON 格式，所以我们可以像管理代码一样，通过 Git 进行版本管理，还可以生成变更。然后直接 Push 到我们的仓库。生成变更后，点击提交。这样，通过 Git，我们就实现了真正的版本管理，就像管理我们的代码一样。

对于不擅长 UI 设计的开发者来说，只需要用自然语言描述需要的 UI，然后在 Pencil 中就能为我们生成风格一致的 UI。

本期视频就到这里，欢迎大家点赞、关注和转发。谢谢大家观看。