起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識 新高度：我終于找到了產(chǎn)品經(jīng)理利用AI畫原型的靠譜方法?。。?/h2>
如何利用AI工具Cursor和Claude 4.0，快速生成高質(zhì)量、可交互的移動端App原型？本文通過簡單易懂的步驟和實際案例，展示如何在幾分鐘內(nèi)完成以往需要數(shù)天的原型設(shè)計任務(wù)，并且還能進(jìn)一步生成結(jié)構(gòu)化的PRD文檔。
今天分享的案例是原型設(shè)計， 跟著學(xué)，你也能學(xué)會，案例鏈接在這里：https://dpxj.github.io/test-shopping/
順便先看下效果圖（幾分鐘做的demo，演示用，沒調(diào)整細(xì)節(jié)）：
額，今天咱們繼續(xù)聊點刺激的、剛需的、能讓你虎軀一震、效率飆升的干貨。
話說天下產(chǎn)品，苦原型久矣！
我相信屏幕前的你，一定也沒少經(jīng)歷被原型圖折磨的日日夜夜——改需求？原型重畫？加功能？原型返工？
好不容易畫完了，評審會上老板、運營、開發(fā)輪番“挑刺”，回來又是一頓爆改，那感覺，簡直像是陷入了一個無限循環(huán)的“原型地獄”，畫禿了多少產(chǎn)品經(jīng)理的秀發(fā)，熬紅了多少雙無辜的眼睛！
鏡哥記得咱剛?cè)胄心菚?，用Axure畫原型，一個稍微復(fù)雜點的電商App，幾十個頁面帶交互，吭哧吭哧畫一周都算是快的。
如果你再有幸遇到那種特別喜歡「指點江山」的老板，一個原型版本迭代七、八次也不算夸張。
說實話，那時候鏡哥就在想，咱們啥時候畫原型這事兒能變得輕松點呢？
前段時間，我給大家分享了用 Readdy.ai 這類AI工具來輔助畫原型（翻天！產(chǎn)品人必看！抓緊學(xué)會用這個AI工具：3分鐘畫好原型，實測效果炸裂?。?，平心而論，在某些簡單場景下，比如快速生成幾個靜態(tài)頁面看看大概感覺，效果確實還行，效率嗖嗖的。
但深度體驗后，問題就暴露出來了：
首先，多頁面交互基本沒戲。
比如，如果你想做個從列表頁跳到詳情頁，再從詳情頁返回列表頁的流暢交互？抱歉，Readdy.ai 這類工具往往在頁面聯(lián)動和復(fù)雜交互上就顯得力不從心了。
如果演示移動端App時，這種“斷裂感”簡直是災(zāi)難，客戶看得一臉懵逼，你也解釋得口干舌燥，用戶體驗直接降到冰點。
其次，定制化程度也受限。
AI生成的初始版本可能還行，但你想精細(xì)調(diào)整某個按鈕的樣式、某個組件的布局，或者加入一些特定的品牌元素？那可就費勁了，很多時候還不如自己從頭畫來得快。
另外，成本也挺高的。
鏡哥為了給大家測試，貸款買了Readdy.ai會員，嗯，一個月也是20刀。這對于本不富裕的家庭更是一個大饑荒，尤其長期用下來也是一筆不小的開銷。
咱產(chǎn)品經(jīng)理花錢的地方多了去了，還是要能省則省。。
所以，最近我就一直在琢磨，有沒有一種更牛X、更經(jīng)濟(jì)、更高效的AI原型方案呢？
1、柳暗花明：Cursor + Claude 4.0，原型界的“王炸組合”！
前段時間，Claude4.0發(fā)布后，讓我感受到了AI的代碼能力對咱原型設(shè)計的跨界賦能，猶如神助。
眾所周知，Cursor可以使用Claude4.0，而我也一直在續(xù)費Cursor會員。
所以，既然咱手里有 Cursor 這把被譽(yù)為“AI代碼編輯器”的瑞士軍刀，我就尋思著，能不能讓它把原型這活兒也給包圓了？
畢竟，原型說到底，在Web和移動端很多時候不就是HTML、CSS和JavaScript那點事兒嘛。（假裝懂開發(fā)??）
事實上，我嘗試這個思路其實很早，但之前的嘗試其實不算特別理想。
早期用 Cursor 配合一些AI模型做Web端原型，速度是快，但生成的代碼質(zhì)量、交互的復(fù)雜度和視覺效果往往差強(qiáng)人意，尤其是想模擬移動端的原生體驗，更是難上加難，部署起來也頗為費勁。
轉(zhuǎn)機(jī)出現(xiàn)在 Claude 4.0 模型橫空出世之后。
各位，深度體驗之后，我認(rèn)為這可不是一般的升級，這簡直是給 Cursor 插上了翅膀，很多體驗我在AI產(chǎn)品群里也做了即時反饋。
因為Claude 4.0 在理解復(fù)雜指令、生成高質(zhì)量代碼、處理上下文關(guān)聯(lián)方面的能力，那真是提升了好幾個level。
就在前幾天，鏡哥照例在深夜“修煉”（你們懂的，產(chǎn)品經(jīng)理的夜晚總是那么充實），靈光一閃——既然 Claude 4.0 這么猛，能不能讓它在 Cursor 里直接幫咱來構(gòu)建一個高度仿真的、可交互的移動端原型呢？
核心思路就是：左側(cè)區(qū)域作為頁面導(dǎo)航菜單，右側(cè)區(qū)域模擬手機(jī)屏幕，點擊左側(cè)導(dǎo)航，右側(cè)實時切換頁面內(nèi)容，并且頁面間的跳轉(zhuǎn)、元素交互都盡可能逼真。
你猜怎么著？成了！而且效果好到爆炸。
大家看看，這效果，乍一看跟咱們吭哧吭哧用 Axure 精雕細(xì)琢畫出來的幾乎一毛一樣！
但輸出效率呢，鏡哥實測下來，直線飆升！??！
以前畫一個包含十幾個核心頁面、涉及多種交互（如滑動、點擊、彈窗、表單填寫等）的移動端App原型，從需求理解到最終交付，怎么也得個三五天甚至一周吧？
現(xiàn)在？可能真就是一杯咖啡的功夫，AI就能幫你把框架搭得七七八八！
圖-??幾句提示詞，輸出的移動端原型，效果還不錯
2、不廢話，上案例！手把手教你“調(diào)教”AI
提升產(chǎn)品能力，一定不能只靠想象，要學(xué)會把手弄臟，親自下場去干，實踐出真知，這是擁抱AI的最好態(tài)度。
文章開頭的動圖和鏈接，的確是我只花了幾分鐘（真的就幾分鐘！）讓 Cursor 和 Claude 4.0 搗鼓出來的這個小Demo。
當(dāng)然，能優(yōu)化的點還很多（事實上，你和AI對話幾輪就能很快實現(xiàn)你的需求），這純粹是為了給大家演示下核心思路和效果，我就隨便丟了幾個提示詞，連UI細(xì)節(jié)都沒怎么打磨。
核心提示詞大概長這樣（僅供參考！）：
“你好，請你扮演一位資深的前端開發(fā)工程師和UI設(shè)計師。我需要你為我構(gòu)思并生成一個HTML單頁面的完整代碼（包含所有HTML結(jié)構(gòu)、CSS樣式和必要的JavaScript）。
這個頁面需要模擬一個移動端電商App的原型。
整體布局要求：
頁面分為左右兩欄。
左欄：作為導(dǎo)航區(qū)域，寬度固定為200像素。使用一個垂直列表展示App的主要頁面名稱，例如：“首頁”、“商品分類”、“購物車”、“我的訂單”、“個人中心”。列表項應(yīng)有清晰的點擊樣式反饋。
右欄：作為手機(jī)內(nèi)容顯示區(qū)域，占據(jù)剩余寬度。內(nèi)部需要模擬一個手機(jī)屏幕的視覺效果（例如，可以有一個圓角邊框，寬度375px，高度667px，居中顯示）
頁面內(nèi)容與交互要求：
首頁：應(yīng)包含一個輪播圖（至少3張圖片，自動播放，可手動切換）、一個商品分類入口區(qū)域（至少4個分類圖標(biāo)+文字）、一個“熱門推薦”商品列表（至少4個商品卡片，每個卡片包含商品圖、名稱、價格）。
商品分類頁：左側(cè)為一級分類列表，右側(cè)展示該分類下的二級分類或商品列表。
購物車頁：展示購物車中的商品列表（商品圖、名稱、規(guī)格、價格、數(shù)量增減按鈕、刪除按鈕）、合計金額、結(jié)算按鈕。
我的訂單頁：展示訂單列表，包含訂單狀態(tài)（待付款、待發(fā)貨、待收貨、已完成）、商品縮略圖、訂單金額
個人中心頁：包含用戶頭像、昵稱、常用功能入口（如“我的優(yōu)惠券”、“收貨地址”、“設(shè)置”等）。
交互核心：點擊左欄的導(dǎo)航列表項時，右欄手機(jī)模擬器區(qū)域需要平滑地加載并顯示對應(yīng)頁面的內(nèi)容。頁面切換不應(yīng)導(dǎo)致整個瀏覽器頁面刷新。
視覺風(fēng)格：整體風(fēng)格要求簡潔、現(xiàn)代、美觀，符合主流電商App的設(shè)計趨勢。顏色搭配要和諧，字體清晰易讀。
技術(shù)要求：使用HTML5、CSS3和原生JavaScript實現(xiàn)，盡量不依賴大型外部框架（除非實現(xiàn)特定復(fù)雜交互非常必要，如輪播圖可以使用輕量級庫）。
CSS樣式請直接寫在HTML文件的<style>標(biāo)簽內(nèi)，或者清晰地組織并在提示中說明。JavaScript代碼也請直接寫在HTML文件的<script>標(biāo)簽內(nèi)。
確保代碼結(jié)構(gòu)清晰、注釋必要、易于理解和修改。
請充分發(fā)揮你的創(chuàng)造力，幫我打造一個既能清晰展示多頁面結(jié)構(gòu)，又能流暢交互的移動端App原型！”
當(dāng)然，咱也沒必要指望AI一次就完美生成所有細(xì)節(jié)，那不現(xiàn)實，也沒必要。
關(guān)鍵在于迭代！
比如，Cursor 可能一開始只給了你靜態(tài)的頁面結(jié)構(gòu)，交互沒加上。咱就繼續(xù)追問：
“很好，現(xiàn)在的頁面結(jié)構(gòu)有了，請為左側(cè)導(dǎo)航欄的列表項添加點擊事件，使得點擊后右側(cè)內(nèi)容區(qū)能顯示對應(yīng)頁面的內(nèi)容。
樣式不滿意？ 繼續(xù)調(diào)教：
“當(dāng)前的配色方案有點沉悶，能幫我換成更活潑明亮的色系嗎？比如以藍(lán)色為主色調(diào)，搭配一些橙色作為點綴。”
交互想更豐富？ 咱只管大膽提要求：
比如，“我希望在商品卡片上增加一個‘加入購物車’按鈕，點擊后能有一個簡單的動畫提示，并在購物車圖標(biāo)上顯示一個角標(biāo)提示商品數(shù)量增加?！?/p>
如果有bug，直接截圖給AI，順便簡單描述下問題，Cursor很快就能修復(fù)，說真的，Claude4.0的代碼能力真的強(qiáng)的一批。
圖-??發(fā)現(xiàn)bug，直接截圖讓AI修復(fù)就行
鏡哥就是這么來回跟 Cursor “聊天”，只需幾個回個，一個像模像樣的、帶真實交互的移動端原型就出來了。
大家在文章開頭應(yīng)該也看到案例截圖了，左側(cè)是清晰的頁面導(dǎo)航，右側(cè)是模擬的手機(jī)屏幕，里面的頁面元素、跳轉(zhuǎn)交互、甚至一些簡單的動畫效果都做得有模有樣。
尤其是，用這種方式，只要咱們需求描述清晰，就能很快生成演示的原型，就算是移動端的也一樣，可以用HTML方式快速生成。
這感覺，就像是你身邊坐著一個隨叫隨到、任勞任怨、還不要工資的“前端大神”！
對咱們產(chǎn)品同學(xué)來說，我覺得至少用來演示原型是足夠了。
3、在線部署與分享
坦白說，利用AI編程做演示原型，是有些門檻，但一旦體驗之后，你真的不會再想用Axure。（事實上，也確實不再需要用的，就像鏡哥常說的一句話：打敗Axure的可能不是墨刀、figma，而是類似于Cursor、Trae的AI編程類的IDE工具）
當(dāng)然，這玩意兒做好了，咋給老板、給客戶、給開發(fā)小哥看呢？
在我們團(tuán)隊內(nèi)，通常有兩種方式：
1??直接甩給運維小哥：
咱可以直接把這個文件或者包含這些文件的文件夾丟給你們公司的運維同學(xué)，讓他們幫忙部署到測試服務(wù)器上，分分鐘給你一個URL。
這樣的話，咱們就可以用以演示原型或者給老板匯報用，當(dāng)然，還可以讓運維給你一個部署的方式，后續(xù)原型更新咱可以自主更新，就不用麻煩運維同學(xué)了。
2??利用GitHub Pages大法：
更省事兒的，如果你會用Git，直接把這個項目推送到GitHub倉庫，然后開啟 GitHub Pages 功能。
這個方法我在這文章里有過詳細(xì)介紹。（產(chǎn)品經(jīng)理用這些AI工具輔助進(jìn)行產(chǎn)品匯報，效果炸裂：Manus、Cursor、Youware…）
總之，GitHub會自動給你生成一個公開的網(wǎng)址，任何人都可以通過這個網(wǎng)址訪問你的原型。再也不用傳來傳去幾十兆甚至上百兆的Axure源文件了，也告別了“你電腦上沒裝Axure打不開”的尷尬。
其實，線上部署的方法也很多，這里咱們就不展開講了。
4、小彩蛋
你以為AI幫你把原型畫了就完事了？
事實上，AI的能力可不止于此，原型設(shè)計好了，你甚至可以反向操作，讓 Cursor 根據(jù)你這個熱乎乎的、經(jīng)過多輪“調(diào)教”已經(jīng)基本成型的原型，幫你把PRD也寫了。
你可以這么跟它說：
“老鐵，基于我們剛才一起完成的這個電商App原型（它能記住上下文的！），請幫我起草一份PRD文檔。
文檔需要包含以下主要章節(jié)：
需求背景與目標(biāo)：簡述為什么要做這個App，要解決什么用戶痛點，期望達(dá)到什么業(yè)務(wù)目標(biāo)。
用戶畫像與用戶故事：描述核心目標(biāo)用戶特征，并為每個主要功能模塊編寫對應(yīng)的用戶故事（As a [用戶類型], I want to [動作], so that [價值]）。功能列表（Scope）：詳細(xì)列出原型中涉及的所有功能點，可以按模塊劃分。
頁面流程圖描述：針對核心用戶路徑（如用戶注冊登錄、瀏覽商品、下單支付等），用文字描述其流程步驟。（雖然它不能直接畫圖，但它可以幫你梳理邏輯，你再用專業(yè)工具畫圖就快多了）
各頁面詳細(xì)說明：針對原型中的每一個頁面，描述其包含的UI元素、信息展示、交互邏輯、特殊狀態(tài)（如空狀態(tài)、錯誤狀態(tài)）等。
非功能性需求：例如性能要求、兼容性要求、安全性考慮等（這部分它可以給一些通用建議）。
請注意，PRD的語言風(fēng)格要專業(yè)、嚴(yán)謹(jǐn)、清晰。如果某些信息原型中沒有明確體現(xiàn)，你可以先留空或提出疑問?！?/p>
當(dāng)然，如果你公司有固定的PRD模板（比如Word模板），你甚至可以把模板的章節(jié)結(jié)構(gòu)、關(guān)鍵標(biāo)題，甚至導(dǎo)航窗格的截圖，告訴 Cursor，讓它盡可能按照你的格式來輸出。
你看，這簡直就是一站式的產(chǎn)品設(shè)計AI好幫手啊，從模糊的想法到可交互的原型，再到結(jié)構(gòu)化的PRD初稿，一條龍服務(wù)，幫你把那些最耗時、最重復(fù)的“體力活”都干了！
OpenAI的創(chuàng)始人山姆·奧特曼曾說過一句話，鏡哥我深以為然：“所有重復(fù)性的工作、體力性的工作都值得用AI來代替?！?這句話對于咱們產(chǎn)品經(jīng)理來說，尤其實用。
捫心自問，咱們產(chǎn)品經(jīng)理最重要的核心競爭力是啥？是畫得一手多么像素級精準(zhǔn)的線框圖嗎？是寫得一手多么辭藻華麗的PRD嗎？都不是！
最核心的其實是我們對用戶的深刻理解、對業(yè)務(wù)的敏銳洞察、對市場趨勢的精準(zhǔn)把握，以及將這些洞察轉(zhuǎn)化為可行產(chǎn)品的創(chuàng)新能力和組織協(xié)調(diào)能力！
原型設(shè)計、PRD撰寫，這些在傳統(tǒng)工作流中占據(jù)了我們大量時間的環(huán)節(jié)，說實話，很多時候就是在做“搬磚”的體力活。
一遍遍地拖拽控件、調(diào)整像素、復(fù)制粘貼、碼字排版……這些重復(fù)性的勞動，不僅消耗了我們寶貴的時間和精力，更容易讓我們陷入細(xì)節(jié)的泥潭，而忽略了更宏觀的戰(zhàn)略思考。
現(xiàn)在，AI這個“天降神兵”來了！它就像一個擁有十八般武藝的超級助理，可以把我們從這些繁瑣的、重復(fù)性的工作中解放出來。
圖-??利用cursor，反推編寫PRD
咱們?nèi)绻堰@些“體力活”都交給AI，我們就能把更多的時間和腦力，投入到真正創(chuàng)造價值的環(huán)節(jié)：更深入地和用戶溝通，去挖掘他們最真實的需求和痛點；更全面地分析市場和競品，去尋找差異化的競爭優(yōu)勢；更系統(tǒng)地思考產(chǎn)品戰(zhàn)略和商業(yè)模式，去規(guī)劃產(chǎn)品的長遠(yuǎn)發(fā)展。
這看似只是產(chǎn)品設(shè)計過程中的一小步工具革新，但鏡哥我覺得，這絕對是咱們產(chǎn)品人自我革命的一大步！
AI不是要取代你，而是要解放你！
咱們也不能被AI取代，而是要學(xué)會駕馭AI，讓AI成為我們延伸自己能力、提升工作效能的“外掛”。
時代在變，工具在進(jìn)化，我們產(chǎn)品經(jīng)理的技能樹也必須跟著迭代升級。沒必要死守著那些低效的“傳統(tǒng)手藝”了，趕緊去試試這些新的AI工具，去感受一下效率起飛的快感吧！
即刻出發(fā)，擁抱AI，讓AI成為我們的超級助理，而不是未來的競爭對手。
本文由人人都是產(chǎn)品經(jīng)理作者【產(chǎn)品大峽谷】，微信公眾號：【產(chǎn)品大峽谷】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
如何利用AI工具Cursor和Claude 4.0，快速生成高質(zhì)量、可交互的移動端App原型？本文通過簡單易懂的步驟和實際案例，展示如何在幾分鐘內(nèi)完成以往需要數(shù)天的原型設(shè)計任務(wù)，并且還能進(jìn)一步生成結(jié)構(gòu)化的PRD文檔。
今天分享的案例是原型設(shè)計， 跟著學(xué)，你也能學(xué)會，案例鏈接在這里：https://dpxj.github.io/test-shopping/
順便先看下效果圖（幾分鐘做的demo，演示用，沒調(diào)整細(xì)節(jié)）：
額，今天咱們繼續(xù)聊點刺激的、剛需的、能讓你虎軀一震、效率飆升的干貨。
話說天下產(chǎn)品，苦原型久矣！
我相信屏幕前的你，一定也沒少經(jīng)歷被原型圖折磨的日日夜夜——改需求？原型重畫？加功能？原型返工？
好不容易畫完了，評審會上老板、運營、開發(fā)輪番“挑刺”，回來又是一頓爆改，那感覺，簡直像是陷入了一個無限循環(huán)的“原型地獄”，畫禿了多少產(chǎn)品經(jīng)理的秀發(fā)，熬紅了多少雙無辜的眼睛！
鏡哥記得咱剛?cè)胄心菚?，用Axure畫原型，一個稍微復(fù)雜點的電商App，幾十個頁面帶交互，吭哧吭哧畫一周都算是快的。
如果你再有幸遇到那種特別喜歡「指點江山」的老板，一個原型版本迭代七、八次也不算夸張。
說實話，那時候鏡哥就在想，咱們啥時候畫原型這事兒能變得輕松點呢？
前段時間，我給大家分享了用 Readdy.ai 這類AI工具來輔助畫原型（翻天！產(chǎn)品人必看！抓緊學(xué)會用這個AI工具：3分鐘畫好原型，實測效果炸裂?。?，平心而論，在某些簡單場景下，比如快速生成幾個靜態(tài)頁面看看大概感覺，效果確實還行，效率嗖嗖的。
但深度體驗后，問題就暴露出來了：
首先，多頁面交互基本沒戲。
比如，如果你想做個從列表頁跳到詳情頁，再從詳情頁返回列表頁的流暢交互？抱歉，Readdy.ai 這類工具往往在頁面聯(lián)動和復(fù)雜交互上就顯得力不從心了。
如果演示移動端App時，這種“斷裂感”簡直是災(zāi)難，客戶看得一臉懵逼，你也解釋得口干舌燥，用戶體驗直接降到冰點。
其次，定制化程度也受限。
AI生成的初始版本可能還行，但你想精細(xì)調(diào)整某個按鈕的樣式、某個組件的布局，或者加入一些特定的品牌元素？那可就費勁了，很多時候還不如自己從頭畫來得快。
另外，成本也挺高的。
鏡哥為了給大家測試，貸款買了Readdy.ai會員，嗯，一個月也是20刀。這對于本不富裕的家庭更是一個大饑荒，尤其長期用下來也是一筆不小的開銷。
咱產(chǎn)品經(jīng)理花錢的地方多了去了，還是要能省則省。。
所以，最近我就一直在琢磨，有沒有一種更牛X、更經(jīng)濟(jì)、更高效的AI原型方案呢？
1、柳暗花明：Cursor + Claude 4.0，原型界的“王炸組合”！
前段時間，Claude4.0發(fā)布后，讓我感受到了AI的代碼能力對咱原型設(shè)計的跨界賦能，猶如神助。
眾所周知，Cursor可以使用Claude4.0，而我也一直在續(xù)費Cursor會員。
所以，既然咱手里有 Cursor 這把被譽(yù)為“AI代碼編輯器”的瑞士軍刀，我就尋思著，能不能讓它把原型這活兒也給包圓了？
畢竟，原型說到底，在Web和移動端很多時候不就是HTML、CSS和JavaScript那點事兒嘛。（假裝懂開發(fā)??）
事實上，我嘗試這個思路其實很早，但之前的嘗試其實不算特別理想。
早期用 Cursor 配合一些AI模型做Web端原型，速度是快，但生成的代碼質(zhì)量、交互的復(fù)雜度和視覺效果往往差強(qiáng)人意，尤其是想模擬移動端的原生體驗，更是難上加難，部署起來也頗為費勁。
轉(zhuǎn)機(jī)出現(xiàn)在 Claude 4.0 模型橫空出世之后。
各位，深度體驗之后，我認(rèn)為這可不是一般的升級，這簡直是給 Cursor 插上了翅膀，很多體驗我在AI產(chǎn)品群里也做了即時反饋。
因為Claude 4.0 在理解復(fù)雜指令、生成高質(zhì)量代碼、處理上下文關(guān)聯(lián)方面的能力，那真是提升了好幾個level。
就在前幾天，鏡哥照例在深夜“修煉”（你們懂的，產(chǎn)品經(jīng)理的夜晚總是那么充實），靈光一閃——既然 Claude 4.0 這么猛，能不能讓它在 Cursor 里直接幫咱來構(gòu)建一個高度仿真的、可交互的移動端原型呢？
核心思路就是：左側(cè)區(qū)域作為頁面導(dǎo)航菜單，右側(cè)區(qū)域模擬手機(jī)屏幕，點擊左側(cè)導(dǎo)航，右側(cè)實時切換頁面內(nèi)容，并且頁面間的跳轉(zhuǎn)、元素交互都盡可能逼真。
你猜怎么著？成了！而且效果好到爆炸。
大家看看，這效果，乍一看跟咱們吭哧吭哧用 Axure 精雕細(xì)琢畫出來的幾乎一毛一樣！
但輸出效率呢，鏡哥實測下來，直線飆升！??！
以前畫一個包含十幾個核心頁面、涉及多種交互（如滑動、點擊、彈窗、表單填寫等）的移動端App原型，從需求理解到最終交付，怎么也得個三五天甚至一周吧？
現(xiàn)在？可能真就是一杯咖啡的功夫，AI就能幫你把框架搭得七七八八！
圖-??幾句提示詞，輸出的移動端原型，效果還不錯
2、不廢話，上案例！手把手教你“調(diào)教”AI
提升產(chǎn)品能力，一定不能只靠想象，要學(xué)會把手弄臟，親自下場去干，實踐出真知，這是擁抱AI的最好態(tài)度。
文章開頭的動圖和鏈接，的確是我只花了幾分鐘（真的就幾分鐘！）讓 Cursor 和 Claude 4.0 搗鼓出來的這個小Demo。
當(dāng)然，能優(yōu)化的點還很多（事實上，你和AI對話幾輪就能很快實現(xiàn)你的需求），這純粹是為了給大家演示下核心思路和效果，我就隨便丟了幾個提示詞，連UI細(xì)節(jié)都沒怎么打磨。
核心提示詞大概長這樣（僅供參考！）：
“你好，請你扮演一位資深的前端開發(fā)工程師和UI設(shè)計師。我需要你為我構(gòu)思并生成一個HTML單頁面的完整代碼（包含所有HTML結(jié)構(gòu)、CSS樣式和必要的JavaScript）。
這個頁面需要模擬一個移動端電商App的原型。
整體布局要求：
頁面分為左右兩欄。
左欄：作為導(dǎo)航區(qū)域，寬度固定為200像素。使用一個垂直列表展示App的主要頁面名稱，例如：“首頁”、“商品分類”、“購物車”、“我的訂單”、“個人中心”。列表項應(yīng)有清晰的點擊樣式反饋。
右欄：作為手機(jī)內(nèi)容顯示區(qū)域，占據(jù)剩余寬度。內(nèi)部需要模擬一個手機(jī)屏幕的視覺效果（例如，可以有一個圓角邊框，寬度375px，高度667px，居中顯示）
頁面內(nèi)容與交互要求：
首頁：應(yīng)包含一個輪播圖（至少3張圖片，自動播放，可手動切換）、一個商品分類入口區(qū)域（至少4個分類圖標(biāo)+文字）、一個“熱門推薦”商品列表（至少4個商品卡片，每個卡片包含商品圖、名稱、價格）。
商品分類頁：左側(cè)為一級分類列表，右側(cè)展示該分類下的二級分類或商品列表。
購物車頁：展示購物車中的商品列表（商品圖、名稱、規(guī)格、價格、數(shù)量增減按鈕、刪除按鈕）、合計金額、結(jié)算按鈕。
我的訂單頁：展示訂單列表，包含訂單狀態(tài)（待付款、待發(fā)貨、待收貨、已完成）、商品縮略圖、訂單金額
個人中心頁：包含用戶頭像、昵稱、常用功能入口（如“我的優(yōu)惠券”、“收貨地址”、“設(shè)置”等）。
交互核心：點擊左欄的導(dǎo)航列表項時，右欄手機(jī)模擬器區(qū)域需要平滑地加載并顯示對應(yīng)頁面的內(nèi)容。頁面切換不應(yīng)導(dǎo)致整個瀏覽器頁面刷新。
視覺風(fēng)格：整體風(fēng)格要求簡潔、現(xiàn)代、美觀，符合主流電商App的設(shè)計趨勢。顏色搭配要和諧，字體清晰易讀。
技術(shù)要求：使用HTML5、CSS3和原生JavaScript實現(xiàn)，盡量不依賴大型外部框架（除非實現(xiàn)特定復(fù)雜交互非常必要，如輪播圖可以使用輕量級庫）。
CSS樣式請直接寫在HTML文件的<style>標(biāo)簽內(nèi)，或者清晰地組織并在提示中說明。JavaScript代碼也請直接寫在HTML文件的<script>標(biāo)簽內(nèi)。
確保代碼結(jié)構(gòu)清晰、注釋必要、易于理解和修改。
請充分發(fā)揮你的創(chuàng)造力，幫我打造一個既能清晰展示多頁面結(jié)構(gòu)，又能流暢交互的移動端App原型！”
當(dāng)然，咱也沒必要指望AI一次就完美生成所有細(xì)節(jié)，那不現(xiàn)實，也沒必要。
關(guān)鍵在于迭代！
比如，Cursor 可能一開始只給了你靜態(tài)的頁面結(jié)構(gòu)，交互沒加上。咱就繼續(xù)追問：
“很好，現(xiàn)在的頁面結(jié)構(gòu)有了，請為左側(cè)導(dǎo)航欄的列表項添加點擊事件，使得點擊后右側(cè)內(nèi)容區(qū)能顯示對應(yīng)頁面的內(nèi)容。
樣式不滿意？ 繼續(xù)調(diào)教：
“當(dāng)前的配色方案有點沉悶，能幫我換成更活潑明亮的色系嗎？比如以藍(lán)色為主色調(diào)，搭配一些橙色作為點綴。”
交互想更豐富？ 咱只管大膽提要求：
比如，“我希望在商品卡片上增加一個‘加入購物車’按鈕，點擊后能有一個簡單的動畫提示，并在購物車圖標(biāo)上顯示一個角標(biāo)提示商品數(shù)量增加?！?/p>
如果有bug，直接截圖給AI，順便簡單描述下問題，Cursor很快就能修復(fù)，說真的，Claude4.0的代碼能力真的強(qiáng)的一批。
圖-??發(fā)現(xiàn)bug，直接截圖讓AI修復(fù)就行
鏡哥就是這么來回跟 Cursor “聊天”，只需幾個回個，一個像模像樣的、帶真實交互的移動端原型就出來了。
大家在文章開頭應(yīng)該也看到案例截圖了，左側(cè)是清晰的頁面導(dǎo)航，右側(cè)是模擬的手機(jī)屏幕，里面的頁面元素、跳轉(zhuǎn)交互、甚至一些簡單的動畫效果都做得有模有樣。
尤其是，用這種方式，只要咱們需求描述清晰，就能很快生成演示的原型，就算是移動端的也一樣，可以用HTML方式快速生成。
這感覺，就像是你身邊坐著一個隨叫隨到、任勞任怨、還不要工資的“前端大神”！
對咱們產(chǎn)品同學(xué)來說，我覺得至少用來演示原型是足夠了。
3、在線部署與分享
坦白說，利用AI編程做演示原型，是有些門檻，但一旦體驗之后，你真的不會再想用Axure。（事實上，也確實不再需要用的，就像鏡哥常說的一句話：打敗Axure的可能不是墨刀、figma，而是類似于Cursor、Trae的AI編程類的IDE工具）
當(dāng)然，這玩意兒做好了，咋給老板、給客戶、給開發(fā)小哥看呢？
在我們團(tuán)隊內(nèi)，通常有兩種方式：
1??直接甩給運維小哥：
咱可以直接把這個文件或者包含這些文件的文件夾丟給你們公司的運維同學(xué)，讓他們幫忙部署到測試服務(wù)器上，分分鐘給你一個URL。
這樣的話，咱們就可以用以演示原型或者給老板匯報用，當(dāng)然，還可以讓運維給你一個部署的方式，后續(xù)原型更新咱可以自主更新，就不用麻煩運維同學(xué)了。
2??利用GitHub Pages大法：
更省事兒的，如果你會用Git，直接把這個項目推送到GitHub倉庫，然后開啟 GitHub Pages 功能。
這個方法我在這文章里有過詳細(xì)介紹。（產(chǎn)品經(jīng)理用這些AI工具輔助進(jìn)行產(chǎn)品匯報，效果炸裂：Manus、Cursor、Youware…）
總之，GitHub會自動給你生成一個公開的網(wǎng)址，任何人都可以通過這個網(wǎng)址訪問你的原型。再也不用傳來傳去幾十兆甚至上百兆的Axure源文件了，也告別了“你電腦上沒裝Axure打不開”的尷尬。
其實，線上部署的方法也很多，這里咱們就不展開講了。
4、小彩蛋
你以為AI幫你把原型畫了就完事了？
事實上，AI的能力可不止于此，原型設(shè)計好了，你甚至可以反向操作，讓 Cursor 根據(jù)你這個熱乎乎的、經(jīng)過多輪“調(diào)教”已經(jīng)基本成型的原型，幫你把PRD也寫了。
你可以這么跟它說：
“老鐵，基于我們剛才一起完成的這個電商App原型（它能記住上下文的！），請幫我起草一份PRD文檔。
文檔需要包含以下主要章節(jié)：
需求背景與目標(biāo)：簡述為什么要做這個App，要解決什么用戶痛點，期望達(dá)到什么業(yè)務(wù)目標(biāo)。
用戶畫像與用戶故事：描述核心目標(biāo)用戶特征，并為每個主要功能模塊編寫對應(yīng)的用戶故事（As a [用戶類型], I want to [動作], so that [價值]）。功能列表（Scope）：詳細(xì)列出原型中涉及的所有功能點，可以按模塊劃分。
頁面流程圖描述：針對核心用戶路徑（如用戶注冊登錄、瀏覽商品、下單支付等），用文字描述其流程步驟。（雖然它不能直接畫圖，但它可以幫你梳理邏輯，你再用專業(yè)工具畫圖就快多了）
各頁面詳細(xì)說明：針對原型中的每一個頁面，描述其包含的UI元素、信息展示、交互邏輯、特殊狀態(tài)（如空狀態(tài)、錯誤狀態(tài)）等。
非功能性需求：例如性能要求、兼容性要求、安全性考慮等（這部分它可以給一些通用建議）。
請注意，PRD的語言風(fēng)格要專業(yè)、嚴(yán)謹(jǐn)、清晰。如果某些信息原型中沒有明確體現(xiàn)，你可以先留空或提出疑問?！?/p>
當(dāng)然，如果你公司有固定的PRD模板（比如Word模板），你甚至可以把模板的章節(jié)結(jié)構(gòu)、關(guān)鍵標(biāo)題，甚至導(dǎo)航窗格的截圖，告訴 Cursor，讓它盡可能按照你的格式來輸出。
你看，這簡直就是一站式的產(chǎn)品設(shè)計AI好幫手啊，從模糊的想法到可交互的原型，再到結(jié)構(gòu)化的PRD初稿，一條龍服務(wù)，幫你把那些最耗時、最重復(fù)的“體力活”都干了！
OpenAI的創(chuàng)始人山姆·奧特曼曾說過一句話，鏡哥我深以為然：“所有重復(fù)性的工作、體力性的工作都值得用AI來代替?！?這句話對于咱們產(chǎn)品經(jīng)理來說，尤其實用。
捫心自問，咱們產(chǎn)品經(jīng)理最重要的核心競爭力是啥？是畫得一手多么像素級精準(zhǔn)的線框圖嗎？是寫得一手多么辭藻華麗的PRD嗎？都不是！
最核心的其實是我們對用戶的深刻理解、對業(yè)務(wù)的敏銳洞察、對市場趨勢的精準(zhǔn)把握，以及將這些洞察轉(zhuǎn)化為可行產(chǎn)品的創(chuàng)新能力和組織協(xié)調(diào)能力！
原型設(shè)計、PRD撰寫，這些在傳統(tǒng)工作流中占據(jù)了我們大量時間的環(huán)節(jié)，說實話，很多時候就是在做“搬磚”的體力活。
一遍遍地拖拽控件、調(diào)整像素、復(fù)制粘貼、碼字排版……這些重復(fù)性的勞動，不僅消耗了我們寶貴的時間和精力，更容易讓我們陷入細(xì)節(jié)的泥潭，而忽略了更宏觀的戰(zhàn)略思考。
現(xiàn)在，AI這個“天降神兵”來了！它就像一個擁有十八般武藝的超級助理，可以把我們從這些繁瑣的、重復(fù)性的工作中解放出來。
圖-??利用cursor，反推編寫PRD
咱們?nèi)绻堰@些“體力活”都交給AI，我們就能把更多的時間和腦力，投入到真正創(chuàng)造價值的環(huán)節(jié)：更深入地和用戶溝通，去挖掘他們最真實的需求和痛點；更全面地分析市場和競品，去尋找差異化的競爭優(yōu)勢；更系統(tǒng)地思考產(chǎn)品戰(zhàn)略和商業(yè)模式，去規(guī)劃產(chǎn)品的長遠(yuǎn)發(fā)展。
這看似只是產(chǎn)品設(shè)計過程中的一小步工具革新，但鏡哥我覺得，這絕對是咱們產(chǎn)品人自我革命的一大步！
AI不是要取代你，而是要解放你！
咱們也不能被AI取代，而是要學(xué)會駕馭AI，讓AI成為我們延伸自己能力、提升工作效能的“外掛”。
時代在變，工具在進(jìn)化，我們產(chǎn)品經(jīng)理的技能樹也必須跟著迭代升級。沒必要死守著那些低效的“傳統(tǒng)手藝”了，趕緊去試試這些新的AI工具，去感受一下效率起飛的快感吧！
即刻出發(fā)，擁抱AI，讓AI成為我們的超級助理，而不是未來的競爭對手。
本文由人人都是產(chǎn)品經(jīng)理作者【產(chǎn)品大峽谷】，微信公眾號：【產(chǎn)品大峽谷】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
能給個下載地址嗎
建議做更多調(diào)研，現(xiàn)在市面上很多軟件原型的設(shè)計效果并不像描述中如此
最近試用了 Canvas 的 AI 輸出原型的效果也挺不錯???? 主要他們本身就是做簡報模板起家的，美感杠杠的！
求下載
從時間效率上來講，相當(dāng)于把畫原型、寫需求文檔的時間用于調(diào)試提示詞對話了。實際上會不會調(diào)試提示詞的時間反而大于畫原型，寫文檔的時間呢？從使用場景上來講，大型項目還是要走傳統(tǒng)的原型+設(shè)計+開發(fā)模式，主要使用場景可能用在小型項目、臨時項目、小型團(tuán)隊多項目布局場景。
我就是你說的這樣，最近公司要求用trae畫原型，里面就有Claude-4的模型，但是我得先輸出一份文字版的文檔給他，只單純的描述根本達(dá)不到預(yù)期的交互要求，之后就進(jìn)入了反復(fù)的調(diào)試。我做一個極其簡單的排班界面，前前后后調(diào)了一下午，一個基礎(chǔ)的時間選擇窗口都沒調(diào)好，有這個時間我一套系統(tǒng)的原型都畫完了。。。。當(dāng)然，不排除我沒訓(xùn)練好它
我最近在研究 AIGC 方向，AI畫原型單純通過prompt去實現(xiàn)現(xiàn)階段不太可能
從技術(shù)層面看，得對大模型做微調(diào)，往里面喂產(chǎn)品相關(guān)的知識 —— 而且不同賽道的產(chǎn)品知識差異很大，甚至可能還需要做強(qiáng)化學(xué)習(xí)；同時，還得針對不同行業(yè)的原型需求，專門編寫對應(yīng)的 prompt。整個過程其實挺漫長的。
而這還只是技術(shù)問題，更沒涉及到商業(yè)層面的核心：畫原型的需求，到底有沒有足夠的市場和用戶，能支撐起研發(fā)成本？現(xiàn)階段來看我覺得挺難的
痛苦的不是畫原型，而是老板基于個人偏好提了一堆稀奇古怪的交互問題和展示問題，絲毫不顧設(shè)計邏輯