作者用 6 小時用 Stitch 生成 100+ 頁面，發現 AI 設計工具速度驚人但無法取代 UI 設計師，關鍵在於人類對需求洞察與整體把控。
呢篇文章係由「設計大偵探 」嘅創辦人廖爾摩斯寫嘅，佢想透過實際體驗 Google 旗下嘅 AI 設計工具 Stitch ，試嚇用佢嚟設計一個英語學習平台 MVP ，從而探討呢類工具嘅能力同限制。
作者用咗 6 個小時，生成咗超過 100 個頁面，最終有 30 個達到可定稿標準。佢嘅結論係：Stitch 生成速度極快，覆蓋場景多，而且輸出自動佈局嘅 Figma 文件好規整，令二次加工成本大減。但佢同時指出，Stitch 目前嘅設計品質未夠好，尤其係細節同一致性方面，而且好難精準實現設計師心目中嘅效果。
作者認為，Stitch 呢類工具會逐步取代大量重複、規範化嘅原型繪製工作，但真正嘅設計價值仍然在於需求洞察、業務流程設計同整體交互體驗嘅把控。佢鼓勵設計師擁抱 AI，但唔好俾工具嘅高效麻痺咗自己嘅思考。
Stitch 可以用自然語言、手繪線框或截圖快速生成 UI，20 秒內完成以往 1-2 小時嘅界面設計，效率驚人。
作者實際用 6 小時生成 100+ 頁面，最終 30 頁達定稿標準，但需要多次迭代同細緻指示先至達到要求。
Stitch 嘅「變體 」功能可以快速提供多種排版參考，但無法完全取代設計師嘅審美判斷同細節打磨。
使用 Stitch 時必須自己梳理好信息結構同狀態，唔好依賴 AI 做呢步，否則一致性會好差。
Stitch 會取代交互設計師 90% 嘅原型繪製工作，但 UI 設計師仍然不可替代，因為真正嘅品質來自人對需求同體驗嘅把控。
Google Stitch 係 Google Labs 推出嘅原生 AI 設計工具，可以將自然語言提示、手繪線框或界面截圖自動轉化成可編輯 UI 同生產級前端代碼，打通設計同開發之間嘅斷層。作者用佢為一間叫「遠橋人力 」嘅勞務公司設計英語學習平台嘅核心流程——課程學習，目標係完全唔用 Figma ，令開發可以跟住 MVP 方案開發。
用語言生成界面
作者一開始藉助 ChatGPT 學提示詞寫法，但好快發現越直接越能檢驗 Stitch 係咪真係「明你 」。佢畀嘅第一條提示詞係要求設計用戶登錄驗證流程，支援賬號密碼同手機號驗證，而且強調係 B 端場景，唔需要第三方登錄。結果 Stitch 20 秒就生成咗，但犯咗幾個錯誤：加咗谷歌登錄、輸出英文界面。
登入頁 ：第二輪調整要求全局用簡體中文、刪除唔需要嘅模塊，並用截圖做上下文，最後基本達標。作者用「變體 」功能探索唔同視覺方案，但最終揀咗保守排版，因為 Stitch 難以實現佢真正想要嘅效果。
課程學習首頁 ：作者加入思維導圖，將頁面信息結構從上到下梳理，並講明列表多個狀態。Stitch 理解能力唔錯，輸出基本跟結構執行。佢再次強調「變體 」嘅價值——提供多種排版參考，幫手突破靈感瓶頸。
課程詳情頁 ：呢頁聚合視頻、直播、練習同測驗，信息結構同狀態梳理係必做功課。作者提醒唔好一次過生成多個頁面，否則一致性難保證。佢仲分享一個技巧：生成新 Tab 頁面時要先截圖，明確話「保持頭部同 Tab 樣式唔變 」，否則 Stitch 會另起爐灶。
練習題係最複雜嘅功能模塊，包括聽力題、口語題等。作者先讓 Stitch 自由發揮，再根據每個題型嘅交互狀態同細節優化。口語題需要細緻嘅微交互，例如點擊錄音後按鈕同文字變化、提交音頻後系統評分同 Toast 彈窗提示。
保持頭部同底部樣式不變
作者用提示詞要求保持頁面整體樣式不變，只輸出微交互部分，Stitch 完美理解且保持一致性。對於單元測驗，佢同樣需要設計多流程微交互，而且要確保測驗同練習題樣式一致。佢發現同 Stitch 交互好似寫產品設計開發文檔，需要將每個細節考慮清楚。
保持頁面樣式整體不變，輸出用戶點擊錄音後的微交互，注意，這裏主要是按鈕和文字的變化。
保持頁面樣式整體不變，輸出用戶提交音頻後的頁面樣式。這裏的技術邏輯是系統會上傳用戶的錄製音頻，然後雲端會進行評分，超過 60 分出現 Toast 彈窗：你真棒；低於 60 分則提示用戶可以再來一次。
1
驚喜 ：生成速度快、覆蓋場景多（可接入設計系統、抓網址風格、參考截圖、不限量變體），而且輸出 Figma 自動佈局文件，二次加工成本大減。
2
焦慮 ：產量呢個核心標準喺 AI 面前完全唔夠睇；Stitch 不斷迭代，將來品質可能令設計師難以企及。
3
思考 ：Stitch 會取代交互設計師 90% 嘅原型繪製工作，但 UI 設計師仍然不可替代；真正嘅價值在於需求洞察、業務流程設計同整體體驗把控。設計師應該擁抱 AI，但唔好被高效麻痺思考。
作者最後總結 ：20 年前用 Photoshop ，15 年前用 Sketch ，10 年前用 Figma ，而家可能進入 AI 設計工具嘅新階段，但亙古不變嘅始終係客戶嘅需求同目標。佢提醒我哋要好似 AI 咁學習，不斷進步。
哈囉，大家好，我係廖爾摩斯，歡迎嚟到設計大偵探——一個以分享深度產品體驗為主嘅設計媒體，目標係拆解全球 1000 個優秀嘅產品！ 今日同大家分享嘅係我最近深度使用緊嘅產品——Google 旗下嘅 Stitch。希望你從呢篇產品體驗分析入面有啲收穫。如果你覺得呢篇文章有價值，歡迎分享俾你嘅朋友！ 概述 Stitch 產品簡介 Google Stitch 係由 Google Labs 推出嘅一款原生 AI 設計工具。佢透過將自然語言提示、手繪線框圖或者界面截圖，自動轉化為可編輯嘅用戶界面，並生成可用於生產環境嘅前端代碼，從而打通設計同開發之間嘅流程斷層。
同傳統設計工具唔同，你只需要用自然語言描述產品目標、使用場景或者視覺風格，佢就可以喺幾秒內生成多套界面方案，仲支持透過對話持續迭代優化。Stitch 唔單止提升效率，更加試圖改變設計嘅起點：從「手動繪製界面」，轉向「用語言生成界面」。佢好似一個唔會疲倦嘅設計拍檔，幫你快速完成從 0 到 1 嘅探索階段。 我規劃咗一次點樣嘅產品體驗？ 為咗深度體驗 Stitch，我計劃透過一個完整嘅業務流程，驗證呢款由 AI 主導生成 UI 嘅工具具備咩能力，並判斷佢能否滿足我嘅基礎需求。 業務場景 遠橋人力係一間出國勞務人力資源公司。由於勞務人員出國後英文溝通困難，佢哋需要一套英文學習培訓平台。今次任務係為遠橋人力設計面向出國勞務人員嘅英文學習平台，而我需要藉助 Stitch 完成嘅係當中嘅核心流程：課程學習。 設計目標 忘記 Figma，用 Stitch 完成遠橋人力英文學習培訓平台嘅核心流程，並讓開發工程師能夠根據 MVP 設計方案進行開發。 設計流程 一切準備就緒，等我哋開始用 Stitch 嚟設計呢個產品嘅 MVP 版本啦！ 用戶登錄驗證 作為 Stitch 新手，我最關心嘅係：到底應該點樣同佢交互？起初我藉助 ChatGPT 學習提示詞寫法，但好快發現，越直接越能夠檢驗佢係咪真係「明你」。 幫我設計一個用戶登錄驗證流程，需要支持賬號密碼同手機號驗證登錄兩種方式。但請注意，呢個係 B 端業務場景，唔需要任何第三方登錄方式，頁面必須簡潔、乾淨。
坦白講好驚豔：唔單止速度快，結果都好貼合需求。但係佢仍然犯咗幾個關鍵錯誤，例如加咗 Google 等第三方登錄，同埋預設輸出英文界面。 跟住我進行第二輪調整：要求全局使用簡體中文，明確刪除唔需要嘅模塊，仲補充截圖做上下文，等 Stitch 更精準理解。 呢一輪之後，登錄頁基本達標，但視覺張力仍然偏弱。於是我嘗試咗 Stitch 嘅「變體」功能：揀選畫板之後撳變體，就可以從佈局、配色、圖像、字體同文案等多個維度生成唔同方案。 提示詞：我想要視覺表現力更加強嘅界面。
變體帶嚟咗唔少驚喜：當某個方案唔滿意時，佢可以快速提供多種探索方向。 不過迭代咗幾輪之後，我最終都係返咗去更保守嘅排版。原因好直接：Stitch 仍然難以實現我真正想要嘅效果。另外我嘗試咗上傳平台嘅 logo，希望佢可以自動植入頁面，但 Stitch 暫時仲未做到。 最終定稿 課程學習首頁 呢個頁面嘅內容相對複雜，如果只靠文字輸入，AI 理解起嚟會比較吃力。所以喺呢個步驟入面，我加入咗思維導圖。 我首先將頁面嘅信息結構從上到下完整梳理一次，並將課程列表嘅幾種狀態清楚話俾 Stitch 知，確保佢輸出嘅內容更準確。 之所以會形成呢種思路，都係因為我每日同 ChatGPT 對話，逐步培養咗同 AI 工具交互嘅心智習慣。 提示詞：請嚴格按照我嘅信息結構嚟設計呢個頁面，另外，一定要注意列表有多個狀態。
從結果睇，Stitch 嘅理解能力都唔錯，輸出基本按照我嘅結構執行，頁面效果都算理想。呢度我想再強調「變體」嘅價值：佢最大嘅優勢在於可以提供多種排版參考。當你喺既定頁面框架入面缺乏靈感時，變體確實可以俾你唔同方向嘅設計啟發，例如更時尚、更簡潔、更豐富等。 我對課程學習首頁整體都算滿意，但都經歷咗多次調整。呢個過程我發現唔需要咩技巧，只要持續同 Stitch 對話溝通就得，好似甲方指導我哋改稿：字體大啲、圖片大啲，或者換個顏色、調整排版，逐步修改到滿意為止。 不過都要講明，Stitch 嘅產品定位本身就係快速幫你將想法變成界面，唔好指望佢一次就做到完美，所以唔好喺單個頁面上耗費太多時間。 最終定稿 課程詳情頁 課程詳情頁係一個集合多種功能嘅頁面。用戶入咗嚟之後，會喺同一個空間入面見到視頻、直播、練習同測驗。 正如上面所講，用 Stitch 設計詳情頁時，用思維導圖將頁面嘅信息結構同各類狀態先梳理清楚，幾乎係必做功課。呢度有個關鍵提醒：唔好一次過等佢生成多個頁面，否則一致性好難保證。尤其係涉及 Tab 呢類組件時，Stitch 好容易將每個頁面都當成獨立頁面嚟「重新設計」，最後樣式五花八門。 更重要嘅係，信息結構同多狀態梳理呢件事一定要由我哋自己完成。Stitch 嘅發散性好強，唔好嘗試將呢項最重要嘅工作交俾 AI——呢個都係我今次深度體驗最大嘅感受之一。你只需要一個思維導圖工具，將每個頁面嘅信息結構拆清楚、狀態講明白，佢就可以幫你更高精度咁還原。 再分享一個小技巧：因為涉及 Tab 切換，頭部同 Tab 嘅樣式需要始終保持統一。所以喺生成新嘅 Tab 頁面時，一定要先截圖，並明確話俾 Stitch 知「保持頭部同 Tab 樣式不變再生成」。否則佢好可能會另起爐灶，幫你生成一套全新嘅樣式。 練習題 將課程詳情頁初步定稿之後，我開始設計呢個學習系統最複雜嘅功能模塊：練習題。 首先係聽力題。我先讓 Stitch 自由發揮，輸出樣式俾我參考。練習題呢種場景喺外國產品入面好常見，例如多鄰國、博樹等，都有大量豐富嘅題型。呢啲產品我都做過拆解分析，如果你有興趣，可以睇返之前嘅內容。 效果唔錯。Stitch 最擅長嘅仍然係偏外國設計風格嘅方案，接下來要做嘅就係根據每個題型嘅交互狀態同細節繼續優化。另外，仲需要保持成個練習題嘅頭部、底部一致。 我想單獨講下口語題嘅設計細節。呢度嘅交互比較細緻，如果你冇做過類似流程，可能好難理解入麪包含嘅各種微交互細節。 提示詞：保持頭部同底部嘅樣式不變，幫我輸出新嘅題型——口語題。
喺 Stitch 輸初版並調整之後，我又輸入咗新嘅微交互提示詞。 提示詞：保持頁面樣式整體不變，輸出用戶撳錄音之後嘅微交互，注意，呢度主要係按鈕同文字嘅變化。
提示詞：保持頁面樣式整體不變，輸出用戶提交音頻之後嘅頁面樣式。呢度嘅技術邏輯係系統會上傳用戶嘅錄製音頻，然後雲端會進行評分，超過 60 分出現 Toast 彈窗：你真係叻；低過 60 分就提示用戶可以再嚟一次。
效果唔錯。對於同一個流程嘅微交互設計，我覺得 Stitch 生成嘅效果比較符合我嘅期望，至少可以保持一致性。 最終定稿 單元測驗 單元測驗同練習題一樣複雜，都需要設計多個流程嘅微交互。兩個場景雖然相似，但細節差異好大。 呢個模塊從列表頁開始就有多個狀態，所以信息結構一定要清晰，Stitch 先可以更準確咁理解。寫到呢度，我越來越覺得同 Stitch 嘅交互好似喺寫一份產品設計開發文檔：你需要將每個細節都考慮清楚，等設計同開發都明。 另外，測驗同練習題嘅樣式需要保持一致，呢個都係對 Stitch 輸出一致性嘅一次考驗。例如我想喺保持頭部樣式不變嘅前提下加入答題卡，調試咗幾次先最終實現。咁樣既可以保持產品演示嘅一致性，亦唔使額外加備註提醒其他人。 最後再分享一個考試提交流程。用戶考過或者失敗，系統都需要即時提示。進入考試結果頁之後，仲需要更細緻嘅數據統計同考試表現統計。Stitch 一開始表現唔好，冇辦法理解點樣設計考試表現統計圖。於是補充咗更具體嘅描述：X 軸單位係考試時長，Y 軸單位係答對題目數量，並需要同其他學員進行綜合比較。 最終 Stitch 生成嘅頁面效果雖然唔完美，但都更接近我理想嘅效果。 最終定稿 思考與總結 我就係咁一步一步將呢個學習流程設計完成。用咗大概 6 個鐘頭嘅時間，生成 100+ 頁面，最終有 30 個頁面達到可定稿標準。接下嚟我想講下呢次產品體驗帶嚟嘅驚喜、焦慮同思考。 我嘅驚喜 第一，Stitch 生成速度實在太快喇。 好難想像 Stitch 可以喺 20 秒內完成過去我哋可能需要花 1–2 個鐘頭先做到嘅界面設計，我啱開始體驗時甚至覺得不可思議。關鍵係，佢嘅生成質量唔差，甚至好過一啲初中級設計師。對齊、規整、一致等方面，甚至比好多設計師都強。 第二，Stitch 覆蓋嘅場景都令人驚嘆。 以我今次體驗嘅結果嚟睇，Stitch 已經可以接入設計系統，抓取網址風格，根據截圖參考風格，而且唔限量生成變體，就好似一部唔會疲倦嘅機器，可以持續為你工作。 第三，當我將 Stitch 生成嘅檔案複製到 Figma 時，佢嘅自動佈局同設計規範俾咗我真真正正嘅驚喜。 因為冇呢一步，Stitch 生成嘅界面對我嚟講意義只係做原型參考。但見到佢咁規整嘅 Figma 佈局，二次加工成本被大幅降低（我已經接受唔到嗰啲非自動佈局嘅設計稿）。 我嘅焦慮 深度體驗完 Stitch，我嘅焦慮感一陣陣湧上心頭。諗嚇，過去評估設計工作效率時，產量一直係核心標準。我都一直將自己嘅高產當作重要賣點，但同淨係一句話就可以生成多個頁面嘅 Stitch 相比，邊個設計師仲敢同佢比效率？如果講效率，根本唔同一個維度。 再講設計品質。Stitch 而家嘅生成效果確係唔夠優秀，各方面細節都仲未達到較高水準。但最恐怖嘅係，呢啲工具仲喺不斷迭代升級。佢唔知疲倦咁進化，冇人知道再過半年或者一年，佢最終輸出嘅作品會唔會令設計師難以企及。諗到呢度，恐慌感又一陣陣湧上心頭。AI，真係太恐怖啦！ 我嘅思考 講真，一邊感受到 Stitch 帶嚟嘅生產力突飛猛進，我一邊都喺度諗：呢類工具會點樣重構產品設計流程，又會為我哋帶嚟咩變化同啟發。 第一，Stitch 可能會覆蓋交互設計師 90% 嘅原型繪製工作。 如果你仲用緊 Axure 畫原型，可能真係要重新認識 Stitch。傳統交互原型喺 AI 生成效率面前，幾乎係兩個時代嘅生產力工具。我判斷，原型繪製入面大量重複、規範化嘅工作，會逐步被 Stitch 呢類工具取代。未來我哋只要將業務需求同場景描述清楚，需求就可以更快被「可視化」。 第二，Stitch 生成嘅設計稿能否取代 UI 設計師？ 我嘅答案係：唔得。表面睇，Stitch 出圖又快又「似模似樣」。但我將佢嘅檔案導入 Figma 之後發現，雖然佢支持自動佈局，都夠規整，但距離可以直接投入生產仲有差距。更重要嘅係，真正嘅設計品質來自審美判斷、細節打磨同整體一致性。如果對品質冇更高追求，Stitch 或者可以覆蓋一部分 UI 工作。但要做出優秀嘅產品，UI 設計師依然無可替代。 第三，我哋應該點樣看待 Stitch 呢類 AI 工具？ 正如 Stitch 嘅定位一樣，佢嘗試用語言提示、手繪線框圖同界面截圖，快速生成可編輯 UI，並打通設計同開發之間嘅斷層。對產品設計師嚟講，Stitch 唔係敵人。佢確係降低咗界面設計門檻，但一個成功嘅產品從來唔係「砌界面」砌出嚟嘅。真正嘅價值仍然在於需求洞察、業務流程設計，同最終交互體驗嘅整體把控。 所以我一直都保持同一個觀點： 無論係 Figma 定 Stitch，佢哋都只係實現設計目標嘅工具。 20 年前我哋用 Adobe Photoshop，15 年前用 Sketch，10 年前用 Figma。今日可能正進入一個新階段，但永不改變嘅，永遠係客戶嘅需求同目標。 好似 AI 咁學習，唔好俾工具帶嚟嘅高效麻痺思考。擁抱 Stitch，擁抱 AI，擁抱呢場正在重塑生產力嘅變化！ 從 2022 年創辦到而家，設計大偵探已經拆解咗以下產品：
醫療 Medical
【2022原創醫療產品設計分析】之丁香醫生APP圖文版
螞蟻阿福APP拆解丨對話式交互如何重構就醫全流程？
1.2萬字拆解京東健康丨市值1776億嘅醫療產品點樣設計？
醫療大偵探丨8500字產品拆解醫鹿（一）
互聯網醫院產品大偵探（1）丨7000字拆解北京協和醫院APP
在線教育 Online Education
產品拆解丨月營收3個億嘅斑馬APP原來係咁設計
偵探日記Vol.01丨5000字拆解小猿AI嘅12種練習題設計
多鄰國丨人人皆可使用嘅全球最受歡迎語言學習工具
Babbel丨專注成人實用會話嘅語言學習平台
Busuu博樹丨讓1.2億學習者大膽開口學英文嘅全球最大語言學習社區
HelloTalk丨好似微信聊天咁學習一門語言
Vocabulary產品拆解丨好似刷短視頻咁學好型嘅英文單詞
萬字拆解Class 官網體驗旅程丨 如何用講故事嘅方式介紹自己嘅產品
知識付費
向閲讀致敬！微信讀書產品設計策略推導——你想要一架跑得更快嘅馬車，但佢俾咗你一架法拉利！
1.1萬字深度拆解丨樊登讀書如何找到書中嘅黃金屋？
ClassIn官網拆解丨一款世界級嘅知識付費產品
社交媒體
8384字深度拆解站酷丨7年之癢，係固步自封定放手一搏？
1.3萬字丨Notion AI 同我一齊拆解咗小紅書
1.4萬字拆解丨3.15億Z時代用戶為何熱愛嗶哩嗶哩
SaaS
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（一）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（二）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（三）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（完）
萬字拆解釘釘AI助理（釘釘AI助理眾測大賽一等獎作品）
SAAS產品體驗日記（一）丨8000字深度拆解微盟店鋪裝修功能設計
音樂
QQ音樂產品設計拆解丨睇最靚嘅音樂，聽最偉大嘅作品
物流
順豐速運產品拆解丨14500字，76個核心功能為你揭秘順豐嘅快遞世界
招聘
智聯招聘產品拆解丨呢款28年嘅新能源老爺車，開啓咗直播招聘新時代
脈脈產品拆解丨1.1億職場人士點解要用脈脈？
體育
世界盃專題丨8500字拆解懂球帝
6000字拆解丨花費10個億，抖音如何設計世界盃專題？
工具
3600字拆解微信鍵盤丨地主家嘅細仔真係又靚仔又有才華
出行
萬字拆解鐵路12306丨最勁同最垃圾，你揀邊個？
愛彼迎 Airbnb 產品拆解丨一款累計超過 20 億人次入住嘅 APP 有咩設計亮點？
金融
產品體驗日記①丨中歐財富APP開户設計拆解
金融產品體驗日記（二）丨中歐財富APP首頁設計拆解
金融產品體驗日記（三）丨中歐財富基金詳情頁設計拆解
房產
房源詳情頁嘅設計可以幾有型，睇完鏈家APP你就明！
哈囉，大家好，我是廖爾摩斯，歡迎來到設計大偵探——一個以分享深度的產品體驗為主的設計媒體，目標是拆解全球 1000 個優秀的產品！ 今天和大家分享的是我最近正在深度使用的產品——Google 旗下的 Stitch。希望你能從這篇產品體驗分析中有所收穫。如果你覺得這篇文章有價值，歡迎分享給你的朋友！ 概述 Stitch 產品簡介 Google Stitch 是由 Google Labs 推出的一款原生 AI 設計工具。它通過將自然語言提示、手繪線框圖或界面截圖，自動轉化為可編輯的用戶界面，並生成可用於生產環境的前端代碼，從而打通設計與開發之間的流程斷層。
與傳統設計工具不同，你只需要用自然語言描述產品目標、使用場景或視覺風格，它就能在幾秒內生成多套界面方案，並支持通過對話持續迭代優化。Stitch 不只是提升效率，更試圖改變設計的起點：從「手動繪製界面」，轉向「用語言生成界面」。它像一個不會疲憊的設計搭檔，幫助你快速完成從 0 到 1 的探索階段。 我規劃了一次怎樣的產品體驗？ 為了深度體驗 Stitch，我計劃通過一個完整的業務流程，驗證這款由 AI 主導生成 UI 的工具具備哪些能力，並判斷它是否能滿足我的基礎需求。 業務場景 遠橋人力是一家出國勞務人力資源公司。由於勞務人員出國後英語溝通困難，他們需要一套英語學習培訓平台。本次任務是為遠橋人力設計面向出國勞務人員的英文學習平台，而我需要藉助 Stitch 完成的是其中的核心流程：課程學習。 設計目標 忘掉 Figma，用 Stitch 完成遠橋人力英語學習培訓平台的核心流程，並讓開發工程師能夠依據 MVP 設計方案進行開發。 設計流程 一切準備就緒，讓我們開始使用 Stitch 來設計這個產品的 MVP 版本吧！ 用戶登錄驗證 作為 Stitch 新手，我最關心的是：到底該怎麼和它交互？起初我藉助 ChatGPT 學習提示詞寫法，但很快發現，越直接越能檢驗它是否真的“懂你”。 為我設計一個用戶登錄驗證流程，需要支持賬號密碼和手機號驗證登錄兩種方式。但請注意，這是一個 B 端業務場景，不需要任何第三方登錄方式，頁面必須簡潔、乾淨。
坦白說很驚豔：不僅速度快，結果也高度貼合需求。但它仍犯了幾個關鍵錯誤，比如添加了谷歌等第三方登錄，並且默認輸出英文界面。 接着我進行第二輪調整：要求全局使用簡體中文，明確刪除不需要的模塊，並補充截圖作為上下文，讓 Stitch 更精準理解。 這一輪後，登錄頁基本達標，但視覺張力仍偏弱。於是我嘗試了 Stitch 的「變體」功能：選中畫板後點擊變體，即可從佈局、配色、圖像、字體與文案等多個維度生成不同方案。 提示詞：我想要視覺表現力更強的界面。
變體帶來了不少驚喜：當某個方案不滿意時，它能快速提供多種探索方向。 不過迭代幾輪後，我最終還是回到了更保守的排版。原因很直接：Stitch 仍難以實現我真正想要的效果。另外我嘗試了上傳平台的 logo，希望它能自動植入頁面時，但 stitch 還暫時無法完成。 最終定稿 課程學習首頁 這個頁面的內容相對複雜，如果只靠文字輸入，AI 理解起來會比較吃力。所以在這個步驟裏，我加入了思維導圖。 我先把頁面的信息結構從上到下完整梳理一遍，並把課程列表的幾種狀態清楚地告訴 Stitch，確保它輸出的內容更準確。 之所以會形成這種思路，也得益於我每天和 ChatGPT 的對話，逐漸培養了與 AI 工具交互的心智習慣。 提示詞：請嚴格按照我的信息結構來設計這個頁面，另外，一定要注意列表擁有多個狀態。
從結果來看，Stitch 的理解能力還不錯，輸出基本按照我的結構執行，頁面效果也還算理想。這裏我想再次強調「變體」的價值：它最大的優勢在於能提供多種排版參考。當你在既定頁面框架裏缺少靈感時，變體確實能給你不同方向的設計啓發，比如更時尚、更簡潔、更豐富等。 我對課程學習首頁整體還算滿意，但也經歷了多次調整。這個過程我發現並不需要什麼技巧，只要持續和 Stitch 對話溝通即可，就像甲方指導我們改稿：字體大一點、圖片大一點，或者換個顏色、調整排版，逐步修改到滿意為止。 不過也需要說明，Stitch 的產品定位本身就是快速幫你把想法變成界面，不要指望它一次就做到完美，所以別在單個頁面上耗費太多時間。 最終定稿 課程詳情頁 課程詳情頁是一個聚合多種功能的頁面。用戶進來之後，會在同一個空間裏看到視頻、直播、練習和測驗。 如上文所說，在用 Stitch 設計詳情頁時，用思維導圖把頁面的信息結構和各類狀態先梳理清楚，幾乎是必做功課。這裏有個關鍵提醒：不要一次性讓它生成多個頁面，否則一致性很難保證。尤其是涉及 Tab 這類組件時，Stitch 很容易把每個頁面都當成獨立頁面來“重新設計”，最後樣式四分五裂。 更重要的是，信息結構與多狀態梳理這件事必須由我們自己完成。Stitch 的發散性很強，別試圖把這項最重要的工作交給 AI——這也是我這次深度體驗最大的感受之一。你只需要一個思維導圖工具，把每個頁面的信息結構拆清楚、狀態講明白，它就能幫你更高精度地還原。 再分享一個小技巧：因為涉及 Tab 切換，頭部和 Tab 的樣式需要始終保持統一。所以在生成新的 Tab 頁面時，一定要先截圖，並明確告訴 Stitch“保持頭部和 Tab 樣式不變再生成”。否則它很可能會另起爐灶，給你生成一套全新的樣式。 練習題 把課程詳情頁初步定稿後，我開始設計這個學習系統最複雜的功能模塊：練習題。 首先是聽力題。我先讓 Stitch 自由發揮，輸出樣式供我參考。練習題這種場景在國外產品中很常見，比如多鄰國、博樹等，都有大量豐富的題型。這些產品我都做過拆機分析，如果你感興趣，可以去看之前的內容。 效果不錯。Stitch 還是最擅長偏國外設計風格的方案，接下來要做的就是根據每個題型的交互狀態和細節繼續優化。另外，還需要保持整個練習題的頭部、底部一致。 我想單獨說一下口語題的設計細節。這裏的交互比較細緻，如果你沒有做過類似流程，可能很難理解其中包含的各種微交互細節。 提示詞 ：保持頭部和底部的樣式不變，幫我輸出新的題型——口語題。
在 Stitch 輸出初版並調整後，我又輸入了新的微交互提示詞。 提示詞：保持頁面樣式整體不變，輸出用戶點擊錄音後的微交互，注意，這裏主要是按鈕和文字的變化。
提示詞：保持頁面樣式整體不變，輸出用戶提交音頻後的頁面樣式。這裏的技術邏輯是系統會上傳用戶的錄製音頻，然後雲端會進行評分，超過 60 分出現 Toast 彈窗：你真棒；低於 60 分則提示用戶可以再來一次。
效果不錯。對於同一個流程的微交互設計，我覺得 Stitch 生成的效果比較符合我的期望，至少能保持一致性。 最終定稿 單元測驗 單元測驗和練習題一樣複雜，都需要設計多個流程的微交互。兩個場景雖然相似，但細節差異很大。 這個模塊從列表頁開始就有多個狀態，所以信息結構一定要清晰，Stitch 才能更準確地理解。寫到這裏，我越來越覺得和 Stitch 的交互很像在寫一份產品設計開發文檔：你需要把每個細節都考慮清楚，讓設計和開發都能理解。 另外，測驗和練習題的樣式需要保持一致，這也是對 Stitch 輸出一致性的一次考驗。比如我想在保持頭部樣式不變的前提下加入答題卡，調試了幾次才最終實現。這樣既能保持產品演示的一致性，也不必額外加備註提醒其他人。 最後再分享一個考試提交流程。用戶考過或失敗，系統都需要及時提示。進入考試結果頁後，我還需要更細緻的數據統計和考試表現統計。Stitch 一開始表現不佳，無法理解如何設計考試表現統計圖。於是我補充了更具體的描述：X 軸單位為考試時長，Y 軸單位為答對題目數量，並需要與其他學員進行綜合比較。 最終 Stitch 生成的頁面效果雖不完美，但也更接近我理想的效果。 最終定稿 思考與總結 我就這樣一步一步把這個學習流程設計完成了。花了大概 6 小時的時間，生成 100+ 頁面，最終有 30 個頁面達到可定稿標準。接下來我想聊聊這次產品體驗帶來的驚喜、焦慮與思考。 我的驚喜 第一，Stitch 生成速度實在太快了。 難以想象 Stitch 能在 20 秒內完成過去我們可能需要花 1–2 小時才能完成的界面設計，我剛開始體驗時甚至覺得不可思議。關鍵是，它的生成質量並不差，甚至好過一些初中級設計師。對齊、規整、一致等方面，甚至比很多設計師都強。 第二，Stitch 覆蓋的場景也讓人驚歎。 就我這次體驗的結果來看，Stitch 已經可以接入設計系統，抓取網址風格，根據截圖參考風格，並且不限量生成變體，就像一台不會疲憊的機器一樣，可以持續為你工作。 第三，當我把 Stitch 生成的文件複製到 Figma 時，它的自動佈局和設計規範給了我真正的驚喜。 因為沒有這一步，Stitch 生成的界面對我來說意義只能做原型參考。但看到它如此規整的 Figma 佈局，二次加工成本被大幅降低（我已經無法接受那些非自動佈局的設計稿了）。 我的焦慮 深度體驗完 Stitch，我的焦慮感一陣陣湧上心頭。試想一下，過去評估設計工作效率時，產量一直是核心標準。我也一直把自己的高產當作重要賣點，但和只憑一句話就能生成多個頁面的 Stitch 相比，哪個設計師還敢和它比效率？如果論效率，根本不在一個維度。 再說設計品質。Stitch 目前的生成效果確實不夠優秀，各方面細節也還難以達到較高水準。但最可怕的是，這樣的工具還在不斷迭代升級。它不知疲倦地進化，誰也不知道再過半年或一年，它最終輸出的作品會不會讓設計師難以企及。想到這裏，恐慌感又一陣陣湧上心頭。AI，真的太可怕了！ 我的思考 說實話，一邊感受到 Stitch 帶來的生產力突飛猛進，我一邊也在思考：這樣的工具會如何重構產品設計流程，又會為我們帶來哪些變化與啓發。 第一，Stitch 可能覆蓋交互設計師 90% 的原型繪製工作。 如果你還在用 Axure 畫原型，可能真的需要重新認識 Stitch。傳統交互原型在 AI 生成效率面前，幾乎是兩個時代的生產力工具。我判斷，原型繪製中大量重複、規範化的工作，會逐步被 Stitch 這類工具替代。未來我們只要把業務需求與場景描述清楚，需求就能更快被“可視化”。 第二，Stitch 生成的設計稿能否取代 UI 設計師？ 我的答案是：不能。表面上看，Stitch 出圖又快又“像那麼回事”。但我把它的文件導入 Figma 後發現，雖然它支持自動佈局，也足夠規整，但距離可直接投入生產仍有差距。更重要的是，真正的設計品質來自審美判斷、細節打磨與整體一致性。若對品質沒有更高追求，Stitch 或許能覆蓋一部分 UI 工作。但要做出優秀的產品，UI 設計師依然不可替代。 第三，我們該如何看待 Stitch 這樣的 AI 工具？ 就像 Stitch 的定位一樣，它試圖用語言提示、手繪線框圖和界面截圖，快速生成可編輯 UI，並打通設計與開發之間的斷層。對產品設計師來說，Stitch 不是敵人。它確實降低了界面設計門檻，但一個成功的產品從來不是“拼界面”拼出來的。真正的價值仍在於需求洞察、業務流程設計，以及最終交互體驗的整體把控。 所以我始終保持同一個觀點： 不管是 Figma 還是 Stitch，它們都只是實現設計目標的工具。 20 年前我們用 Adobe Photoshop，15 年前我們用 Sketch，10 年前我們用 Figma。今天也許正在進入一個新階段，但亙古不變的，永遠是客戶的需求與目標。 像 AI 一樣學習，不要被工具帶來的高效麻痹思考。擁抱 Stitch，擁抱 AI，擁抱這場正在重塑生產力的變化！ 從 2022 年創辦至今，設計大偵探已經拆解以下產品：
醫療 Medical
【2022原創醫療產品設計分析】之丁香醫生APP圖文版
螞蟻阿福APP拆解丨 對話式交互如何重構就醫全流程？
1.2萬字拆解京東健康丨市值1776億的醫療產品如何設計？
醫療大偵探丨8500字產品拆解醫鹿（一）
互聯網醫院產品大偵探（1）丨7000字拆解北京協和醫院APP
在線教育 Online Education
產品拆解丨月營收3個億的斑馬APP原來這樣設計
偵探日記Vol.01丨5000字拆解小猿AI的12種練習題設計
多鄰國丨人人皆可使用的全球最受歡迎語言學習工具
Babbel丨專注成人實用會話的語言學習平台
Busuu博樹丨讓1.2億學習者大膽開口學英文的全球最大語言學習社區
HelloTalk丨像微信聊天一樣學習一門語言
Vocabulary產品拆解 丨像刷短視頻一樣學習很酷的英文單詞
萬字拆解Class 官網體驗旅程丨 如何用講故事的方式來介紹自己的產品
知識付費
向閲讀致敬！微信讀書產品設計策略推導——你要一輛跑得更快的馬車，但它給了你一輛法拉利！
1.1萬字深度拆解丨樊登讀書如何找到書中的黃金屋？
ClassIn官網拆解丨一款世界級的知識付費產品
社交媒體
8384字深度拆解站酷丨7年之癢，是固步自封還是放手一搏？
1.3萬字丨Notion AI和我一起拆解了小紅書
1.4萬字拆解丨3.15億Z時代用戶為何熱愛嗶哩嗶哩
SaaS
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（一）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（二）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（三）
4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（完）
萬字拆解釘釘AI助理（釘釘AI助理眾測大賽一等獎作品）
SAAS產品體驗日記（一）丨8000字深度拆解微盟店鋪裝修功能設計
音樂
QQ音樂產品設計拆解丨看最美的音樂，聽最偉大的作品
物流
順豐速運產品拆解丨14500字，76個核心功能為你揭秘順豐的快遞世界
招聘
智聯招聘產品拆解丨這款28年的新能源老爺車，開啓了直播招聘新時代
脈脈產品拆解丨1.1億職場人士為什麼使用脈脈?
體育
世界盃專題丨8500字拆解懂球帝
6000字拆解丨花費10個億，抖音如何設計世界盃專題？
工具
3600字拆解微信鍵盤丨地主家的小兒子真是又帥又有才
出行
萬字拆解鐵路12306丨最牛逼和最垃圾，你選哪個？
愛彼迎 Airbnb 產品拆解丨一款累計超過 20 億人次入住的 APP 有哪些設計亮點？
金融
產品體驗日記①丨中歐財富APP開户設計拆解
金融產品體驗日記（二）丨中歐財富APP首頁設計拆解
金融產品體驗日記（三）丨中歐財富基金詳情頁設計拆解
房產
房源詳情頁的設計可以有多酷，看完鏈家APP你就明白了！
