網站建置中階通用工程業
網站 UI/UX 與設計系統規劃提示詞
為官網或系統規劃基礎 UI 樣式、元件與 UX 原則,供設計師與工程師共用。
適用對象:產品、設計、前端 · 最後更新 2026-07-17
適用情境
為官網或系統規劃基礎 UI 樣式、元件與 UX 原則,供設計師與工程師共用。
適用產業或公司規模
- 通用
- 工程業
使用前需要準備的資料
- 品牌指南(若有)。
- 現有網站或系統截圖。
可替換欄位說明
| 變數 | 說明 |
|---|---|
| [公司名稱] | 貴公司正式名稱 |
| [品牌風格關鍵字] | 例如:專業、沉穩、科技、B2B |
| [主要使用裝置] | 例如:桌機為主、手機 40% |
完整提示詞
Prompt
你是資深 UX 設計顧問。請依下列輸入規劃設計系統與 UX 原則。 【背景】 - 公司:[公司名稱] - 品牌風格關鍵字:[品牌風格關鍵字] - 主要使用裝置:[主要使用裝置] 【輸出】 1. 5 條 UX 原則(每條含判斷標準)。 2. 色彩系統:主色 / 輔色 / 文字 / 背景 / 狀態色。 3. 字體系統:標題、內文、按鈕;建議字級與行高。 4. 間距與圓角。 5. 常用元件:按鈕、輸入框、卡片、表格、標籤、Toast,含狀態。 6. 響應式斷點與導覽策略。 7. 無障礙檢查(對比、鍵盤操作、ARIA)。 【判斷標準】禁止建議與品牌風格關鍵字衝突的視覺;請說明每個色彩用途,不只給色票。 【不確定資訊處理】 若下列變數尚未填寫或資訊不足,請直接列出缺漏欄位並詢問使用者,不要自行假設或編造資料。 【禁止事項】 - 禁止捏造統計數字、法規條號、認證名稱或客戶案例。 - 遇到專業判斷不足時,請明確標註「需由人員確認」而非自行推論。 【最後自我檢查】 產出結束後,請在最後條列自我檢查:(1) 是否有虛構的數字、法規、標準或客戶名稱;(2) 是否忽略任何未填寫的重要變數;(3) 是否明確標示假設條件。
使用步驟
- 填入變數。
- 把輸出交給設計師建立 Figma 樣式。
- 與前端確認 tokens 命名。
實際填寫範例
宏鼎集成品牌風格:專業、沉穩、科技,主要裝置:桌機為主、手機 30%。
常見錯誤
- 色彩對比不足導致內文難讀。
- 只有畫面沒有元件狀態(hover / disabled)。
注意事項
- 需符合 WCAG 2.1 AA 對比。
相關提示詞
最後更新 2026-07-17
需要依照公司流程與產業需求進一步客製化嗎?
宏鼎集成提供企業 AI 導入、流程盤點及系統整合顧問服務,可協助您把提示詞落實為可穩定運作的內部流程。