【升級版】一句話生成高保真app原型圖！Cursor + Claude 3.7 Sonnet讓設計師危險了？

前兩天，在下面這篇文章裡，已經給大家介紹過透過一句話提示詞生成app原型圖，再截圖讓Cursor完成app開發的方法了。

但是在原型圖部分還存在兩個問題：

1、在一個html檔案中包含那麼多app原型介面，實在是太長了，通常是1000-3000行之間，這個程式碼量會導致無法使用agent模式工作，而常規的composer模式（cursor 0.46版本中的edit模式）也會出現1-2次程式碼生成過程被截斷的問題，甚至在0.46版本里還可能難以複製沒有生成完成的程式碼；

2、設計出的原型我覺得質量非常不錯了，但，還是有提升空間，可以更多使用真實的圖片，顯得更精美。

所以，為了解決這個問題，我這兩天做了不下20次的嘗試，浪費了300多次cursor次數，終於獲得到了如下的效果：

1. 播客應用原型設計

2. 加上社交功能的Netflix app原型設計

3. 綜合了小紅書和B站特點的社羣app原型設計

下面就是這段🪄魔法提示詞，大家自己去試試吧，注意兩點：

1）選擇Cursor agent模式；

2）選擇Claude 3.7 Sonnet模型。

我想开发一个{类似小宇宙的播客app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

中的內容是讓你自由調整的，或長或短都可以。

按我實際的體驗來說，大概50%以上的情況你都可以你是可以一次性完成所有介面的生成的，相比前一篇文章的策略來說，你會得到大概10個左右的不同程式碼檔案，但你只需要開啟index.html檔案即可，所有頁面都會在這個頁面中展示。

在部分情況下，你可能會遇到原型中有些圖片沒法正常展示的情況，你用自然語言描述清楚你看到的問題，讓Cursor進行調整就好了。

上述的提示詞看著挺魔法，尤其很多人看到我寫的一些帶有技術棧理解和表達的CursorRules或者各種提示詞後，都會不相信我居然不懂技術，居然不會寫程式碼？

所以我正好來談談我的提示詞是怎麼寫出來的，相比提供「提示詞」這種魚，我還是更喜歡授人以漁的事，希望跟你講清楚邏輯。

其實不管是寫這個生成原型的提示詞，寫cursorrules，或是和AI協作開發產品，你最需要擁有的是兩個思維：

1、你不會，但你可以學，AI是最好的老師；

2、測試&迭代。

比如，這段提示詞中關於樣式使用“Tailwind CSS（或 Bootstrap）”的要求，其實我壓根不知道這是啥，這也不重要，這只是因為我希望有更好的樣式，以及更少的程式碼量以減少cursor報錯的可能，我提目標，AI老師會給我建議解決方案的。

至於如何讓AI設計的網頁原型中能帶有真實的圖片，以及怎麼獲得更真實的接近iPhone的效果，同樣是AI告訴我的。

以及，這個過程其實還迴圈了很久，因為每次AI幫助我生成提示詞之後，我還需要去測試，實際的效果，會有各種不符合預期的情況，比如：

問題1:下面這個，雖然原型效果看起來不錯，但是網頁中只展示了一個介面，沒有把所有介面平鋪展示👇

問題2:也可能，甚至介面都展示不出來的👇

問題3:也可能得到這樣的一個導航介面👇

問題4:又或者AI選擇了下面這張，AI選擇了所謂fetch()的方案，這導致我沒法直接開啟html檔案，而需要開啟本地伺服器的（可以這麼做，但是這個策略對新手不友好。

總之，要得到一個更通用，效果更好的提示詞，需要進行非常多的測試和迭代，而且同一套提示詞，在不同模型上的變現可能很不相同。

說這些是想告訴你：

1）不懂技術也沒事，這些問題其實都可以透過自然語言解決，你也可以做到，實際上沒那麼魔法🪄

2）你需要培養和AI協作，以及不斷迭代的思維，這是利用好AI的關鍵。

以及，對於幫普通人學好AI程式設計，用AI程式設計提升工作效率，做出自己的作品我是認真的，你可以透過這個連結瞭解我的AI程式設計知識星球：https://t.zsxq.com/K3vsN （🎁 限量30元優惠券，1500+人已加入）

URL Source: https://mp.weixin.qq.com/s/xbFqY9DwTwwZskgBmeqAxA?token=1284891328&lang=zh_CN