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，而應學會駕馭這個強大的創意伙伴。