網站建置中階通用工程業

網站 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) 是否明確標示假設條件。

使用步驟

  1. 填入變數。
  2. 把輸出交給設計師建立 Figma 樣式。
  3. 與前端確認 tokens 命名。

實際填寫範例

宏鼎集成品牌風格:專業、沉穩、科技,主要裝置:桌機為主、手機 30%。

常見錯誤

  • 色彩對比不足導致內文難讀。
  • 只有畫面沒有元件狀態(hover / disabled)。

注意事項

  • 需符合 WCAG 2.1 AA 對比。

相關提示詞

最後更新 2026-07-17

需要依照公司流程與產業需求進一步客製化嗎?

宏鼎集成提供企業 AI 導入、流程盤點及系統整合顧問服務,可協助您把提示詞落實為可穩定運作的內部流程。