我要做一個介面，請幫我整理成一頁需求，並指出我沒想到的地方： - 使用者是誰：（例如：第一次接觸 AI 的上班族） - 他們在什麼情況下打開：（例如：通勤時用手機） - 最重要的一件事：（例如：找到一篇能照做的教學） - 次要的事：（例如：收藏、留言） - 不做的事：（明確列出，避免越做越大） 請列出 3 個最常見的使用情境，每個情境從打開到完成，使用者會經過哪些步驟。

根據上面的需求，請列出： 1. 需要哪些頁面，每頁一句話說明用途 2. 每頁由上到下要放的區塊，依重要性排序 3. 每頁最主要的一個按鈕是什麼 4. 空白狀態（還沒有資料時）每頁要顯示什麼 5. 出錯時（沒網路、沒有搜尋結果）要顯示什麼 不要給顏色和樣式，只要結構。

這是我的手機版線框。請從第一次使用的人的角度，指出： 哪裡看不懂、哪個按鈕不知道會發生什麼事、哪裡要點太多下。 每個問題給一個具體的改法。

請幫我定一套介面設計規範，用表格列出： - 顏色：主色、主色淺底、文字、次要文字、邊框、背景、成功、警告、錯誤，各給色碼 - 文字和背景的對比要符合 WCAG AA（一般文字至少 4.5:1），請算出每組的對比值 - 字級：大標題、標題、內文、說明文字，手機版內文不小於 16px - 間距：只用 4 的倍數，列出 4、8、12、16、24、32 各用在哪 - 圓角和陰影各 2 到 3 種 品牌感覺：（例如：可信賴、乾淨、不花俏）

請依照上面的頁面結構和設計規範，寫一個單一 HTML 檔的可點擊原型： - 手機優先，寬度 375px 到 1280px 都要正常 - 頁面之間可以切換，按鈕點了有反應 - 用真的文字內容，不要用 lorem ipsum - 顏色、字級、間距只能用規範裡的值，寫成 CSS 變數 - 按鈕和連結至少 44×44px，可以用鍵盤操作