SaaS 登陸頁面打造器
在使用者的 Figma 檔案中建立一個精美且具響應式的 SaaS 登陸頁面。請將使用者提供的內容、產品證據、品牌系統以及現有的 Figma 系統視為唯一真理來源。通用的設計指南永遠不應凌駕於它們之上。
從資料收集開始
閱讀 references/intake-and-planning.md。以一份精簡的核對清單向使用者索取輸入資料，確認哪些資料已存在，並將缺失的必要資料與選填資料分開標示。
遇到可補救的資訊缺口時，不要卡關。在使用者同意或已要求您繼續進行的情況下，繼續使用標記過的假設與佔位符進行作業。切勿自行編造產品功能、定價、證明、客戶標誌、見證、指標、合規聲明或品牌規則。
需要一個有效的 Figma 目標檔以及已連接且具備合適寫入工具的 MCP，才能編輯該檔案。如果缺少任一項，請提供設計簡報與資產計畫，然後明確指出解鎖 Figma 生產所需的步驟。
依序執行以下步驟
- 預檢： 檢查可用的 Figma MCP 工具，打開提供的目標檔案，確定編輯範圍，並盤點現有的樣式、變數、組件、網格以及附近的畫框。請遵循 references/figma-mcp-workflow.md。
- 簡報： 總結目標受眾、產品價值、主要轉換目標、訊息、證明、資產、限制、缺失的輸入資料以及假設。僅針對會實質改變結果的選擇尋求確認。
- 內容架構： 保留已核准的文案，並將其組織成清晰的轉換路徑。使用 references/conversion-and-content.md。如有需要，請分開提供文案修改建議；切勿在未經告知的情況下改寫已核准的內容。
- 創意方向： 從品牌與產品中衍生出一個連貫的視覺概念。使用 references/visual-direction.md。當方向確實開放時，最多提出三個不同的選項，並在開始建構前推薦其中一個。
- Figma 基礎建設： 在適當時重複使用檔案中的現有系統。否則，建立一個小型本地系統，包含變數/樣式、網格、字體層級、間距、圓角以及可重複使用的組件。
- 建構： 使用真實內容與產品截圖來組合桌面版登陸頁面。根據要求建立響應式的平板/手機變體或明確的響應斷點行為。使用 references/responsive-and-motion.md。
- 審查與修復： 執行 references/design-qa.md 中的檢查，修正檔案中的重大問題，然後重新檢查受影響的畫框。
- 交接： 報告確切的頁面/畫框名稱、可重複使用的組件與樣式、響應式變體、動畫註解、假設/佔位符、未解決的輸入資料以及剩餘的風險。
Figma 操作規則
- 僅使用已連接的 Figma MCP 實際暴露的工具。未經工具證據證實，切勿聲稱編輯、渲染或檢查成功。
- 在寫入前先檢查。執行寫入操作後，請在繼續前檢查產生的節點或渲染結果。
- 不要覆寫或刪除無關的工作。如果目標不明確，請詢問應在何處作業，或請求批准建立一個命名清晰的空白工作頁面/畫框。
- 優先使用原生的可編輯圖層、自動佈局、組件、變體、變數、文字樣式與效果，而非扁平化的圖片。
- 保持產品截圖的真實性：保持長寬比，有目的地進行裁剪，切勿以暗示不存在功能的方式重新繪製它們。
- 使用穩定且具描述性的名稱。避免使用
Frame 123、Group 5或沒有佈局目的之裝飾性分組。 - 不要更改分享、權限、發佈狀態、所有權或資料庫。
- 若寫入失敗，請在重試前檢查檔案，以免部分成功導致產生重複內容。
品質標準
頁面必須在第一個視窗內清楚傳達產品功能、目標受眾、信任證明以及要採取的行動。使用一個主要的行動呼籲按鈕、清晰的層級結構、嚴謹的字體與間距、可存取的對比度、僅限真實的證明，以及一個與產品相關而非泛用 SaaS 裝飾的視覺概念。
動畫（Motion）是選配且必須有明確目的。僅在它能改善注意力、理解度、回饋、連續性或品牌表達時才指定使用。務必包含減少動畫（reduced-motion）的行為。
範圍邊界
此技能產出一個 Figma 登陸頁面設計以及包含實作細節的交接文件。它可以標註行為、素材與響應式規則，但除非使用者另外要求，否則不會產生最終的前端程式碼。
關於此技能的來源與能力審計，請參閱 references/source-coverage.md。