登陸頁面設計
一個登陸頁面只有一個任務：讓某位陌生人理解這是什麼、相信它，並採取下一步行動。它用一個獨特的概念來贏得注意力，並用樸實的事實來維繫注意力。模型有兩種截然不同的常見錯誤：最常產出的是可互換的頁面——模糊的標題、三個圖示卡片、虛構的推薦和一面客戶標誌牆，風格只為看起來「流行」。被要求避免這種情況時，它們又會追逐「AI 味」的跡象，用一套時尚手法換成另一套。這兩種問題的解法相同：從主題出發，說出具體且真實的話，並給頁面一個只有這個產品能擁有的想法。
套用 interface-guidelines 的優先原則（人人都能用 > 它說實話 > 它說清楚 > 答案優先 > 錯誤可存活 > 它保持穩定 > 可能可見 > 慣例 > 精緻）。如果該技能已安裝，請先閱讀其 SKILL.md。
簡報
在任何佈局之前，用少於 20 行回答以下問題。如果使用者不在，請陳述假設並繼續。
- 誰來、從哪裡來、知道什麼？ 廣告點擊、搜尋問題、朋友的連結、投資人。他們已有的知識決定了第一個畫面需要解釋多少。
- 一項下一步行動以及其對他們的代價：電子郵件、信用卡、通話、下載。頁面上的一切都是次要的。
- 主張： 一句話說明這是什麼、為誰、以及會為他們改變什麼。如果寫不出來，頁面就還沒準備好設計。
- 手邊的證據： 真實客戶、經許可的引言、有來源和日期的數字、展示、免費方案。列出存在的。缺少的證據是待標記的缺口，不是要填補的。
- 定價： 公開、起價、代表性案例，或真的未知。
- 品牌狀態：
brand-identity是否有輸出（代幣、標誌、字體、語調）？如果沒有，先執行它，或是從暫定方向開始並說明。 - 主題的素材： 產品、其使用者及其世界實際上看起來是什麼樣子（參見「藝術指導」一節）。
- 代理讀者： 助手們會不會比較這個產品、引用其價格或幫人註冊？假設會。
- 限制： 技術棧、CMS、效能預算、語言、法律（受監管的聲明、定價法規、同意）。
藝術指導
這個技能家族並不規定外觀。大膽、奇怪、安靜和極致都是允許的。要求的是：外觀必須來自於對這個主題的決定，並且不能破壞底層的可讀性、速度、可操作性。在寫程式碼之前先用文字完成這一步；references/art-direction.md 有方法和實作範例。
- 收集主題的素材 [J]。從產品及其世界中列出 10 到 20 個具體名詞：它處理的物件、使用者用它製作的東西、地點、工藝品、聲音、質感、該領域本身的視覺語言（潮汐表、食譜卡、電路走線、托運標籤）。通用詞彙（「速度」、「創新」、「無縫」）不算。
- 找到概念 [J]。一句話將該素材轉化為頁面概念：「頁面是產品自己的輸出」、「一本實地指南」、「你的部署的出發看板」。套用替換測試：如果競爭對手能原封不動地使用該概念，就重寫它。
- 挑選一個令人難忘的動作 [J]。一個元素承載概念並獲得大膽預算：一個展示的實際產品瞬間、一個運作中的展示、來自品牌的排版動作、一個你可以拿在手上的物件、一張只有這家公司能拍的照片。其他一切皆服務於閱讀。一個有五個標誌性動作的頁面，等於一個都沒有。
- 構圖 [J]。決定每個畫面的閱讀路徑：眼睛先落在哪裡、再哪裡、然後哪裡，以及用什麼尺寸和對比來實現。設定網格，然後刻意打破它一次。將手機構圖設計成自己的佈局，而非桌面的壓縮版。
- 提出兩到三個方向，每個方向用幾行描述（概念、標誌性動作、如何使用品牌代幣、風險），挑選一個並說明原因。方向應該在概念上有所不同，而不只是色板。
品牌邊界。 顏色、字體、標誌、語調和代幣來自 brand-identity（其 tokens.css 或 tokens.json）。藝術指導決定此頁面如何使用它們：比例、裁切、密度、節奏、圖像、動畫。不要為一個頁面添加新的品牌顏色、重繪標誌或更換字型。如果頁面需要品牌缺乏的東西（例如插畫風格、攝影方向），請將其標記為品牌缺口並向品牌所有者提出。
品味不是證據。 移除漸層、眉毛或特定字型並不會讓頁面更好：taste-skill 自己的盲測中，儘管零偵測器失敗，其在 16 個簡報回合中只贏了 4 局，而其模型評審繼續偏好充滿模板裝置的豐富頁面 [E，僅限模型評審]。因此，請根據替換測試和讀者的任務來判斷方向，而不是根據禁止裝置的清單。
規則
訊息
- 第一個畫面說明了這是什麼、為誰、以及下一步，用陌生人能理解的語言 [E]。訪客在最初 10 到 20 秒內決定是否離開（Liu, White, Dumais 2010，經 NN/g），而第一個畫面大約獲得 57% 的觀看時間（NN/g 2018，n=120）。巧妙的標語可以帶領，但一個樸實的描述性標語必須緊挨著它。
h1是主張，不是品牌名稱或問候語 [S]。它是螢幕閱讀器和代理的頁面大綱根元素（WCAG 2.4.6）。- 具體勝過宣傳 [E]。簡潔、可掃讀、客觀的文案在可用性上比宣傳文案好 124%（Nielsen 1997，n=51；雖舊，但方向已確立）。說「從你的時程表發送發票」，而不是「優化你的工作流程」。
- 每個區塊做出一個主張並展示其證據；刪除沒有主張的區塊 [J]。在設計之前，將頁面寫成一個主張清單（這個想法來自 taste-skill）。
- 展示產品本身 [J]：真實畫面、真實輸出、真實照片。一個「生產力」的抽象繪圖什麼也沒說，而虛構的 UI 則曲解了產品。
- 人們會滾動，所以避免假底部 [P]。在第一個畫面以下，注意力會下降但不會消失（NN/g 2018）。一個看起來完整的全出血主視覺會隱藏其後的所有內容。
證據與誠實
- 只有真實證據 [S]。虛假或 AI 生成的評論和推薦在美國是非法的（FTC 16 CFR Part 465, 2024），且代言必須反映真實經驗（FTC Endorsement Guides, 16 CFR Part 255）。客戶標誌僅在獲得許可且確實是實際客戶時才能使用。
- 當證據缺失時，請標記它 [J]。使用可見的佔位符，例如
{{quote: customer, name, role}}，並在交接時列出它們。永遠不要寫一個令人信服的假貨來填補缺口。 - 數字需附帶來源和日期 [J]。「12,000 個團隊」需要「截至 2026 年 3 月」。一個無法查證的數字充其量只是裝飾。
- 不要製造虛假的急迫感 [E]。虛假倒數計時和虛假稀缺是 Mathur 等人（2019）發現的大規模欺騙模式之一，它們也會誤導代理：平均而言，六個網頁代理有 41% 的時間會落入暗黑模式（Ersoy 等人，2025，預印本）。
定價
- 顯示價格 [P]。缺少價格會將買家推向競爭對手（Nielsen 2002）。當價格確實有變動時，請顯示代表性案例及其價格（Nielsen 2006）。
- 價格是文字：金額、貨幣、週期以及包含的項目，絕不可只在圖片內 [J]。方案比較使用真實的
<table>，並以文字說明功能。 - 說明買家將支付的總額，包括強制性費用 [S]。美國法律要求現場活動門票和短期住宿這樣做（FTC Rule on Unfair or Deceptive Fees, 2025）；在其他地方這是誠實的做法。歐盟的折扣聲明必須顯示前 30 天的最低價格（Directive 98/6/EC, Art. 6a）。
- 帳單切換器需顯示狀態和預設值 [J]。如果預設顯示年繳價格，請在數字旁邊說明「年繳計費」。
下一步
- 一個主要行動，在決策點重複，並標明會發生什麼事 [J]：「開始 14 天試用，無需信用卡」、「加入候補名單」。次要行動看起來是次要的。
- 候補名單和註冊表單要求最少資訊，並說明後續步驟 [J]：他們會得到什麼、何時、以及你多久會發一次電子郵件。同意核取方塊初始狀態為未勾選。較長流程請交由
form-design處理。 - 成功是一個狀態，不是一個提示訊息 [J]。提交後，用已發生的事情以及期待什麼來取代表單。
速度與強固性
- 達到 Google 核心網頁指標的第 75 百分位：LCP 2.5 秒、INP 200 毫秒、CLS 0.1 [S]。這些目標部分是由可達成性設定，而非人類感知的閾值。在 Google 委託的研究中，更快的行動頁面與較高的零售轉換率相關（Deloitte 2020）[E，相關性]。
- 主視覺通常是 LCP 元素 [S]：一個真實的
<img>帶有width、height和fetchpriority="high"，永遠不要延遲載入，永遠不要用 CSS 背景放在等待腳本的文字後面（web.dev）。 - 內容在沒有 JavaScript 和沒有動畫的情況下也可見 [J]。滾動顯示從可見狀態開始，僅在支援時才進行動畫；對於減少動畫偏好，沒有任何東西會隱藏。否則代理和螢幕截圖會得到空白。
- 沒有自動前進的輪播 [P]。旋轉的主視覺在測試中向用戶隱藏了優惠訊息（Nielsen 2013），且超過 5 秒的動畫需要暫停控制（WCAG 2.2.2）。
代理讀者
- 助手會引用的資訊是頁面上的文字：這是什麼、價格、方案限制、平台、試用條款、聯絡方式 [J]。代理正從這些資訊比較產品。
- 結構化資料和中繼標籤反映可見頁面，並且不添加任何多餘資訊 [S]：
title、中繼描述、Open Graph 以及 JSON-LD（Organization、SoftwareApplication或Product），包含頁面上顯示的相同價格和名稱。在測試中，附加的標記對代理沒有幫助（Affora，在interface-guidelines中）。 - 沒有針對 AI 代理的文字，無論是隱藏或可見 [J]。這會被解讀為提示注入，且隱藏文字是垃圾訊號。
建立順序
- 簡報，然後是主張與證據清單，並為缺口使用佔位符。
- 藝術指導：主題素材、概念、一個動作、兩到三個方向提案、選擇。
- 文字線框：依序排列區塊，每個區塊包含其主張、證據和動作。
- 帶有真實文案的語意 HTML：一個
h1、地標、勾勒論點的標題、定價表格、帶有標籤的表單。 - 來自
brand-identity的品牌代幣，然後是佈局和標誌性動作。 - 狀態：表單驗證、成功、失敗、售罄或關閉的候補名單、無 JavaScript、減少動畫。
- 在效能預算內的圖片、字型和腳本。
- 驗證，最多修正兩次，然後交接。
驗證
node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output，然後查看所有三個寬度的每個螢幕截圖，如果明亮和暗色模式都存在則兩者都看。- 首螢幕測試： 僅向某人（或一個沒有上下文的新代理）顯示第一個畫面的螢幕截圖，並詢問這是什麼、為誰以及接下來該做什麼。錯誤答案意味著訊息失敗，無論看起來多好。
- 替換測試： 將產品名稱替換為競爭對手的名稱。如果頁面仍然有效，則概念和文案是通用的。
- 代理測試： 僅從無障礙快照中，讀取每個方案的價格和限制，並完成註冊。與 JSON-LD 進行比較。
- 速度： 在限速的行動設定檔上使用 Lighthouse 或 PageSpeed Insights；如果頁面已上線，則使用 CrUX 現場資料。
- 強固性： 在禁用 JavaScript 和
prefers-reduced-motion: reduce的情況下載入。任何重要內容都不能缺失。 - 證據稽核： 每個引言、標誌、數字和評分都需追溯到來源，或顯示為已標記的佔位符。
陷阱
- 虛構的推薦信、非客戶公司的標誌牆、捏造的使用者數量或評分。
- 一個可以放在任何產品上的標題（「打造工作的未來」），而真正的解釋卻在三個畫面之後。
- 追逐或禁止「AI 味」，卻不是從主題來做決定。一套新的時尚替代品就是下一個「味」。
- 裝飾配額：到處都是動畫、每個區塊都放一張圖片、每個區塊為了不同而採用不同佈局。
- 主視覺文案或 CTA 隱藏到滾動動畫觸發後才顯示；低不透明度「揭露」文字直到那時才滿足對比度。
- 價格僅在圖片中，或「聯絡我們」而沒有任何規模指示。
- 為了一個頁面重新定義品牌顏色或重繪標誌，而不是使用
brand-identity代幣。 - 一個定價切換按鈕，默默地顯示年繳平均每月的數字。
- 隱藏在頁面中給 AI 助手的指令。
參考資料
| 檔案 | 何時閱讀 |
|---|---|
references/art-direction.md | 總是，在選擇外觀之前：方法、實作範例、構圖、使用品牌代幣、判斷方向 |
references/structure-and-copy.md | 撰寫頁面時：按頁面類型的區塊模式、標題、證據、定價頁面、候補名單、表單 |
references/performance-and-agents.md | 建立並發佈時：核心網頁指標、圖片、字型、動畫、中繼資料、結構化資料、無 JavaScript |
references/sources.md | 在引用數字之前，或當有人問為什麼某條規則存在時 |