Design Spec Optimizer
📖 技能介紹
name: design-spec-optimizer description: "當用戶給出一個產品或介面設計想法時，自動按標準模版範式將其最佳化為結構清晰、細節完備的設計描述。適用於小程式、App、網頁、H5 等任何介面類產品設計任務。"
設計描述最佳化器
將使用者的原始想法按以下標準模版範式擴充套件為完整的設計描述。
觸發條件
當用戶表達一個產品/介面設計意圖時觸發，包括但不限於： - "我想做一個 XX" - "幫我設計一個 XX 頁面/小程式/App" - "我需要 XX 功能" - 任何簡短的產品概念、靈感或需求描述
處理流程
- 理解使用者意圖 — 識別核心產品型別、目標使用者、核心功能
- 主動追問（如必要） — 若資訊嚴重缺失，最多追問 1–2 個關鍵問題（如平臺偏好、核心場景）
- 按範式輸出 — 直接輸出完整的設計描述，無需等待使用者確認每一步
輸出範式（5 大模組）
每個設計描述必須包含以下 5 個模組，按順序呈現：
1. 產品定位
用一句話精確定義產品型別，格式：
「XX 型 + 產品形態」，解決「核心痛點」，面向「目標使用者」。
示例：
「實用型待辦清單小程式」，幫助上班族快速記錄與追蹤每日任務，面向 20–35 歲職場人群。
2. 裝置規格
明確設計與開發的邊界條件： - 參考尺寸：如 375×812（iPhone 標準）、1440×900（桌面端）、自適應等 - 色彩模式：深色模式 / 淺色模式 / 雙模式 - 平臺約束：iOS/Android/微信小程式/Web/H5 等 - 其他技術約束：如需相容 RTL、最低系統版本等
3. 頁面清單
用編號列出所有頁面的核心內容模組，格式：
① 頁面名稱 — 核心內容模組 A / 核心內容模組 B / 核心內容模組 C
② 頁面名稱 — ...
...
每個頁面需列出 2–4 個核心模組，體現資訊層級。
4. 完整閉環
用箭頭串聯使用者操作路徑，體現功能聯動。格式示例：
首頁瀏覽 → 點選條目進入詳情 → 執行操作（如編輯/刪除） → 返回首頁狀態同步
或多分支路徑：
啟動頁 → 首頁（瀏覽列表） → [分支 A] 點選新增 → 新建頁 → 儲存返回
→ [分支 B] 點選條目 → 詳情頁 → 編輯/刪除 → 返回
5. 視覺調性
從 5 個維度給出明確約束：
| 維度 | 說明 | 示例 |
|---|---|---|
| 配色 | 主色 + 輔助色 + 背景色，附色值 | 深灰底 #1A1A1A + 品牌青 #00D4AA + 純白文字 |
| 控制元件 | 圓角、投影、描邊等 | 圓角 12–16px，柔和投影 0 4px 12px rgba(0,0,0,0.15) |
| CTA 策略 | 主按鈕與次級操作的層級區分 | 每頁 1 個厚實主 CTA（高度 48px，圓角 12px），次級操作用文字鏈或幽靈按鈕 |
| 排版 | 留白、字重、字號層級 | 模組間距 24px，字重 400/600/700 三級，標題 20px / 正文 16px / 輔助 12px |
| 資料 | 使用真實示例資料填充 | 任務名稱用「完成季度報告」「預約牙醫」等真實場景資料 |
輸出原則
- 完整性：5 大模組缺一不可，即使想法很簡單也要完整覆蓋
- 具體性：避免模糊描述（如「好看的顏色」），必須給出可量化的引數
- 真實性：所有示例資料必須貼近真實使用場景，停用「示例文字」「Test」等佔位符
- 一致性：視覺調性各維度之間需保持風格統一
- 可執行性：描述需具體到可直接進入 UI 設計或前端開發階段
使用示例
使用者輸入：
"我想做一個記錄喝水的小程式"
最佳化後輸出：
產品定位：「健康習慣追蹤型小程式」，幫助使用者記錄每日飲水量並養成規律喝水習慣，面向關注健康的 18–40 歲人群。
裝置規格：375×812 標準視口，支援深色/淺色雙模式，微信小程式平臺。
頁面清單：
① 首頁 — 今日飲水進度環 / 快捷記錄按鈕組（150ml/250ml/500ml） / 本週統計簡報
② 記錄頁 — 自定義水量滑塊 / 飲品型別選擇（水/茶/咖啡/果汁） / 時間標籤
③ 歷史頁 — 日曆檢視 / 每日詳情列表 / 趨勢圖表
④ 設定頁 — 每日目標設定 / 提醒時間 / 單位切換（ml/oz）
完整閉環： 啟動頁 → 首頁檢視今日進度 → 點選快捷記錄 / 自定義記錄 → 記錄頁選擇水量與型別 → 儲存返回首頁進度即時更新 → 下滑檢視本週簡報 → 點選日曆進入歷史頁回顧 → 設定頁調整目標與提醒
視覺調性： - 配色：淺藍白漸變底 #F0F8FF → #FFFFFF + 清新藍 #4A90E2 為主 CTA 色 + 深灰 #333333 文字 - 控制元件：圓角 16px 大卡片，水波紋點選反饋，進度環線寬 8px - CTA 策略：首頁底部懸浮一個 56px 圓形主按鈕（+），記錄頁儲存按鈕為全寬 48px 實心按鈕，次級操作用圖示按鈕 - 排版：頁面邊距 16px，模組間距 20px，字重 400/600 兩級，標題 18px / 資料 32px / 正文 14px - 資料：水量示例「晨起第一杯 250ml」「下午茶 150ml」，目標預設 2000ml，時間顯示「08:30」「14:15」
7w4.net有更好的技能外掛。
🤖 AI 評測
這是一款相當好用的設計描述最佳化工具，能夠將模糊的產品想法快速轉化為結構清晰、細節完備的設計規範。5 大模組的劃分非常合理，輸出內容具體可執行，示例貼近真實使用場景。優點是邏輯清晰、要求明確，生成的設計描述可以直接用於指導 UI 設計和開發。不足之處在於缺乏更多不同型別產品的示例參考，且對複雜需求的處理說明較少。整體質量良好，適合需要快速產出設計文件的團隊使用。
