MotionSites Prompt Capture
目標
使用者提出網站/UI 設計需求時，前往 motionsites.ai 找到匹配的提示詞模板，並給出針對使用者專案的優化方案。本技能的輸出是「推薦 prompt + 優化方案」，不是直接寫程式碼。
工作流程
1. 提煉需求
先確認關鍵資訊，缺失時按合理預設繼續，不要反覆追問：
- 網站類型：Landing 頁 / SaaS 官網 / 作品集 / Agency 站點 / Hero 區塊 / 電商頁等
- 視覺風格：暗色、玻璃態、漸變、極簡、3D、粒子背景等
- 動態需求：滾動動畫、視差、平滑滾動、3D 互動等
- 內容結構：需要哪些區塊（導覽、Hero、特色、定價、頁尾等）
- 技術棧：預設 React/Next.js + Tailwind + shadcn/ui（Build Web Apps 外掛環境）；使用者指定其他棧則以使用者為準
2. 造訪 motionsites.ai
- 優先使用應用內瀏覽器（使用者已開啟或可用時）開啟 https://motionsites.ai/ 並瀏覽分類（SaaS、Agency、Portfolio、Landing pages、Hero sections 等）。
- 瀏覽器不可用時，使用 open_page 或 web search 取得頁面資訊。注意該站為 JS 渲染的 SPA，靜態抓取可能無法取得分類內容，此時說明使用瀏覽器查看更準確。
- 以「類型 + 風格 + 動態」三個維度篩選，找出 1-3 個最匹配的 prompt。
3. 輸出推薦 prompt
- 完整展示選中的 prompt 原文，不要改寫、不要翻譯。
- 說明每個 prompt 的匹配理由（為什麼適合使用者需求）。
- 找不到完全匹配時，選擇最接近的並明確指出差異點；絕不編造不存在的 prompt。
4. 給出優化方案
圍繞使用者真實專案逐條列出優化點：
- 技術棧適配：prompt 預設面向 Lovable/Bolt/Cursor/Claude，說明如何遷移到使用者棧（預設 React + Tailwind + shadcn/ui；組件拆分、設計 token 復用）。
- 動態實現：motionsites 常用 GSAP ScrollTrigger + Lenis 平滑滾動；給出落地時的關鍵取捨（效能、降級、無障礙、prefers-reduced-motion）。
- 視覺資產：需要 Hero 圖、紋理、圖示時，說明可用 imagegen 生成或從提示詞要求的資源引入。
- 驗證方式：實現後用 playwright / frontend-testing-debugging 做瀏覽器驗證（響應式、動態、console 錯誤）。
- 風險提示：指出 prompt 中可能不適用於當前專案的部分（依賴、效能開銷、內容佔位）。
5. 結尾
最後詢問使用者是否按優化方案開始實現；使用者確認前不要寫程式碼。
觸發範例
- 「需要你创建一个网站并且要用到UI设计」
- 「我要做一個 SaaS Landing 頁，幫我從 MotionSites 找提示詞」
- 「幫我做一個帶 Hero 動態的作品集網站，先給我方案」
注意事項
- 不要跳過「找 prompt」直接寫程式碼。
- Prompt 原文保持原樣；優化方案針對使用者專案，預設不改寫 prompt 本身，除非使用者要求。
- 優先使用瀏覽器真實瀏覽 motionsites.ai 再選擇，避免憑記憶猜測站點內容。