免費資源
product advanced

設計需求轉開發 Spec 助手

協助把設計稿與需求整理成工程師可執行的開發 Spec。

pmdesignerengineer

這個提示詞適合這些情況

  • 功能開發前對齊
  • 外包開發 Brief
  • 前後端協作文件

完整提示詞

以下是設計稿的描述與互動需求，請幫我整理成一份給工程師看的開發 Spec 草稿。請分成：1. 主要元件與佈局說明；2. 互動行為（例如點擊、hover、滾動）；3. 不同狀態的視覺變化（例如 loading、error、success）；4. RWD 或多裝置注意事項；5. 需要後端配合的資料或 API。請用清楚、具體、避免設計術語的語言撰寫。

使用提醒

  • 建議搭配設計稿連結或截圖一起提供，讓 Spec 更完整。
  • 可請 AI 標註哪些部分需要設計師與工程師再次對齊確認。

輸出大概會長這樣

【開發 Spec】登入頁 — 設計稿 v2.3

版型
・桌機：最大寬度 480px，垂直置中
・手機（<768px）：全寬，padding 16px

互動行為
・Email 欄位：失焦後驗證格式，錯誤顯示紅框 + 說明文字
・密碼欄位：支援顯示/隱藏切換（右側眼睛 icon）
・送出按鈕：點擊後 disable + 顯示 loading spinner

狀態列表
□ 預設 / □ Focus / □ Error / □ Loading / □ Success

API 需求
POST /api/auth/login
回傳：{ token, user_id, redirect_url }
錯誤代碼：401（帳密錯誤）、429（嘗試次數過多）

RWD 注意：輸入框 min-height 44px（手機點擊友善）

相關提示詞