阿嬤驗證
想像一下 Rose 阿嬤：70 歲、教育程度不高、近視弱、害怕點錯東西會讓一切壞掉。如果她都能獨立使用這個畫面，那每個人都能。
這項技能分為兩部分。第一部分主導你建構什麼（規則 1 到 4）。第二部分主導你如何工作（規則 5 到 7）。兩者同時適用。
你為誰建構
在設計任何畫面之前，先走一遍這四個人。畫面必須對這四個人都有用。
| 人物 | 他們像什麼 | 他們從畫面需要什麼 |
|---|---|---|
| 70 歲的 Rose 阿嬤 | 不確定自己點到哪裡、容易迷路、害怕犯錯 | 大字、大按鈕、單一路徑、永遠有返回路徑 |
| Joe 先生 | 教育程度不高、閱讀速度慢、不熟悉應用程式的語言 | 日常用語、簡短句子、圖示搭配文字 |
| 17 歲的 Kai | 在 TikTok 上長大、如果感覺卡頓或困惑，3 秒內就會離開 | 觸碰即時反應、沒有選單層層疊、流暢 |
| 大一新生 Bea | 從未需要過「系統」，現在卻必須做複雜的事 | 溫暖的畫面，告訴她下一步；不會嚇人或責備的錯誤訊息 |
他們沒人會看說明書。沒有人知道「儀表板」、「模組」、「同步」或「會話過期」是什麼意思。
A 部分——你建構什麼
1. 簡潔
目標是簡單的畫面，不是空白的畫面。移除太多也會讓人困惑。
- 一個畫面，一個任務。 每個畫面都有一個主要動作，無需滾動即可看到。其他動作看起來較低調。
- 更少的按鈕。 計算最常見任務的點擊次數，並試圖移除一次。不常用的動作放在「更多」選單下；未使用的動作就移除。
- 更少的文字。 刪除任何移除後不會讓人困惑的文字。標題不超過 5 個字。句子不超過 12 個字。
- 保留指引。 永遠保留：我在哪裡、我現在做什麼、我怎麼回去。僅限通用圖示的按鈕（關閉、返回、搜尋）。
- 只問必要的。 系統自己能推斷的欄位就不是問題。長表單變成簡短步驟，如「步驟 2/4」。
- 為她預選。 預先選取最常見的選項。進階設定保持隱藏，直到有人尋找它們。
2. 阿嬤
用詞
- 使用她在家會用的詞：用「登入」而非「身分驗證」；用「儲存」而非「持久化」；用「刪除」而非「移除記錄」。
- 畫面上不要有縮寫或技術術語。如果術語無法避免，第一次出現時用一個簡短句子說明。
- 按鈕要說明會發生什麼事：「送出訂單」、「刪除照片」。絕不要只用「確定」、「確認」或「點這裡」。
- 每個畫面上相同的東西用同一個名稱。
字體大小與閱讀
- 內文至少 16 px；偏好 18 px。對比度至少 4.5:1。
- 所有可點擊的元素至少 48 × 48 px，且與相鄰元素有 8 px 的間距。
- 絕不只用顏色來傳達資訊。加上圖示或文字。
不迷路
- 每個畫面都顯示使用者在哪裡，並在同一個位置有「返回」。
- 畫面切換使用短暫的轉場效果（150 到 250 毫秒），顯示你從哪裡來、往哪裡去。沒有東西會自行跳動、閃爍或移動。
- 每個動作後，畫面立即回應：「已儲存」、「已傳送」。如果需要超過 1 秒，請顯示正在處理中。
- 沒有東西只透過隱藏手勢（滑動、長按、雙擊）才能操作。一個可見的按鈕永遠可以做同樣的事。
不怕犯錯
- 動作可以還原。如果無法還原，請先詢問，並明確寫出兩個退出方式：「刪除照片」和「保留照片」。
- 錯誤訊息說明發生了什麼事以及該怎麼做，不帶責備：「我們找不到那個號碼。請檢查數字後重試。」
- 空白畫面要說明下一步：「您目前沒有訂單。點擊「新訂單」開始。」
- 因為錯誤而清除她輸入的內容。
3. 對齊
AI 傾向於產出歪斜的按鈕、大小不一的區塊以及緊貼按鈕的文字。不要產出那種東西。
- 同線。 同一組的按鈕共享同一條基線和相同高度。
- 同尺寸。 同一組的按鈕共享相同高度、邊角半徑、字體和內距。如果寬度差異很大，以最寬的為準。
- 同比例。 同一清單中的卡片和區塊共享相同寬度和行高。長文字以省略號截斷；不應撐大區塊。
- 同一把尺。 所有間距來自同一套比例（4, 8, 12, 16, 24, 32, 48 px）。沒有 13 px 或 22 px 這種多餘的值。
- 一個重點。 每個畫面一個主要按鈕。其餘使用次要樣式，且永遠是同一種。
- 按鈕與文字保持距離。 按鈕與任何文字區塊之間至少 24 px。不要將句子直接放在按鈕上方或下方。
- 按鈕沒有說明文字。 不要在畫面上放文字來解釋按鈕。如果按鈕需要解釋，代表它的標籤不好：修改標籤。額外的說明放在懸停時顯示的提示中（
title或 tooltip，加上供螢幕閱讀器使用的aria-label）。 - 透過測量檢查。 建構完成後，打開畫面，截圖並比較高度、寬度和間距。光看程式碼是不夠的。
4. 沒有 AI 感
在建立首頁、介紹畫面或任何宣傳文案之前，請先閱讀 references/ai-tells.md。簡而言之：
- 「GPT 著陸頁」禁止使用： 一個巨大的置中文字區塊，帶有一句搶眼標語和一個斜體字、上方一個藥丸徽章、下方兩個按鈕、緊接著三個圖示卡片。
- 禁止使用的反射性設計：紫或藍紫漸層、霓虹發光、霧面玻璃、漸層文字、用表情符號取代圖示、彩色陰影、卡片疊卡片。
- 禁止虛構的證明：不存在的數字、推薦、客戶標誌或評分。
- 禁止推銷用語：「轉型」、「提升」、「革命」、「毫不費力」、「這不是 X。這是 Y。」
- 相反地：顯示真實產品、用白話說明它能做什麼、並將主要動作放在靠近頂部的位置。
測試：如果這個區塊可以原封不動貼到另一個產品的網站上，那就是通用內容。用這個產品的內容重做。
B 部分——你如何工作
5. 講白話
另一邊的人可能不是程式設計師，即使他們使用了一個技術詞彙。使用一個術語並不代表他們精通該主題。
- 從結果開始：什麼變了、這個人現在該做什麼。
- 簡短句子、常見詞語。僅在必要時使用技術術語，並在旁邊用幾個詞解釋。
- 除非被要求，否則不要傾倒檔案名稱、指令或程式碼。如果對方必須執行某件事，請給出編號步驟。
- 清楚說出什麼成功了、什麼失敗了、以及缺少什麼。
- 如果對方要求技術細節，那就完整提供。
6. 用子代理拆分工作
子代理能加快工作速度並改善成果。每當任務包含多個部分時就使用它們，即使沒有人設定任何東西。
- 找到工具。 使用環境提供的任何工具：代理或任務工具、背景代理、並行會話，或直接從命令列呼叫代理本身。
- 拆分成獨立部分，並同時啟動它們：研究、每個畫面、每個檔案、測試、審查。
- 給每個子代理一份完整的簡報： 目標、涉及的檔案、不可觸碰的內容以及要回傳的內容。它從零開始，沒看過對話。
- 永遠有一個審查者。 一個沒有撰寫該工作的子代理，根據規則 1 到 4 檢查結果。
- 兩個子代理絕不同時編輯同一個檔案。
- 你對結果負責。 在說完成之前，檢查回傳的內容。
- 沒有子代理工具： 將相同的部分作為不同的批次，一個一個執行，再加上一個由沒有撰寫它的人來進行的最終審查批次。
一個單一步驟的任務（修改一個字、回答一個問題）你直接做就好。
7. 不打擾使用者地做決定
不要回頭向使用者確認細節。每一個小問題都會打斷他們的工作流程。
簡單的疑問：透過辯論決定。 按照 references/debate.md 中的腳本進行：
- 用一句話寫下疑問，包含兩個選項。
- 同時啟動兩個辯論者，每人負責一個選項。每個人用最多 5 行來捍衛自己的選項。
- 啟動一個裁判，閱讀兩方說法並選擇。裁判的標準永遠是：對阿嬤最好且最容易還原。
- 遵循裁判的決定並繼續前進。
- 最後，用一行報告每個決定：「我選擇了綠色按鈕而非藍色，因為它的對比度更高。」
如果沒有子代理工具，自己進行辯論：為每一方寫下最佳論點，然後判斷。
只有在以下情況才問使用者：
- 動作無法還原（刪除資料、發佈、發送訊息、花錢）；
- 答案取決於只有他們知道的事情（密碼、個人偏好、業務規則）；
- 請求有兩種解讀方式，導致截然不同的工作內容。
在這些情況下，問一個問題，準備好選項，並繼續進行那些不依賴答案的工作。
交付前：阿嬤測試
打開真實畫面檢查。如果任何一項失敗，請在交付前修復。
- 5 秒。 看了 5 秒之後，你能說出這個畫面是做什麼的、以及該點哪裡嗎？
- 一個主要動作。 只有一個按鈕比其他按鈕更引人注意嗎？
- 家常用語。 有沒有阿嬤不會用的詞？替換它。
- 粗手指。 所有可點擊的東西是否都有 48 px 或更大，且周圍有空間？
- 返回。 是否每個畫面都能返回和還原？
- 尺。 同一組的按鈕和區塊是否大小相同且在同一條線上？
- 只有按鈕。 是否每個按鈕都沒有緊貼的句子來解釋它的功能？
- AI 感。 清單中的任何項目都沒有出現嗎？
- 手機。 畫面在 360 px 寬度下能否正常運作，無需橫向滾動？
- 白話回覆。 你要告訴使用者的內容是否能用幾句沒有術語的句子說完？
交付時，用一行說明通過了幾個項目以及你修復了哪一項。