Claude 3.7模型發(fā)布后，寫代碼能力又上了一個新的臺階。我們完全可以借助AI工具的結(jié)合，完成我們APP原型設(shè)計的很多工作。這篇文章，我們看看作者分享的經(jīng)驗和方法。

“客戶要的App原型圖明天就要交稿，但設(shè)計師請假了？”
“又要改需求，這下得重新設(shè)計十幾個界面，熬夜嗎？”
“小項目沒預(yù)算請專業(yè)設(shè)計師，自己畫的原型丑到不忍直視怎么辦？”

如果以上場景你似曾相識，那這篇文章可能會讓你驚喜萬分——因為強大的Claude 3.7模型正悄悄改變著UI/UX設(shè)計的游戲規(guī)則。無需設(shè)計背景，無需Figma技能，只需一段提示詞，就能生成足以讓人驚艷的高保真原型UI，甚至可以直接導(dǎo)入Figma進行深度編輯！

一、一段提示詞，生成完整App原型

傳統(tǒng)的App原型設(shè)計需要專業(yè)的設(shè)計技能、復(fù)雜的工具操作和大量的時間投入。而現(xiàn)在，借助Cursor+Claude 3.7的組合，一段精心設(shè)計的提示詞就能完成這一切。

提示詞模板

我想開發(fā)一個類似外賣APP「餓了么」，APP叫「死了么」，用于養(yǎng)老的，每天問一句，以防獨自一個人死在家里沒人發(fā)現(xiàn)。APP也有騎手，哪里有人死了就去接單收尸。 注意這是專門為獨居90后的年輕人設(shè)計的。風(fēng)格要求清新好看、APP內(nèi)的文案多用搞怪的網(wǎng)絡(luò)用語。
現(xiàn)在需要輸出高保真的原型圖，請通過以下方式幫我完成所有界面的原型設(shè)計，并確保這些原型界面可以直接用于開發(fā)：
1、用戶體驗分析：先分析這個 App 的主要功能和用戶需求，確定核心交互邏輯。
2、產(chǎn)品界面規(guī)劃：作為產(chǎn)品經(jīng)理，定義關(guān)鍵界面，確保信息架構(gòu)合理。
3、高保真 UI 設(shè)計：作為 UI 設(shè)計師，設(shè)計貼近真實 iOS/Android 設(shè)計規(guī)范的界面，使用現(xiàn)代化的 UI 元素，使其具有良好的視覺體驗。
4、HTML 原型實現(xiàn)：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他開源 UI 組件）讓界面更加精美、接近真實的 App 設(shè)計。拆分代碼文件，保持結(jié)構(gòu)清晰：
5、每個界面應(yīng)作為獨立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
– index.html 作為主入口，不直接寫入所有界面的 HTML 代碼，而是使用 iframe 的方式嵌入這些 HTML 片段，并將所有頁面直接平鋪展示在 index 頁面中，而不是跳轉(zhuǎn)鏈接。
– 真實感增強：?
 – 界面尺寸應(yīng)模擬 iPhone 15 Pro，并讓界面圓角化，使其更像真實的手機界面。
? – 使用真實的 UI 圖片，而非占位符圖片（可從 Unsplash、Pexels、Apple 官方 UI 資源中選擇）。
? – 添加頂部狀態(tài)欄（模擬 iOS 狀態(tài)欄），并包含 App 導(dǎo)航欄（類似 iOS 底部 Tab Bar）。
請按照以上要求生成完整的 HTML 代碼，并確保其可用于實際開發(fā)。

開頭第一段就是你想法的描述。

提示詞by @花叔

操作步驟

1. 打開Cursor編輯器（確保版本足夠新，支持Claude 3.7）
2. 選擇編輯Agent模式
3. 選擇Claude 3.7 Sonnet作為模型，最好是用thinking
4. 粘貼上述提示詞，填入你需要的App類型
5. 等待生成完成，可能需要3-5分鐘

注意，如果代碼生成過程中被截斷，不要慌張，讓模型繼續(xù)完成，或者點擊創(chuàng)建文件后再繼續(xù)生成。

例如，我生成一個網(wǎng)上經(jīng)?？吹降腁PP「死了么」

自動生成的項目結(jié)構(gòu)

二、原型生成的核心技巧

與上一篇文章的方法相比，這個方法產(chǎn)生的效果雖然不說非常驚艷，但在工作流上，更貼合實際APP的生產(chǎn)以下是幾個關(guān)鍵因素：

1. 文件拆分與集中展示

1.0 將所有界面代碼放在一個巨大的HTML文件中，這不僅容易導(dǎo)致生成失敗，還難以維護。而拆分為多個HTML文件，并通過iframe在index頁面集中展示，解決了這個問題。

2. 設(shè)計規(guī)范與真實感

提示詞中特意要求遵循iOS/Android設(shè)計規(guī)范，添加狀態(tài)欄和導(dǎo)航欄，甚至模擬設(shè)備的圓角，這些細(xì)節(jié)極大提升了原型的真實感。

3. 真實圖片資源

使用Unsplash等開源圖片資源，而非占位符圖片，讓原型更加生動。

但這還不是全部！雖然這些原型已經(jīng)足夠高保真，但如果你想進一步編輯和完善它們呢？這就是Figma登場的時候了。

三、將HTML原型導(dǎo)入Figma

生成的HTML原型雖然精美，但修改起來需要編輯代碼，對非技術(shù)人員不友好。而Figma是設(shè)計師最愛的工具之一，如果能將原型導(dǎo)入Figma，就能獲得兩全其美的效果。

導(dǎo)入步驟

• 將生成的HTML文件部署到Vercel或其他靜態(tài)網(wǎng)站托管服務(wù) 如果不知道怎么把HTML部署到網(wǎng)站給別人看得，可以評論區(qū)留言，我專門出一期來講
• 在Figma中安裝HTML to Figma插件
• 在插件中輸入你部署的網(wǎng)站URL
• 插件會自動將HTML轉(zhuǎn)換為可編輯的Figma設(shè)計元素

這個方法巧妙地解決了代碼到設(shè)計的轉(zhuǎn)換問題，讓非設(shè)計師也能在Figma中自由編輯精美的UI原型。

設(shè)計民主化的新時代

Claude 3.7在UI設(shè)計領(lǐng)域的能力標(biāo)志著設(shè)計工具民主化的重要一步。任何人，無論是否有設(shè)計背景，都能通過適當(dāng)?shù)奶崾驹~生成高質(zhì)量的UI原型，再通過Figma進行精細(xì)調(diào)整。

這不是要取代設(shè)計師，而是讓更多人能夠快速實現(xiàn)想法，讓設(shè)計師專注于更有創(chuàng)意和挑戰(zhàn)性的工作。當(dāng)AI處理了重復(fù)性的界面設(shè)計工作，人類可以投入更多精力在創(chuàng)新思考上。