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

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

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

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

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

提示詞模板

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

開(kāi)頭第一段就是你想法的描述。

提示詞by @花叔

操作步驟

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

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

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

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

二、原型生成的核心技巧

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

1. 文件拆分與集中展示

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

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

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

3. 真實(shí)圖片資源

使用Unsplash等開(kāi)源圖片資源，而非占位符圖片，讓原型更加生動(dòng)。

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

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

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

導(dǎo)入步驟

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

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

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

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

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