Claude Code + Pencil：AI 设计革命来了，Figma 要慌了？

Pencil 是什么？

最近朋友圈被一个叫 Pencil 的 AI 工具刷屏了。有人喊「Figma 可以卸载了」，有人说「UI 设计师要团灭」。我带着三分不屑七分好奇试了三天——现在只想说：这玩意儿真的有点东西。

Pencil 是一款 AI 驱动的界面设计工具，由前 Google 设计师团队打造。 它的核心能力是：用自然语言生成专业级 UI 设计稿。

简单说，Pencil 就是「AI 版 Figma」。最颠覆的是，你不用动手拖组件，直接对着 AI「说人话」就能出设计。

比如输入：「设计一个音乐 App 首页，要苹果风浅色系，有播放列表和歌词展示」。AI 几分钟就能生成完整界面，还能根据你一句「紫色太多不好看」实时调整。

更绝的是，设计稿和代码实时同步：画布上挪个按钮，代码里的 CSS 自动更新，彻底告别「设计师和程序员互相甩锅」的日常。

为什么 Claude Code + Pencil 是绝配？

Claude Code 本身就是强大的 AI 编程助手，但它的能力不止于写代码。

当 Pencil 作为 MCP Server 接入 Claude Code 后，你获得的是：

• Claude 的自然语言理解能力：你随便说，它都能懂
• Pencil 的专业设计能力：生成的 UI 是真正能用的，不是玩具
• 完整的设计 → 代码流程：从设计稿到前端代码，一条龙

一句话总结：让不会设计的程序员，也能做出专业级 UI。

安装配置教程（10 分钟搞定）

第一步：安装并配置 Claude Code

如果你还没安装 Claude Code，先搞定这个。

详细安装教程请查看： Claude Code 使用文档

确保你的 Claude Code 能正常运行，可以在终端执行 命令启动。

第二步：下载并安装 Pencil

1. 访问 Pencil 官网：https://www.pencil.dev/
2. 下载对应系统的安装包（支持 macOS 和 Windows）
3. 安装并打开 Pencil

注意：首次打开 Pencil 时，它会自动配置 MCP Server。如果没有自动配置，可以在 Pencil 设置中手动启用「Claude Code 集成」。

第三步：重启 Claude Code

重要！ 这一步很多人会漏掉。

在电脑终端（不是 Pencil 里面的功能，就是你平时用的终端）中重启 Claude Code：

重启后，Claude Code 会自动检测到 Pencil 的 MCP Server。

第四步：开始设计！

在 Claude Code 中输入你的设计需求，比如：

然后 Claude Code 就会自动操作 Pencil 开始设计。

设计完成后：

• 在 Pencil 中可以像 Figma 一样手动调整
• 也可以继续在 Claude Code 中用对话让 AI 修改

实际体验：颠覆性的设计流程

传统流程（痛苦）

1. 程序员画草图给设计师
2. 设计师用 Figma 设计
3. 程序员看设计稿还原
4. 设计师：「这个按钮差 2 像素」
5. 程序员：「你这个字体我这没有」
6. 无限循环...

Claude Code + Pencil 流程（爽）

1. 程序员对 Claude Code 说：「做个登录页，简约风」
2. Claude Code 操作 Pencil 生成设计
3. 不满意？继续说：「按钮再大一点，颜色换成蓝色」
4. 满意后直接导出代码
5. 完事

全程不需要打开 Figma，不需要拖拽组件，不需要调参数。

更进一步：用不同模型设计 UI

说到 Claude Code + Pencil，不得不提一个关键问题：设计 UI 用什么模型最好？

不同模型在前端设计上的表现差异很大。有的擅长布局，有的擅长配色，有的擅长交互逻辑。

而 UniVibe 恰好解决了这个问题。

UniVibe：一个终端，三大模型随便切

我们花费了大量时间研发了一套兼容层，让你在 Claude Code 中除了使用 Claude 模型外，还能原生使用 Codex（GPT-5）和 Gemini 模型。

切换方式极其简单，一个命令搞定：

/model sonnet
/model gpt-5.2
/model gemini-3-pro-preview

无需安装任何额外工具，无需切换平台，无需改变使用习惯。

三大模型，各有所长

Claude Sonnet/Opus
擅长：综合能力强，Agent 规划稳健
适合：不差钱、追求最佳效果

Codex (GPT-5)
擅长：逻辑推理强，性价比高
适合：Debug、Code Review、省钱党

Gemini 3 Pro
擅长：前端设计出色，审美在线
适合：写前端、做 UI

这跟 Pencil 有什么关系？

关系大了。

你可以根据设计任务的特点，切换到最合适的模型来操作 Pencil：

• 想要审美在线的 UI？切到 Gemini：

/model gemini-3-pro-preview
请设计一个社交 App 的个人主页，ins 风格

• 想要逻辑严谨的交互设计？切到 Codex：

/model gpt-5.2
请设计一个数据分析仪表盘，要有图表筛选和时间范围选择

• 想要综合效果最好？用 Claude：

/model sonnet
请设计一个冥想 App 的完整 UI，包含首页、冥想播放页和个人中心

同一个 Claude Code 终端，同一个 Pencil 画布，不同的 AI 大脑。 这才是 UniVibe 最大的优势——让你在一个工作流里，随时调用最合适的模型。

开始使用

1. 注册 UniVibe：前往控制台
2. 安装 Claude Code：查看安装文档
3. 安装 Pencil：https://www.pencil.dev/
4. 重启 Claude Code，开始设计！

从今天起，UI 设计不再是程序员的短板。