當我們要求 AI「建立一個現代、專業的髮型設計服務介紹及預約網站」，生成結果可能很完整：有主視覺、服務項目、設計師介紹、顧客評價與預約表單。但完整，不等於正確。
頁面看似具備所有常見區塊，卻可能把「立即預約」放在顧客尚未理解服務差異之前；用漂亮照片掩蓋價格、所需時間與髮況限制；或讓第一次染髮的使用者在多個技術名詞之間自行猜測。這些都不是單純的視覺問題，而是 AI 在缺少脈絡時，替團隊做出了產品決策。
AI 生成介面時，也正在替你做設計判斷
過去，需求文件、研究報告、流程圖與設計系統通常由人閱讀，再透過討論轉化為介面。生成式 AI 改變了這條路徑：一句自然語言便能同時產生資訊架構、內容順序、互動元件與視覺風格。
問題是，AI 不知道哪些決策是品牌刻意選擇的，哪些只是範例資料裡最常出現的模式。若只提供功能清單，它會用統計上「像網站」的方式補完缺口。結果往往可用、順眼，卻缺少對特定使用者與服務情境的理解。
什麼是 UX Context？
UX Context 不是把所有研究資料塞進提示詞，也不是更長的規格書。它是一份經過篩選、結構化、能直接影響生成結果的設計上下文：包括使用者是誰、此刻想完成什麼、有哪些疑慮、業務規則如何運作、品牌如何說話，以及哪些結果不可接受。
它的價值在於把散落於訪談、工作坊、客服紀錄與設計師腦中的「隱性判斷」，轉成 AI 能理解、團隊也能檢查的共同依據。
一份 AI-ready UX Context 應包含什麼？
1. 使用者與使用情境
不要只寫「18–45 歲、重視外表」。應說明他們在什麼時刻進入網站、已掌握哪些資訊、最擔心什麼。例如：「第一次漂髮，擔心髮質受損與最終費用，希望先了解適合的方案，再決定是否預約諮詢。」
2. 任務、決策與成功條件
AI 需要知道頁面不是為了展示所有內容，而是協助使用者完成決策。成功可能是找到適合的服務、理解價格區間、選擇設計師、完成預約，或知道何時應先諮詢而非直接下單。
3. 內容優先順序
指出資訊出現的先後與理由。髮型服務網站的漂亮作品集很重要，但若價格、時間與適用條件被藏在深層頁面，使用者仍會缺乏決策安全感。
4. 流程、狀態與例外
生成「正常狀態」很容易，真正的體驗則包含無可預約時段、服務時間跨越打烊時間、指定設計師休假、付款失敗、重複預約與取消政策。Context 應明確列出重要狀態及其回應方式。
5. 品牌原則與可驗證約束
「高級、專業」太抽象。更可用的描述是：「先提供清楚資訊，再使用說服性語言；不製造髮質一定改善的承諾；價格區間不得以『起』字模糊必要加價；主要操作在手機單手範圍內。」
| 一般提示詞 | AI-ready UX Context |
|---|---|
| 建立專業的髮型預約網站。 | 首次染髮者需要先判斷服務是否適合；在預約前顯示價格區間、所需時間、加價條件與諮詢選項。 |
| 風格要簡約、高級。 | 以作品照片建立信任，但不讓裝飾壓過價格與預約資訊；使用暖中性色、清楚層級和克制動效。 |
| 加入預約表單。 | 流程依序為服務、設計師、日期、時間、聯絡資料與確認；每一步保留已選內容並允許返回修改。 |
可直接複製：髮型設計服務網站 AI-ready UX Context
以下範例不是萬用模板，而是一個「足以讓 AI 做出較少猜測」的起點。你可以直接複製，再以自己的研究、服務資料與品牌原則取代範例內容。
# AI-ready UX Context：拾光髮研服務介紹與預約網站 ## 1. 專案目標 建立一個以手機體驗優先的髮型設計服務網站。 網站必須先協助顧客理解服務差異、費用與時間，再引導完成預約。 主要成功指標： - 使用者能在 2 分鐘內找到適合的服務。 - 預約前清楚知道價格區間、所需時間及可能加價項目。 - 預約完成後，使用者知道時間、地點、準備事項與取消方式。 - 降低因選錯服務、價格誤解或遺漏髮況資訊造成的人工確認。 ## 2. 主要使用者 ### A. 第一次染髮者 - 對漂髮、補色與護理術語不熟悉。 - 擔心髮質受損、成果不如預期及現場追加費用。 - 需要範例、淺白解釋與「先諮詢」選項。 ### B. 固定整理髮型的回訪顧客 - 已知道服務與偏好的設計師。 - 目標是快速找到可預約時段並完成預約。 - 希望能沿用上次服務，但仍要確認本次價格與時間。 ### C. 有活動期限的顧客 - 為婚禮、面試、拍攝等特定日期做造型。 - 最在意完成時間、造型維持方式與改期風險。 - 若時間不足，應明確提示更合適的服務或聯絡方式。 ## 3. 核心使用情境 - 使用者多半從社群作品連結，以手機進入網站。 - 可能只知道想要的效果，不知道服務名稱。 - 可能在通勤或休息時間操作，注意力有限。 - 使用者比較服務時，必須能同時看到效果、適用對象、時間與價格區間。 ## 4. 核心任務與優先順序 1. 依「想改善的問題或想達到的效果」尋找服務。 2. 理解服務內容、價格區間、所需時間與限制。 3. 查看設計師專長及真實作品。 4. 選擇服務、設計師、日期與時段。 5. 提供必要聯絡資料與髮況資訊。 6. 確認預約內容、政策及到店前準備。 不要先要求註冊帳號。不要在使用者理解服務前強迫進入預約。 ## 5. 資訊架構 首頁： - 一句清楚的服務承諾 - 依需求找服務 - 熱門服務摘要 - 設計師與專長 - 真實作品 - 預約前須知 - 主要預約入口 服務詳情： - 適合誰 - 可達成與不可保證的效果 - 服務包含項目 - 價格區間與加價條件 - 預估時間 - 前置諮詢需求 - 保養建議 - 預約按鈕 預約流程： 服務 → 設計師 → 日期 → 時段 → 聯絡與髮況資料 → 確認 ## 6. 服務資料規則 每項服務必須包含： - 服務名稱 - 以使用者語言撰寫的一句摘要 - 適用需求 - 不適用或需先諮詢的情況 - 價格區間 - 可能加價原因，例如髮長、髮量或指定產品 - 預估時間 - 是否包含洗髮、剪髮、護理與造型 - 可預約的設計師層級 - 作品範例 價格不得只顯示「NT$2,000 起」而不說明常見加價條件。 ## 7. 預約流程規則 - 每一步只要求當下必要資訊。 - 頂部顯示進度與已選內容摘要。 - 返回前一步時保留所有輸入。 - 選擇服務後，只顯示可執行該服務的設計師。 - 選擇設計師後，只顯示其可用時段。 - 時段必須包含服務時間與必要緩衝，不得跨越營業時間。 - 無可用時段時，提供更換設計師、其他日期或候補通知。 - 最終確認頁必須顯示完整價格區間、預估時間、店址與取消政策。 - 送出後顯示成功狀態，並提供加入行事曆與聯絡店家的選項。 ## 8. 髮況資料與隱私 只詢問會影響服務判斷的資料： - 目前髮長 - 最近一年是否漂髮、染黑或燙髮 - 頭皮敏感或已知過敏 - 期望效果與參考照片（選填） - 顧客希望設計師特別注意的事項（選填） 在上傳照片前說明用途、保存方式及誰能查看。 不要要求與服務無關的個人資料。 ## 9. 重要狀態與錯誤處理 必須設計： - 尚未選擇 - 載入中 - 查無時段 - 時段剛被他人預約 - 表單欄位錯誤 - 照片上傳失敗 - 付款或訂金處理失敗 - 預約成功 - 改期與取消成功 - 系統暫時無法使用 錯誤訊息必須說明發生什麼、資料是否保留，以及下一步可做什麼。 不可只顯示「發生錯誤，請重試」。 ## 10. 內容與語氣 品牌個性：專業、坦白、溫暖、不批判外貌。 使用顧客熟悉的語言，必要術語後立即提供解釋。 先說明選擇與限制，再使用推廣語句。 避免： - 保證結果 - 製造容貌焦慮 - 模糊價格 - 過度使用「頂級、完美、蛻變」等空泛形容詞 按鈕文案使用明確動作： - 「查看服務與價格」 - 「選擇設計師」 - 「查看可預約時段」 - 「確認預約」 不要只使用「了解更多」或「下一步」。 ## 11. 視覺與互動原則 - 視覺重點是髮型作品與決策資訊，不是裝飾性效果。 - 採暖中性色、清楚排版層級與充足留白。 - 作品照片維持真實膚色，不套用影響髮色判斷的濾鏡。 - 動效必須短且有功能，例如回饋狀態變化；尊重 prefers-reduced-motion。 - 不使用自動播放影片、干擾閱讀的視差或不必要的浮動視窗。 - 主要操作在手機上容易單手點擊，觸控目標至少 44 × 44 px。 ## 12. 無障礙需求 - 文字與背景符合 WCAG AA 對比。 - 所有功能可用鍵盤操作，焦點樣式清楚。 - 表單標籤持續可見，不以 placeholder 取代 label。 - 錯誤訊息與欄位建立可被輔助科技理解的關聯。 - 圖片提供具資訊價值的替代文字；純裝飾圖片使用空白替代文字。 - 不以顏色作為唯一狀態提示。 ## 13. 響應式規則 - 手機優先，內容順序不依賴桌面左右位置。 - 服務比較在小螢幕改為逐項閱讀，不強迫橫向捲動。 - 預約摘要可在桌面置於側欄；手機版放在確認操作之前。 - 圖片不得裁掉髮型成果的關鍵部位。 - 主要預約操作可保持容易觸及，但不得遮住內容或系統訊息。 ## 14. 驗收標準 生成結果必須通過： - 第一次染髮者能依需求找到服務，不必先理解專業術語。 - 每項服務在預約前顯示價格區間、時間與加價條件。 - 無時段、時段衝突、上傳失敗與送出失敗都有可行下一步。 - 使用者返回修改時資料不遺失。 - 預約完成頁包含服務、設計師、日期、時間、價格區間、地址及政策。 - 手機 320 px 寬度下無非預期水平捲動。 - 僅用鍵盤可以完成整個預約流程。 - 關閉圖片後，服務選擇與預約仍可理解。 - 介面不包含無法由上述 UX Context 說明用途的區塊。 ## 15. 生成輸出要求 請先輸出： 1. 關鍵使用者旅程 2. 頁面與內容層級 3. 重要狀態清單 4. 對應上述驗收標準的設計決策 確認後再生成介面。 若資訊不足，列出問題，不要自行假設價格、政策或可用時段。
Prompt 與 Context 的差別，不只是長度
好的 Prompt 仍然重要，它負責定義這次任務與輸出形式；Context 則提供跨任務保持一致的依據。團隊可能先請 AI 產生資訊架構，再產生服務頁、預約流程與錯誤狀態。若每次都只靠臨時提示，設計原則很容易漂移。
因此，UX Context 更接近可以持續維護的設計資產。當研究發現、服務政策或品牌語氣改變時，先更新 Context，再讓後續生成結果共同採用。
從 Handoff 走向持續策展
設計師的角色不會因 AI 能生成畫面而消失，反而從「交付完成的畫面」擴展到「策展生成條件」。工作重點包括選擇有效證據、明確化判斷、揭露假設、定義驗收標準，並持續評估 AI 產出的偏差。
這也讓設計交付物產生變化：除了設計稿與元件庫，團隊還需要能被人與 AI 共用的 Context、範例、反例、狀態模型與品質檢查清單。
Context 不能取代使用者研究
結構化文件會讓假設看起來很有把握，但格式完整不代表內容正確。若 Context 只是由團隊臆測，AI 只會更一致地放大那些臆測。因此，每個重要敘述最好標示它來自研究、營運規則、分析資料，還是尚待驗證的假設。
- 研究洞察附上來源與日期
- 區分事實、決策與假設
- 記錄衝突需求及取捨理由
- 設定 Context 的維護負責人
- 以真實任務測試生成結果
- 保存反例，避免模式回歸
不是寫更長的提示，而是提供更好的上下文
開始不需要建立龐大的文件庫。選一個高價值流程，整理五件事：使用者此刻的目標、最大的疑慮、必要資訊、重要例外，以及可驗證的完成標準。把它交給 AI 生成，再觀察哪些錯誤來自 Context 缺口。
真正成熟的 AI 設計流程，不是讓模型一次猜中，而是讓團隊能看見它依據什麼做決定，並有系統地修正這些依據。
常見問題
UX Context 和設計系統有什麼不同？
設計系統主要規範元件、樣式與互動模式；UX Context 補上使用者、任務、內容、業務規則和判斷理由。兩者搭配，AI 才能同時維持一致性與情境適切性。
UX Context 是否就是一個超長 Prompt？
不是。Prompt 描述當下任務，Context 是可重複使用、可維護的依據。它應結構清楚、只保留會影響決策的資訊，並可被多個生成任務引用。
需要把所有研究資料都交給 AI 嗎？
不需要。先整理洞察、證據強度、例外與設計含義；避免輸入無關內容或不必要的個人資料。敏感研究資料也應先匿名化並依組織政策處理。
如何知道 Context 寫得夠不夠好？
用它完成具體生成任務，再以驗收標準檢查結果。若 AI 不斷做出同類型錯誤，通常代表 Context 缺少規則、狀態、優先順序或反例。
小型團隊也需要 UX Context 嗎？
需要，但可以很精簡。從一頁式文件開始，記錄核心使用者、主要任務、內容層級、關鍵限制與五到十項驗收標準，就能降低大量反覆溝通。