請你在當前項目中，完整復刻我給的參考圖（三個手機界面，治癒系冥想 App 風格），並直接落地到代碼與可預覽頁面。

目標：
1) 復刻對象是我上傳的那張三聯屏參考圖（Home / Discover / Profile），不是隨意發揮。
2) 要求高還原：佈局結構、留白節奏、圓角、陰影、配色、字體氣質、卡片層級、底部導航都要儘量貼近。
3) 參考圖中的“荷花主視覺”必須復刻，不要用純佔位色塊。你可以使用你自帶的 gptimage2 生成所需插畫/素材（荷花、水面、花草等），並接入頁面。
4) 做成“可交互版本”，不是靜態海報。

交互要求（至少實現）：
- 底部 Tab 可切換 3 個頁面（Home / Discover / Profile）；
- 主要按鈕有點擊反饋（如 Start Session、See all、Log Out）；
- 進度圖表和關鍵卡片有基礎動畫（首屏進入動畫或數值過渡）；
- 響應式：桌面與移動端都能正常顯示。

技術與產出要求：
1) 先分析現有項目結構，再改代碼，不要新建無關項目。
2) 優先複用已有組件；樣式統一管理，避免重複 CSS。
3) 視覺素材（包含荷花）如用內置的gptimage2 生成，請保存到項目可訪問路徑並在頁面真實引用。
4) 完成後運行本地預覽，並做一次自檢（佈局、交互、樣式一致性）。
5) 給我最終結果時請包含：
   - 改動文件清單
   - 關鍵實現說明
   - 本地預覽地址/打開方式
   - 與參考圖仍有差異的點（如有）

執行風格：
- 直接動手實現，不要只給方案。
- 不需要再問我“要不要開始”，直接做到可預覽為止。

用於在真實瀏覽器裏打開頁面，檢查最終 UI 的響應式效果和渲染結果。
地址：https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive

先寫前端復刻代碼（結構+樣式+交互）
再用 Playwright 打開頁面、截圖、點交互
把截圖和你的參考圖對比，發現偏差再改一輪
直到接近為止

防止“它以為像了，其實不像”
可重複驗收（每輪都有截圖證據）
能檢查交互和響應式，不只是靜態外觀

把頁面推送到Figma中，遵守自動佈局，統一文字、間距、圓角等規範：（Figma文件link）
帶上figma地址https://www.figma.com/design/ACM32qe0A3BIjTKkf2rYqw/Untitled?node-id=0-1&t=UcaBjeWXzuh70hqx-1

要求：
1) 先調用 get_design_context 獲取該節點設計上下文；
2) 如果內容過大或被截斷，先調用 get_metadata 查看結構，再只提取需要節點；
3) 然後調用 get_screenshot 獲取準確截圖；
4) 完成第一版實現後，使用 Playwright 打開頁面進行驗證。

請你在當前項目中，完整復刻我給的參考圖（三個手機界面，治癒系冥想 App 風格），並直接落地到代碼與可預覽頁面。

目標：
1) 復刻對象是我上傳的那張三聯屏參考圖（Home / Discover / Profile），不是隨意發揮。
2) 要求高還原：佈局結構、留白節奏、圓角、陰影、配色、字體氣質、卡片層級、底部導航都要儘量貼近。
3) 參考圖中的“荷花主視覺”必須復刻，不要用純佔位色塊。你可以使用你自帶的 gptimage2 生成所需插畫/素材（荷花、水面、花草等），並接入頁面。
4) 做成“可交互版本”，不是靜態海報。

交互要求（至少實現）：
- 底部 Tab 可切換 3 個頁面（Home / Discover / Profile）；
- 主要按鈕有點擊反饋（如 Start Session、See all、Log Out）；
- 進度圖表和關鍵卡片有基礎動畫（首屏進入動畫或數值過渡）；
- 響應式：桌面與移動端都能正常顯示。

技術與產出要求：
1) 先分析現有項目結構，再改代碼，不要新建無關項目。
2) 優先複用已有組件；樣式統一管理，避免重複 CSS。
3) 視覺素材（包含荷花）如用內置的gptimage2 生成，請保存到項目可訪問路徑並在頁面真實引用。
4) 完成後運行本地預覽，並做一次自檢（佈局、交互、樣式一致性）。
5) 給我最終結果時請包含：
   - 改動文件清單
   - 關鍵實現說明
   - 本地預覽地址/打開方式
   - 與參考圖仍有差異的點（如有）

執行風格：
- 直接動手實現，不要只給方案。
- 不需要再問我“要不要開始”，直接做到可預覽為止。

用於在真實瀏覽器裏打開頁面，檢查最終 UI 的響應式效果和渲染結果。
地址：https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive

先寫前端復刻代碼（結構+樣式+交互）
再用 Playwright 打開頁面、截圖、點交互
把截圖和你的參考圖對比，發現偏差再改一輪
直到接近為止

防止“它以為像了，其實不像”
可重複驗收（每輪都有截圖證據）
能檢查交互和響應式，不只是靜態外觀

把頁面推送到Figma中，遵守自動佈局，統一文字、間距、圓角等規範：（Figma文件link）
帶上figma地址https://www.figma.com/design/ACM32qe0A3BIjTKkf2rYqw/Untitled?node-id=0-1&t=UcaBjeWXzuh70hqx-1

要求：
1) 先調用 get_design_context 獲取該節點設計上下文；
2) 如果內容過大或被截斷，先調用 get_metadata 查看結構，再只提取需要節點；
3) 然後調用 get_screenshot 獲取準確截圖；
4) 完成第一版實現後，使用 Playwright 打開頁面進行驗證。