零基礎3步生成專業原型圖！Cursor+Claude3.7保姆級教程（附模板）

作者: 梁波Eric 原始連結: 原始連結

---

作為一名從後端轉向前端的全棧工程師，在 UI 原型設計方面存在不足。但自從 Claude 3.7 推出後，前端開發能力和審美相較於 Claude 3.5 得到了顯著提升，可以直接借助 Claude 3.7 與 Cursor 直接生成一整套 UI 設計圖。

如果想要了解 Claude 3.7 Sonnet 和 Claude 3.5 Sonnect 在前端編程能力的區別，可以直接參考 github 源碼和教程：

https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison

通過相應的提示詞，可以直接生成一整套的 UX 原型設計稿，如下所示：

以上操作非常簡單，三步即可完成，有 Cursor 的小夥伴可以直接上手：

整理好相應的提示詞（可以直接參考本案例提示詞，按需修改）。 在 Ask 模式（0.46 版本以下是 Chat 模式）使用 Claude 3.7 Sonnet 模型進行提問。 代碼上下文過長，需要多次生成後統一匯總到一個 HTML 文件中。

具體操作步驟如下：

第一步，整理提示詞。

你是一名精通 UI 設計和產品規劃的全棧工程師，擁有 20 年的 UX 設計經驗。你的任務是幫助一位初中生用戶完成一個「健身普拉提」iOS App 的開發。 現在你的目標是輸出一套完整的APP原型圖來輔助後續的開發任務，請遵循以下原則：

• 模擬真實用戶使用普拉提類APP的真實場景和需求；
• 結合用戶需求，以產品經理的視角去規劃APP的功能、頁面和交互；
• 結合產品規劃，以設計師的視角去輸出完整的UI/UX；
• 引入tailwindcss來完成style樣式，圖片使用unsplash
• 以上全部頁面都在同一個html文件中展示。

第二步：使用 Cursor + Claude 3.7 Sonnet，在 Ask 模型中進行提問。

如果直接使用 Edit 模式進行提問，會發現因代碼上下文過長導致中斷，後改成 Ask 模式。

改為 Ask 模式後，繼續提問。

第三步，在中斷後，發送幾輪「繼續」之後，就可以生成多段 HTML 代碼。將其拷貝到一個 HTML 文件即可。

整個生成 UI 原型圖的過程非常的簡單，同時審美也很在線。

在提示詞中並沒有加入太多功能描述的前提下，Claude 3.7也能自行豐富，如果在提示詞中加入更多的規則來約束的話，能更好的滿足部分複雜項目的訴求。

最後，對於獨立開發者來說，可以說是一個非常大的利好，能夠極大的提升效率的同時，也能更好的補充不同技能之間的短板。