高級登陸頁面建構器

您所建構的登陸頁面將能通過資深設計師的評鑑。最低標準不是「功能正常且好看」，而是能與一個用心產品的團隊所打造的頁面難以區分。

這個檔案就是方法本身：包含了能覆蓋所有其他規則的準則、流程的 11 道關卡以及交付成果。每個關卡的技術細節位於 references/ 目錄中。請依序進行。

如何使用這項技能

只載入每個關卡要求的內容。 下方每個關卡都結尾於一行「閱讀」，指向該階段的參考檔案。不要一次開啟所有參考檔案：它們加起來將近 4000 行，而每個階段真正重要的內容只需一到兩個檔案就夠了。

所有檔案的編號方式一致。 當文字提到「見 10.4」或「章節 12.7」時，請查閱本檔案末尾的目錄，找出包含該章節的參考檔案。章節 0、1、3 和 19 在此檔案中；其餘章節在 references/ 中。

腳本負責執行繁重的驗證工作。 請執行它們，而不是重寫：

腳本	用途	需求
`scripts/contraste.py`	在套用之前測量 Token 的對比色對（關卡 4）	Python 3.8+
`scripts/checar-texto.py`	反垃圾內容檢查、按鈕及文字節奏審查（關卡 2 和 10）	Python 3.8+
`scripts/auditar-responsivo.mjs`	從 320 到 1920 px 的各種寬度、200% 縮放與減少動態模式下的審計（關卡 9）	Node 18+ 和 Playwright

路徑是相對於此技能的資料夾。如果環境無法執行某個腳本（例如，Playwright 沒有瀏覽器），請告訴使用者哪項檢查尚未完成，並提供可供使用者在他們機器上執行的確切指令。絕不要聲稱執行過未實際運行的檢查。

程式碼範例使用純 HTML、CSS 和 JavaScript。 若使用 React、Next.js、Astro、Tailwind、Webflow 或其他建構器，請在轉換時保留 Token 名稱、狀態和規則。

0. 在任何像素之前

以下四條規則若被違反，將覆蓋所有其他規則：

沒有簡報就沒有像素（關卡 1）。大部分返工都源自在還不清楚設計目標時就開始繪製。
不接受任何僅憑視覺印象判斷的數值。 排版、顏色、間距和時長的所有度量都必須來自 Token、測量結果或表格。絕不能使用「看起來不錯」。
只做被要求的事，不多做。 如果你有更好的想法，請先實作被要求的部分，然後再額外提出你的想法。自行添加額外效果只會導致返工。
絕不重複使用其他專案的識別元素。 每個頁面都應從其專案的品牌中誕生。複製範例的調色盤、排版或視覺簽名，只會產生章節 1 所禁止的那種通用頁面。

0.1 什麼是方法，什麼是識別元素

這是本文件最重要的區別。方法不變。識別元素在每個專案中都不同。

不變項：永遠使用	變項：從專案中收集
11 道關卡流程	調色盤及每種顏色的角色
Token 的結構，即名稱	Token 的值
使用 `clamp()` 和 `rem` 的流暢字體縮放	字體家族及縮放比例
8 px 基底的 grouping 規則、`minmax(0,1fr)`	容器寬度和密度
分層陰影，最多兩個 Token	陰影的色調和強度
動作詞彙：一條曲線、兩個範圍	動作強度和懸停識別
自製視覺素材，絕不使用圖庫素材	何種素材技術符合品牌
WCAG 2.2 AA 無障礙標準以及章節 12 和 16 的 QA	無。這點沒得商量
章節 1 的反垃圾內容規則	無。這點沒得商量

此處所有具體數值都只是填寫範例，並非要複製的標準。 這些範例來自一個已驗證的真實專案，旨在展示預期的嚴謹程度，而非需要複製的外觀。一個時尚品牌、一家銀行和一個遊戲工作室會用完全不同的數值填入相同的欄位，但最終都能達到相同的品質水準。

如果使用此技能製作的兩個頁面看起來像姊妹頁面，那就表示這項技能被用錯了。

1. 核心規則：零 AI 垃圾內容

「AI 垃圾內容」是指那些會透露出內容是未經審慎評估而生成的視覺或文字特徵。一個頁面可能在技術上完全正確，但依然可能因此而被拒絕。本章節的優先級高於任何其他美學選擇。

1.1 視覺垃圾內容：禁止

禁止項目	原因	替代方案
紫色或靛藍到藍色的漸層	AI 模板的視覺簽名	從品牌衍生的調色盤，每種顏色有明確定義的角色
處處都是玻璃態	無功能性的效果	僅在浮動導航和疊加層上使用模糊效果
機器人、大腦、電路、全息圖、晶片圖示	老套的「AI」	使用該領域實際物體的圖示（行事曆、訊息、圖表）
圖庫照片	過於通用且可識別	程序化紋理、產品 UI、技術插圖
AI 生成的圖片	可被偵測且與品牌不一致	與上述相同的替代方案
表情符號作為介面圖示	使介面顯得幼稚並破壞構圖	使用圖示系統中的線條 SVG
3×2 網格中相同的白色卡片搭配灰色邊框	最常見的模板模式	不同的足跡，卡片內部包含視覺內容
在每個區塊中重複使用綠色勾勾列表	構圖的懶惰	變化：列表、比較、縮圖、數據
旁邊沒有任何內容的大號 01 02 03 數字	不傳達資訊的裝飾	數字搭配該步驟發生內容的縮圖
彩色模糊背景	無功能的點綴	與品牌相關的紋理，或什麼都不要
單一大型灰色陰影	看起來像模糊，不像深度	分層陰影（見 4.5）
帶有垂直光束和藍紫色輝光的暗色星雲頂部	一整代技術工具頁面的簽名。複製它就是在宣告你是從哪一年、哪個利基市場抄襲的	從品牌衍生的氛圍：專案的紋理、角度和顏色
從白色到薰衣草色和粉紅色的漸層標題	不再是精緻的處理方式，而是成了模板的標記	只有當漸層的停止點來自專案的調色盤時才使用，且整頁只能使用一次
類似「取代了 A、B、C 和 D」的標題	只有當產品確實取代了四個類別並有公開數據證明時才有效。在其他情況下讀起來像吹噓	見 10.4 的標題模式

1.2 文字垃圾內容：禁止

禁止使用的標點符號，無例外：

字元	名稱	替代方案
`—`	長破折號	句號、逗號或冒號
`–`	短破折號	句號、逗號或「至」表示範圍
`·`	中間點	逗號，或拆分成兩個元素
`…` 作為裝飾性省略號		句號

長破折號是機打文本的第一大標誌。請改寫句子，而不是單純用前後有空格的連字符代替，這會產生相同的效果。

在程式碼區塊和規格書中，不要使用中間點作為分隔符：請使用帶有標籤的換行。

禁止使用的句式：

「不是 X。不是 Y。是 Z。」
「想像一下[情境]」
「在當今世界」、「在數位時代」、「越來越多」
「轉變」、「革新」、「提升」、「解鎖」、「放大」
「深入探討」、「讓我們探索」、「了解如何」
什麼都用三項式：三個形容詞、三個項目符號、每個區塊都三欄
機構性文本中使用感嘆號
堆疊的模糊用語：「可能幫助提升潛在的改善」

正面規則：

句子簡短具體，使用讀者的語言，而不是產品的語言。
使用動詞而非抽象名詞：「5 分鐘內回覆」，而非「客服效率」。
數字必須有來源。沒有真實數據時，請描述將要測量什麼。
完整且正確的標點和變音符號。絕不要用 ASCII 字元取代帶變音符號的字元。

1.3 結構性垃圾內容：禁止

最難察覺的錯誤：每個區塊都使用相同的模板。

標籤 → 標題 → 段落 → 三個相同的卡片
標籤 → 標題 → 段落 → 三個相同的卡片
標籤 → 標題 → 段落 → 三個相同的卡片

這就是模板，即使 Token 和動畫做得再好也一樣。

變化規則： 沒有區塊的格式會連續重複。整頁中至少要交替使用五種不同的格式：

帶有介面縮圖的卡片網格
帶有同步旁邊舞台的垂直列表
帶有產品截圖的分頁
一個主導區塊的 Bento 佈局
兩欄對比
時間線或逐步介紹
帶有技術插圖的深色區塊
表格或數據面板

1.4 流程性垃圾內容：禁止

未經測量參考就憑記憶實作排版和元件。
未在瀏覽器中開啟檢查、未執行驗證就交付。
交付時主控台有錯誤。
未重新計算對比度就複製之前專案的數值。

1.5 垃圾內容測試

在交付前回答以下問題。任何一個「是」都代表不合格：

是否有任何區塊使用了與前一個區塊相同的模板？
任何可見文字中是否存在長破折號、短破折號或中間點？
是否有任何圖片來自圖庫或 AI 生成器？
是否有任何圖示代表的是「科技」而非代表實際事物？
如果更換 Logo 和調色盤，這個頁面是否適用於任何公司？
是否有任何數字沒有出處？

問題 5 是最嚴厲的。如果答案是肯定的，那就是概念問題，而不是潤飾問題。

3. 11 道關卡流程

任何關卡都不能跳過。每個關卡都有客觀的完成標準。

時程校準，基於參考工作室發布的數據：專注的重新設計需 4 到 6 週；客製產品頁面需 6 到 8 週；公司或軟體網站需 8 到 12 週。一個記錄在案的全新品牌加上完整頁面的案例花了 7 週和大約 600 小時，分為 4 週的品牌與設計，以及 3 週的動畫與建構。他們在截止日期前兩天完成，並利用這兩天調整文案，而非版面。

範圍不以頁面數量衡量。 一個擁有少量可重複使用模板的 30 頁網站，比一個擁有 5 頁、每頁都有獨特結構、客製敘事和複雜互動的體驗要簡單。請根據不同構圖的數量進行估算，而非 URL 數量。

適用於任何規模的四個流程習慣：

通用的填充文字成本高昂。 為短段落建構的版面，當實際文本需要解釋功能、受眾和好處時，就會失效。返工發生在成本最高的階段。這就是關卡 2 存在的原因，也是所有模型都使用真實文本的原因。
視覺階段並非從整個頁面開始。 而是從一個或兩個關鍵構圖開始，這些構圖包含未來系統最重要的元素，以便在不繪製所有東西的情況下解決排版、顏色、圖像、構圖、元件和動態問題。
程式碼與設計同步進行，而非之後。 在最好的情況下，沒有交接過程：建立視覺系統的同一個團隊也交付互動體驗，並且將效能視為設計的一部分。許多細節只有在實作中才會生動起來，其細微差別是靜態向量無法呈現的。在設計工具中的幾天能產出好點子，而點子不能交付。
使用真實內容進行測試。 長標題、翻譯文本、奇怪的圖片比例以及缺失的媒體，會揭示在精美的設計檔案中看不見的問題。

關卡 1. 簡報與品牌識別

在完成此關卡之前不要繪製任何東西。 詢問使用者。對於每個沒有答案的項目，提出兩到三個選項並請使用者確認。絕不要默默假設，也絕不要繼承範例的識別元素。

1.1 業務與目標

誰會閱讀這個頁面，他們需要做出什麼決定？
這個頁面應該產生的唯一行動是什麼？
該行業是否存在法律限制（健康、金融、教育、法律、食品）？
是否有真實的結果數據，或者禁止引用數字？

1.2 視覺識別：收集或提議

欄位	詢問使用者	如果沒有答案
品牌顏色	品牌的顏色是什麼，十六進制？哪個是主要顏色？	從章節 4.2 提出 2 到 3 個方向並請其選擇
行動顏色	按鈕應該使用什麼顏色？	從品牌顏色衍生，將其調暗直到通過 4.5:1 與白色的對比度
排版	品牌使用哪些字體？有網路字型授權嗎？	從章節 4.3 提出 2 個配對並請其選擇
視覺語調	品牌是沈穩、溫暖、技術、優雅還是充滿活力？	詢問。這決定了紋理、圓角、密度和動態
標誌	有 SVG 檔案，或透明背景的 PNG 嗎？	索取。如果沒有，請在選擇的排版中使用文字名稱
品牌手冊	有品牌手冊、風格指南或識別指南嗎？可以寄送嗎？	索取。這是最豐富的資訊來源。如果沒有，請使用標誌和顏色
品牌圖形	品牌有圖形模式、紋理、重複形狀、網格或獨特的視覺簽名嗎？可以寄送檔案嗎？	索取圖片或向量。它們將成為章節 7 紋理的基礎
現有素材	有簡報、貼文、包裝、型錄或舊網站嗎？	索取 3 到 5 個素材。它們展示了品牌的應用方式，這是品牌手冊不一定會顯示的
產品素材	有螢幕截圖、自製照片或圖表嗎？	根據章節 7 決定將要創建的內容
參考資料	有參考頁面嗎？	如果有，請在關卡 3 進行測量。如果沒有，請提出一個方向
應避免事項	品牌是否有禁止的顏色、風格或元素？	詢問。現在知道比以後知道便宜得多
動態程度	低調、均衡還是豐富？	預設值：均衡
語調	正式還是直接？用「你」還是「您」？	詢問

1.3 識別資料表

記錄答案。此資料表是關卡 4 Token 的來源。

專案
頁面目標：
唯一行動：
目標受眾：

識別
主要顏色：            #
行動顏色：              #          與白色的對比度：___:1
次要強調色：

[為翻譯而截斷]

為翻譯而截斷

精品落地頁