Landing Page Launch
以產品設計師與轉換導向文案的角度思考：讓產品訴求清晰明瞭，引導訪客執行主要行動，同時保留專案本身的品牌識別。將執行推向要求的最終結果：提案、本地端程式碼或已發佈的頁面。一個產品訴求、一個優先目標受眾與一個主要的轉換目標，主導整體的構成。
釐清框架，不造成阻礙
- 從需求、儲存庫與現有素材中取得：產品或服務、目標受眾、效益、產品訴求、主要行動、語言、品牌識別與頁面目標。讀取適用的
AGENTS.md與既有的PRODUCT.md/DESIGN.md。 - 只在一個回合中，針對會實質改變解決方案的缺口提問。在等待回覆的同時，繼續獨立作業。對於可逆的選擇，簡單聲明一個假設然後繼續前進；不要捏造商業事實。
- 區分CTA的目標與其實際目的地：預約、購買、表單、應用程式、下載或聯絡。在承諾獲得潛在客戶或完成某項操作之前，先確認是否存在整合。
- 使用指定的語言；若無指示，則跟隨用戶。在本版本的範例中，使用歐洲葡萄牙語；請根據需求調整。
- 遵守指定的技術棧與主機環境。在既有專案中，整合至本地架構。對於簡單的獨立頁面，當構建工具非必要時，優先使用HTML/CSS/JS；當行為或專案需要時，再選擇框架。
- 當Sites是選擇的目的地，或現有的流程適合建立沒有指定目的地的全新網站時，使用已安裝的
sites:sites技能進行實作與發佈。用戶自行選擇的儲存庫或主機服務則維持優先權。在執行發佈前，請先查閱供應商當前的流程。
定義頁面的訴求
在實作之前，簡短溝通產品訴求、主要行動與選擇的方向。只有在要求中明確包含策略或文案文件時，才交付詳細的文件。一個「建立」的要求，應產出實作成果。
根據訪客的意圖選擇結構：
| 情境 | 建議的構成 |
|---|---|
| 等候清單、下載或已了解資訊的受眾 | 短頁：產品訴求、必要細節、行動與相關條件 |
| 需要展示的產品或服務 | Hero、展示、效益、運作方式、可用的佐證、反對意見與最終CTA |
| 複雜的產品訴求或決策摩擦較大的情況 | 較長的故事敘述、與說明和佐證緊密結合的解釋、條件與預期的反對意見 |
| 被要求進行比較或搜尋替代方案 | 可驗證的比較、明確的標準，以及與此意圖一致的行動 |
- 撰寫能讓人立即感受到效益與目標對象的標題。副標解釋產品訴求與其運作方式。CTA則描述下一步行動，例如「預約展示」或「加入等候清單」。
- 當來源廣告、電子郵件或貼文存在時，讓頁面的承諾與之相符。
- 優先考量一個商業行動。導覽與輔助行動可以存在，但不能與這個層級衝突。CTA的重複出現應導向同一個目標。
- 只選擇能增加資訊的區塊。不要強制規定每頁都要有固定數量的效益、步驟、常見問題或動畫區塊。
- 將功能與具體的結果連結。只有在用戶提供的素材或經過驗證的來源支援下，才使用數字、見證、標誌、價格、保證與條件。
- 若無社會證明，則展示產品、提供一個標明為範例的案例，或解釋流程。不要用虛構的客戶、指標、頭像、稀缺性或折扣來填補這個缺口。
- 如果缺少一個關鍵的商業條件，請將其標記出來，做為公開發布文字之外的決策依據，並避免做出依賴該條件的承諾。不要將佔位符作為最終內容發布。
創造獨特的視覺方向
專案的品牌識別與已核准的素材主導選擇。作者的參考資料能啟發視覺上的細膩度；但並不要求所有頁面都共享字體、顏色或特效。
- 選擇一個與產品連結的視覺概念：介面展示、照片、物件、插畫或字體排版。讓Hero區塊能與該概念和CTA一起運作。
- 當需求基於一個具有特效或深度感的影片時，閱讀其序列並找出驅動參考的行為。在適當的媒介中實作這些面向，並以實際的動態來驗證；僅更改顏色與間距無法滿足此需求。
- 為字體、顏色、間距、圓角與動態定義一個小型Token系列。若有既有的Token和元件則優先重用。
- 避免自動以重複的卡片、無功能的圖示、裝飾性漸層或統計數據來填滿頁面。使用編排、對比、節奏與內容來建立層級。
- 使用真實的螢幕截圖來展示既有產品。對於新圖片，當
imagegen技能可用且合適時使用；對於SVG、CSS或其他原生元素，使用適當的媒介。不要將生成的圖片呈現為真實功能的證明。 - 為行動裝置準備視覺元素的構圖與對比。動態應有其目的，需尊重
prefers-reduced-motion，並確保在不播放動畫時內容仍然可讀。影片需要海報或靜態替代方案，並進行適當的載入。 - 當缺乏視覺識別或用戶要求貼近Elaya參考風格時，請閱讀 references/art-direction.md。不要將該配方用於取代已定義好的系統。
- 對於專業的滾動過渡體驗，請閱讀 references/scroll-storytelling.md。規劃各區塊之間的路徑，並在整頁範圍內驗證動態，而非僅限於Hero區塊。
- 對於一個透過影片或影格跟隨滑鼠的3D主角，請閱讀 references/interactive-video-hero.md。在將其連結到互動之前，先準備好素材的移動；當需要影片無法提供的視角或回應時，選擇即時3D場景。
實作真正的轉換
建構頁面並在審閱過程中局部調整區塊。保留要求的範圍以及專案的實作與覆蓋範圍指示。
- 使用語意化的HTML、標題層級、原生控制項、標籤、可見焦點與鍵盤導航。確保可讀性、對比度、實用的替代文字與舒適的觸控目標。
- 將CTA和導覽連結到真實的目標。不要使用
href="#"作為商業行動，也不要顯示模擬的成功訊息。 - 對於表單，實作必要的欄位、驗證以及與發送、成功和錯誤相關的狀態。在實際服務端確認成功後，才顯示成功訊息。不要在客戶端暴露憑證。
- 若無定義的資料收集服務，完成本地佈局並標明待整合的部分。如果已提供且能達成目標，可使用真實的聯絡替代方案。在資料尚未被傳送至目標之前，不要宣告捕獲功能已就緒。
- 包含相關的標題、描述、favicon與社交媒體元數據。Canonical、網域與社交媒體圖片應指向已知的真實資源。
- 根據頁面目標與專案指示來決定索引設定。活動頁面不代表自動設定
noindex；未公開的路徑也不應禁止索引。私人預覽頁面與不應出現在搜尋結果中的頁面，應使用適當的機制。 - 不要捏造法律免責聲明或頁尾連結。適用時重用真實文件，並標記出上線前缺少的部分。Analytics與追蹤工具取決於要求的範圍與配置。
驗證與發佈
- 執行專案要求的檢查，以及最少一組能確認變更的額外檢查：適用時進行構建，必要時測試被變更的行為。既定的外部覆蓋範圍仍將適用。
- 當瀏覽器可用時，在桌上型與行動裝置上檢查已渲染的頁面：Hero區塊的層級、圖片裁切、文字斷行、溢位、選單、鍵盤、CTA以及轉換流程。在適當的環境中使用測試資料測試表單，避免意外建立真實的聯絡人或購買記錄。
- 確認字體、圖片與影片能載入；在無特效的情況下內容仍可存取；且沒有死結或相關的控制台錯誤。
- 若無法進行視覺檢查，執行可行的檢查並聲明此限制。不要聲稱已查看或測試過頁面但實際上並未進行。
- 對於發佈要求，按照專案或供應商當前的流程，在授權的目的地上完成發佈。不要重複已給予的授權要求。提案、模型或本地端工作的要求應在其範圍內結束。
- 發佈後，檢查供應商回傳的狀態，若可存取則開啟最終URL，確認頁面與CTA目標。保留現有的觀眾；未經授權不得將頁面設為公開。
- 在交付時，指出可在何處查看結果、已驗證的內容，以及任何具體的待辦事項（整合、內容或存取權限）。區分本地版本、私人預覽與公開發佈。
來源
本技能是根據landing-page-design by Elaya的概念與流程改編而成，並分享於此文章。原始的MIT授權條款保留在 LICENSE 中。
本改編版本將範圍限定為登陸頁面，保存每個專案的品牌識別，以根據脈絡做出的選擇取代通用的美學規則，並增加了真實整合、可及性、驗證與發佈流程。作者的素材不能取代本版本的指示。