Cursor + Claude 4 自動輸出APP設計稿，再也不需要設計師和產品經理了

作者: giscafer 原始連結: 原始連結 👤 作者: giscafer 🌐 來源: 微信公眾號

如果你已經是全棧開發工程師或者是入門了全棧，AGI可以幫助你進入真全週期工程師的角色。如果你只是某個端開發工程師（前端或者後端），AGI也可以協助你成為入門級全棧開發或獨立開發者。

全週期工程師：用戶+產品+設計師+前端開發+後端開發+測試工程師+運維+運營。

全週期工程師也可以認為是獨立開發者，自己做產品上線變現。

自動設計APP原型提示詞如下：

## 角色
你是一位資深產品經理、交互設計師、UI設計師
## 任務
本次任務的最終目標是生成一套跨平台 LeekHub Stock APP的UI設計圖，首先在當前項目目錄創建task.md文件，列舉全部待辦事項，每完成一個待辦事項就編輯task.md文件，使用✅更新對應事項的完成狀態，按照順序依次完成待辦直到所有待辦事項均變為完成狀態。
### 核心功能
- 支持最小化
- 最小化時鼠標懸浮可以查看股票漲跌細節
## 待辦事項
### 待辦事項1：產品功能設計
- 初始信息：我是你的產品設計助手，現在請你告訴我，你想開發什麼樣的產品吧~
- 分析用戶發送的信息，對不明確的細節進行追問
- 結合追問得到的答案，加以詳細描述形成【產品設計文檔.md】文件
### 待辦事項2：交互設計
結合{待辦事項1}輸出的最終功能，確定該產品包含的所有頁面，以下方示例格式輸出全部頁面的信息。
**示例格式：**
``
<頁面名稱>
用途：<頁面的主要作用>
核心功能：<列出該頁面包含的主要功能>
``
所有頁面的信息輸出完成後，更新【產品設計文檔.md】
### 待辦事項3：UI設計
- 根據【產品設計文檔.md】，同時遵守下方{UI設計風格}和{UI設計規格}，為每個設計圖創建獨立的html文件。
全部頁面的html文件輸出完成後，中斷任務，提示用戶輸出"繼續"指令
### 待辦事項4：提示用戶輸入"繼續"指令
### 待辦事項5：創建一個UI.html文件
- UI.html頁面的整體背景色為`#f6f6f6`
- 使用iframe技術將所有頁面以適當的網格排列在UI.html裡面，每個iframe的寬度固定為400px，高度固定為850px，保證每張設計圖完整顯示出來，不會被裁切或遮擋。
- iframe的背景色為`#f6f6f6`
### 待辦事項6：自檢代碼
依次檢查每個頁面的html文件：
- 檢查：強制隱藏所有滾動條
- 檢查：設計圖尺寸為 375x812PX
- 檢查：信號欄與標題欄背景色必須一致（可以都是透明）
- 檢查：圖標和其他樣式調用方式
- 檢查：底部tab欄必須為白色填充，100%不透明度
### 待辦事項7：檢查UI.html文件
檢查UI.html文件的全部代碼，刪除iframe之外的多餘裝飾性元素，每張設計圖的內部已經帶有了mock up的樣式代碼，UI.html內的iframe不需要帶有mock up的樣式，如果有也需要進行刪除。
## UI設計風格
- 優雅的清新主義美學與功能的完美平衡
- 清新柔和的漸變配色與品牌色系渾然一體
- 恰到好處的留白設計
- 輕盈通透的沉浸式體驗
- 信息層級通過微妙的陰影過渡與模塊化卡片佈局清晰呈現
- 用戶視線能自然聚焦核心功能
- 精心打磨的圓角
- 細膩的微交互
- 舒適的視覺比例
- 規範的間距
## UI設計規格
1. 單個設計圖尺寸為 375x812PX，帶有mock up模擬手機的樣式
2. 圖標：引用在線矢量圖標庫內的圖標
3. 圖片：使用Unsplash開源圖片網站鏈接的形式引入
4. 樣式必須使用`<link>`標籤引入 tailwindcss CDN來完成
5. 狀態欄顯示時間、信號等模擬信息
6. 信號欄與標題欄背景色必須一致（可以都是透明）
7. 底部tab欄必須為白色填充，100%不透明度
8. 使用固定高度防止容器變形
## 注意事項
1. mock up的顏色只能使用黑色
2. 所有html中都強制隱藏滾動條

新建一個 README.md 文檔，粘貼上邊的Prompt描述進去，可以自己進行微調。然後投餵給Cursor Chat，選擇 Claude 4 Agent 模式即可

Agent 會詢問你的想法，你可以自己提要求調整。這裡演示效果偷懶一下：

最後生成了html 靜態代碼文件，雙擊都可以在瀏覽器打開看到效果

如上圖，每個頁面是獨立的文件，我們需要單獨打開看效果，如果頁面很多，這樣就很累，所以可以讓AI生成一個總覽所有頁面效果的頁面就好

待辦事項5：創建一個UI.html文件
- UI.html頁面的整體背景色為#f6f6f6
- 使用iframe技術將所有頁面以適當的網格排列在UI.html裡面，每個iframe的寬度固定為400px，高度固定為850px，保證每張設計圖完整顯示出來，不會被裁切或遮擋。
- iframe的背景色為##f6f6f6

這樣我們打開UI.html 就有一個所有頁面效果的預覽圖

至此，UI設計稿已經設計完成了。接下來如果某個頁面不滿意就要求AI Agent去調整，調整完成後再進行第二部AI生成前後端代碼，然後本地測試運行。最後就發布上線了。

未來AGI確實可以大幅度提效，並且會取代大部分工作。我們要做的是跟進變化，熟悉和使用工具，讓我們的工作方式也帶來變化。

最難的是自己不行動起來，不去了解新事物……