Day9-登入系統原型設計：AI協作的第一個成功案例
昨天我們花了大量時間建立iPad設計規範和Project Knowledge記憶系統，今天是時候驗證這套方法論的實用性了。我選擇登入系統作為第一個測試案例，原因很簡單：登入是所有功能的入口，如果連這個最基礎的頁面都無法透過AI協作產出理想結果，那後續的複雜頁面更不用談了。
更重要的是，登入系統看似簡單，但在iPad門市情境下卻有許多細膩的設計考量，正好可以測試我們建立的記憶系統是否真的能讓AI理解這些特殊需求。
登入系統的門市特殊需求分析
在開始AI協作之前，我先分析了登入系統在iPad門市環境的獨特挑戰：
雙重使用者考量
最大的挑戰是「店員操作，客戶觀看」的雙重情境。店員需要在客戶面前登入系統，但客戶不應該看到敏感的登入資訊，特別是帳號密碼。這就需要設計一個既方便店員操作，又能保護隱私的解決方案。
多重登入方式的平衡
基於實際需求，我們需要兩種登入方式：
- Google登入：作為主要登入方式，適合所有員工日常使用
- 隱藏帳密登入：透過點擊logo觸發，提供備用方案
這種設計既保持了介面的簡潔（客戶只看到乾淨的Google登入），又確保了系統的可靠性（網路問題時仍可使用帳密登入）。
AI協作實戰：從Prompt到成果
現在來看看實際的AI協作過程。基於昨天建立的記憶系統，我設計了這樣的Prompt：
精準的Prompt設計
根據iPad設計規範.md，設計一個適合門市使用的登入系統界面。
具體需求：
- 使用情境：店員在客戶面前操作iPad有可能會進行登入，但不需要頻繁登出入
- 主要登入方式：Google登入按鈕（大且明顯）
- 隱藏登入方式：點擊logo可觸發傳統帳密登入
- 客戶隱私：避免客戶看到敏感登入資訊
- 觸控要求：按鈕48px以上，適合站立操作
- 品牌元素：集成Mr.Living的品牌識別
請產出完整的HTML原型，包含兩種登入狀態的切換。
AI的理解與回應
Claude基於Project Knowledge中的設計規範，產出了一個超出期待的設計：
設計亮點：
- 簡潔的預設界面：只顯示品牌logo和Google登入按鈕，客戶看到的是專業且乾淨的畫面
- 智慧的隱藏機制：點擊logo後才顯示帳密輸入區域，並有明確的「返回」選項
- iPad適配的尺寸：所有觸控元素都符合48px以上的標準，字體大小適合客戶觀看
- 狀態記憶功能：包含「記住登入狀態」選項，符合門市不頻繁登出的需求
協作中的微調過程與現實挑戰
Claude的第一版產出已經相當完整，但在實際測試後，我遇到了一些AI協作的現實限制：
遇到的問題：
- Claude無法直接使用我提供的logo.png檔案
- 點擊logo觸發隱藏登入功能時出現版面跑版問題
- 預設使用的橘色線條不符合品牌識別，需要改為#2B66FF
Claude的回應：
當我提出這些問題時，Claude建議我下載HTML檔案，然後手動置換logo。但這不是我預期的協作方式 – 我希望能在對話中直接除錯和調整。
協作模式的調整：
發現無法在Claude中進行即時除錯後，我決定將工作流程調整為：Claude負責提供大方向和基礎雛形，然後轉移到Cursor進行精細調整和除錯。
成功驗證：方法論的有效性證明
這次登入系統的設計協作完全驗證了Day8建立方法論的有效性：
記憶系統的價值體現
最明顯的改變是，我不需要重新解釋「為什麼按鈕要48px」、「為什麼要考慮客戶觀看體驗」等基礎概念。Claude能直接從Project Knowledge中提取相關規範，讓我們能專注在具體的功能設計上。
Prompt品質的顯著提升
有了成功模板的參考，我的Prompt變得更加精準。從「描述功能需求」升級為「指定設計情境」，AI的理解準確度和產出品質都有明顯提升。
協作效率的大幅改善
整個登入系統的設計協作，從需求分析到最終原型，只花了不到一個小時。相比之前需要反覆解釋基礎概念的情況，效率提升了至少3倍。
累積經驗的可複製性
這次成功的協作過程，我已經記錄在Project Knowledge中，成為下一個頁面設計的參考模板。這種經驗累積的機制，正是AI時代工作方式的核心價值。
登入系統的設計協作讓我發現了AI工具的真實定位：Claude擅長架構思考和雛形設計，但精細調整仍需要專業開發工具。這種「AI + IDE」的混合協作模式，可能是當前最實用的工作方式。