---
author: AI超元域
date: '2026-01-26'
guest: ''
layout: post.njk
source: https://www.youtube.com/watch?v=-aK3UV0FcZ0
speaker: AI超元域
tags:
  - prompt-engineering
  - ui-ux-design
  - code-generation
  - developer-tools
  - ai-assisted-development
title: Pencil：AI驱动UI设计的革命性工具，实现可视化编辑与代码生成
summary: 本视频深度评测了AI驱动的UI设计画布Pencil，重点介绍了其通过自然语言生成UI、解决设计交付痛点、与Cloud Code集成、以及实现代码生成和版本管理的功能。对比了Pencil与Google Stage的效果，强调了Pencil在风格统一性和设计还原度上的优势，并演示了微调和导入Figma设计稿的技巧。
insight: ''
draft: true
series: ''
category: ai-application
area: tech-engineering
project: []
people: []
companies_orgs: []
products_models:
  - Pencil
  - Cloud Code
  - Figma
media_books: []
status: evergreen
---
最近几天，很多粉丝让我讲讲 **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。

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