写给产品设计师的AI工具指南

AI 不仅是产品：重塑设计方式与参与者的平台

主流 AI 原型设计工具集合图（包含 ChatGPT、Cursor、Bolt.New、Lovable、V0）

AI 原型设计实践

在 Figma 年度大会 Config 2023 上，Figma 设计副总裁 Noah Levin 提出产品设计中的「上限与门槛」概念，并预测了 AI 对设计领域的影响。Noah 对此概念的界定如下：

1. 门槛：参与设计所需的最低技能门槛，通常需要经过多年训练、实践和自我学习才能成为设计师
2. 上限：设计能力与产品影响力的上限，即使是最优秀的设计师也经常需要工程团队协助，才能将想法变为现实

产品设计上限与门槛的示意图（展示设计师、开发者和创始人基于设计能力的定位）

Noah 预言 AI 将双向改变这两个界限：降低地板（让更多人能够快速创建、原型化和发布创意作品），提升天花板（赋予设计师突破创意极限的超级能力）。截至 2025 年，这个预言已成现实——甚至比他预期更快（否则 Figma 本应已推出类似 V0、Lovable 或Framer 的产品）。

传统的双钻设计流程正在演变为「逆向双钻流程」——企业优先发布产品，随后再优化设计。Linear 公司 CEO 近期透露，其团队通过在一周内发布「草案版本」来构建功能，只有在验证可行性后才投入时间改进完善，以此避免开发冗余功能。

逆向双钻框架示意图（展示探索、交付、洞察、改进四个阶段）

Paul Graham 最近在 X 上发布推文说，已有团队用 AI 驱动工具 Replit 替代 Figma 来加速原型设计流程。这当然不意味着产品设计师角色正在消失。虽然 AI 使产品发布更快更便宜，但在可用性、交互流程和一致性等关键领域仍然缺乏人类的判断力。

正如 Figma CEO Dylan Field 所说：

「AI 将帮助人们进行视觉呈现，加速工作流程，并使任何人都能创建高品质的初稿。但将初稿转化为世界级产品仍然需要人类参与。」

接下来我将具体展示 AI 原型设计流程在产品设计中的应用。

更多AI神器：

设计师的 AI 原型设计指南

面对当前百余种开发支持工具，建议首选最符合需求的解决方案。根据 Colin Matthews 的分类，这些工具主要分为三类：

1. 对话式 AI（例如 Deepseek、Claude、ChatGPT）：能够编写和解释基础代码的 AI 助手
2. 云开发 AI（例如 Bolt、V0、Lovable）：允许在云端构建和运行应用程序的全栈平台
3. 本地开发 AI 助手（例如 Cursor、Windsurf、Cody）：在本地环境中辅助编写代码的 AI 驱动开发环境（IDE）

AI 开发工具对比图（来自 Lenny's Newsletter 的分类总结）

以下我会详细描述各类工具的使用方法和适用场景：

1. 对话式 AI（例如 DeepSeek、Claude、ChatGPT）

1. 最佳适用场景：通用型需求
2. 典型用例：优化提示词、创建 PRD（产品需求文档）与详细规格、生成图像标识、编写基础或伪代码
3. 实操案例：使用 ChatGPT 优化提示词，使 V0 和 Cursor 等工具生成更优质结果。ChatPRD 应用在此环节特别实用。

ChatPRD 输出示例

2. 云开发 AI（例如 Bolt、V0、Lovable）

1. 最佳适用场景：需要将快速原型可视化呈现的设计师
2. 典型用例：即时创意可视化、快速创建基础 Web 应用、构建项目过渡到本地开发前的初始框架生成
3. 实操案例：使用 V0 在数秒内创建 Miro 年度回顾活动（类似 Spotify Wrapped）的初始版本，用于向产品经理和开发者实时演示交互流程。

V0 构建的交互原型示例

3. 本地开发 AI 助手（例如 Cursor、Windsurf、Cody）

1. 最佳适用场景：希望构建全功能应用的设计师
2. 典型用例：开发完整体量的应用（Web 应用、移动端 APP 等）或进行 APP 维护
3. 实操案例：单独使用 Cursor 开发包含端到端用户引导、订阅系统、设置模块和后台服务的 macOS 平台的 AI 应用。

类似 Spotlight 的 AI 写作校正应用 GrammarPaw

AI 原型设计流程详解

AI 可以加速原型设计过程，但其输出质量取决于人类的引导策略。以下为最大化 AI 效能的四步法：

1. 构建完美初始提示词

初始提示词决定 AI 设定的色彩风格、品牌调性、排版方案、代码仓库结构、CSS 库等基础元素。考虑到它的重要性，我建议使用 ChatPRD 或 Prompt Engineer 等 GPT 应用来优化提示词。

示例流程：

初始提示词

「Build a web app that allows users to upload or drag and drop an image, and automatically removes the background.」

「构建允许用户上传或拖拽图片并自动去除背景的 Web 应用」

通过 ChatPRD 优化后的提示

ChatPRD 可以帮助我添加背景信息、用户故事和 ux 流程，让 AI 进一步生成对应的 UI/UX 设计。

创建一个简洁高效的 Web 应用，用户可上传或拖拽图片实现 AI 即时背景去除，支持下载透明背景 PNG 高清文件，提供多尺寸分辨率选项

用户故事：

1. 用户期望即时查看去背景的效果
2. 需要 PNG 格式高清下载
3. 可以选择不同输出尺寸

用户体验流程：

1. 落地页：简洁 UI+拖拽区域+「上传图片」CTA 按钮
2. 图像处理：AI 即时检测并去除背景+预览展示

输出效果

下面是使用 Lovable 实现出来的效果：

背景去除应用构建案例

2. 分步添加功能模块

建议开发初期聚焦核心功能实现而非 UI 细节。例如优先实现订阅系统，随后开发批量上传功能。分阶段实施有助于及时发现问题，一方面 AI 可以生成更高质量的结果，并且当 AI 遭遇困难的时候，可以轻松发现问题所在。

提示词示例

「基于当前架构，使用 Stripe 来实现订阅系统（用户上传超过三张图片时触发）」
「允许用户批量上传图片并一次性应用背景去除」

输出结果

支持多图上传的背景去除工具改进版（使用免费背景去除库）

3. 持续性代码重构与质量验证

当前 AI 工具的主要局限在于：代码库膨胀（这种情况会很快发生）后调试和持续开发难度会剧增。这个时候最好的解决方案，是建议单个文件代码量控制在 100-200 行。

为了避免陷入困境，建议在过程中不断测试和重构代码。在 QA 领域中，测试代码的方式有很多，这个时候最好使用简单的 AI 提示词，比如：

「重构代码以提升可读性、可维护性和性能，同时保持功能不变。应用最佳实践并优化效率」

展示代码重构过程的编辑器界面（聚焦性能优化）

4. 优化 UX/UI 与添加新功能

这个环节是设计师的主舞台。你可能这个时候已经实现绝大多数的功能，优秀的 UI/UX 设计可以让产品更加令人愉悦。在功能基本实现后，可通过 Figma 设计界面并指导 AI 同步更新代码。如果你的代码本身维护的很好，那么 Figma 的实现也会很方便。

在这个环节，你可以提供参考网站或者 APP 截图，来快速统一视觉风格，帮助 AI 更快帮你生成 UI。

注意事项：虽然可以早期介入设计，但建议在概念和功能可视化验证后，再深度投入 UI 设计。

让 AI 参考 Pitch.com 的设计风格来生成应用界面（紫色主色调与排版样式）

输出结果：

AI 在日常设计工作中的应用

在 Miro 公司，包括我本人在内的设计师已使用 AI 构建概念验证（POC）与工程师沟通。以下为三种实操方法：

1. 为开发者演示动效交互

Figma 在复杂动效实现方面存在局限，虽然最近的更新已经改善了这一点，但是在很多情况下，依然显得捉襟见肘。通过 Bolt.new 等工具则可快速生成可预览的代码，例如构建动态通知标识。

「保存中」动效通知标识悬停演示

2. 响应式设计测试优化

作为设计师，我们都知道响应式设计在落地的时候有多痛苦。虽然它很重要，但它通常需要多次迭代，并且与开发人员反复沟通，才能搞定。

借助 V0 和 Bolt 等工具，现在可以将 Figma 设计转换为可用的交互原型，并查看它们在不同屏幕尺寸上的响应情况。然后，开发者可以轻松获取代码，并实现类似的交互。当我在开发 Miro recap 时，我使用 V0 构建了 recap 的响应式版本并与开发人员分享了相应的数据。

响应式界面测试演示

3. 快速构建概念验证获取早期反馈

作为设计师，我们最大的优势在于集思广益，并在头脑中将想法形象化。传统上，我们依靠 Figma 等工具具象化它们，但现在我们可以使用 AI 更快地构建 POC 和 MVP 并呈现给团队其他人。

借助 AI，我们能够提供可交互且可测试的原型，从而以前所未有的速度获得团队其他人的认可并验证想法。利用 AI 在五分钟内创建可交互白板应用原型，大幅缩短从构想到验证的周期。

简易白板应用界面

结语

正如 Noah Levin 预言，AI 正在重塑产品设计的门槛和上限。它既降低了参与门槛，又扩展了创意边界。但设计工作本质未变——人类创造力、判断力与问题解决能力仍是核心。Yves Behar指出：顶尖设计师不应恐惧AI，而应学会驾驭这个强大的创意伙伴。