加碼實作：用 Claude Design 優化網站介面

我想改善這個課堂用牙科排班網站的介面。請先檢查目前 repo／截圖，不要直接重做，也不要交接給 Claude Code。

目標：讓負責排班的人更快看懂本週班表、休假、人力不足與同步狀態。
使用者：不懂程式的牙醫師與診所行政人員。
限制：全程只用王醫師、林醫師、陳醫師等明確虛構資料；保留「未登入 Demo／不可使用真實資料」警示；保留現有功能、資料結構、Firestore 規則與既有元件；不新增登入、HIS、病人或人事功能；不要使用浮誇漸層、過多卡片或難讀的小字。
驗收：桌機與手機都能快速找到日期、班別、休假、人力不足與同步狀態。

請先列出目前最需要改善的 5 個問題，再提出 3 個明顯不同的設計方向。每個方向請比較資訊層級、易讀性、手機表現、優點與風險，等我選擇後再建立原型。

我選擇第［填入編號］個方向。請保留這個方向並建立可互動原型，不要混入另外兩個方向。

請完成：
1. 桌機版週班表主要畫面。
2. 手機版閱讀與操作方式。
3. 正常、空白、載入、同步失敗與人力不足狀態。
4. 保留清楚可見的「未登入 Demo／不可使用真實資料」警示。
5. 使用目前 repo 已有的名稱、顏色與元件；若想新增元件，先說明原因。

完成後請用繁體中文列出：本版改善了什麼、仍有哪些限制、交接給 Claude Code 時哪些現有功能與安全邏輯絕對不能改。

請先不要再新增功能。請用初學者看得懂的方式，檢查這個原型的資訊層級、文字易讀性、顏色對比、按鈕辨識度、桌機與手機一致性，以及正常、空白、載入、錯誤與人力不足狀態。

請列出：
1. 已通過的項目；
2. 還需要修改的項目；
3. 哪些只是設計假設、必須回到真正網站驗證；
4. 哪些變更可能影響資料、Firestore Rules、同步或既有排班功能。

不要把「畫面看起來正確」當成程式已完成。

這是我已確認的 Claude Design 交接資料。請先只讀，不要修改任何檔案、不要安裝或更新套件、不要 commit、不要 push。

請比較設計原型與目前 repo，並用繁體中文回報：
1. 哪些畫面可以重用目前元件完成；
2. 預計修改的檔案與每個檔案的目的；
3. 必須保留的排班功能、合成資料警示、同步狀態與響應式行為；
4. 是否可能碰到資料結構、Firebase config、Firestore Rules、環境變數或套件版本；若會，請停止並提出不碰這些範圍的替代方案；
5. 把實作拆成最小步驟，列出每一步的 Preview 與回歸驗收。

等我確認第一個步驟後再修改。