登陸頁面設計
總覽
打造既具轉換力又引人入勝的登陸頁面。此技能結合了以轉換為核心的結構與獨特的視覺設計，讓你的頁面在 AI 飽和的世界中脫穎而出。目標：產出價值 50-100 美元、你會自豪地銷售的頁面。
強制要求：氛圍探索（請先執行此步驟）
在編寫任何程式碼之前，你必須執行「氛圍探索」流程。 這不是一個查表流程，而是一個創意提示，每次都會產生一個獨一無二的美學方向。
目標：即使是針對類似的產品，也沒有兩個登陸頁面看起來應該要一樣。
氛圍探索流程
向使用者詢問這些問題，然後綜合歸納出一個獨特的方向。不要只是將答案對應到預設選項。
步驟 1：收集背景脈絡（詢問這些問題）
Q1：這個品牌在現實世界中對應哪一個地方或物品？
不是「哪個產業」，而是一個實際具體的東西。例如：凌晨 2 點的東京便利商店、祖母的廚房、粗獷主義的停車場、珊瑚礁、747 的駕駛艙、馬拉喀什的跳蚤市場、1970 年代的錄音室。
Q2：使用者在看到頁面的前 3 秒內，應該感受到哪一種情緒？
選擇一種：平靜、精力充沛、好奇、信任、愉悅、印象深刻、叛逆、懷舊、受啟發、有趣、精緻、受歡迎、感興趣、有自信。
Q3：選擇兩種意想不到的元素來發生碰撞：
範例：「醫療包裝 + 滑板圖案」、「試算表 + 街頭藝術」、「豪華飯店 + 龐克雜誌」、「NASA 任務控制中心 + 幼兒園」、「日本便利商店 + 維多利亞時代圖書館」
Q4：這個頁面絕不能被誤認為什麼？
列出 2-3 個要主動避免的具體事物。「一個加密貨幣專案」、「一個健康應用程式」、「由銀行製作的東西」、「任何使用紫色漸層的東西」
步驟 2：創造美學風格（不要查表——直接創作）
根據答案，透過決定以下事項來創造一個獨特的風格：
色彩創造 （不要使用記住的色板——從那個地方/物件中擷取）
- 在 Q1 的那個真實世界地方/物件中存在什麼顏色？
- 提取 3-4 種對該參考感覺真實的顏色
- 發明特定的十六進制色碼，不要重複使用之前專案的色碼
- 為你的色板取一個引人聯想的名稱（不是「藍色和橘色」，而是「午夜雜貨店」或「鐵鏽地帶的早晨」）
字體創造 （讓語調與碰撞元素匹配）
- 文字在該地方聽起來會像什麼？
- 找到一個能體現 Q3 碰撞的展示字體
- 不要預設使用你慣用的選擇——用全新的眼光瀏覽 Google 字型
- 考慮：粗細、字寬、對比、特色
配置創造 （從物理空間推導）
- Q1 的那個地方是如何組織空間的？
- 是擁擠還是寬敞？網格狀還是有機？垂直還是水平？
- 什麼意想不到的配置選擇能體現 Q3 的碰撞？
動態創造 （與情緒匹配）
- Q2 的情緒是如何移動的？
- 平靜 = 幾乎察覺不到。精力充沛 = 有動態感。精緻 = 緩慢而從容。
- 哪一個「簽名式動畫」定義了這個頁面？
步驟 3：撰寫你的氛圍規格
在編碼之前，明確地寫下這些：
氛圍名稱：[創造一個 2-3 個字的名稱]
參考：[來自 Q1 的地方/物件]
情緒：[來自 Q2]
碰撞：[來自 Q3]
反模式：[來自 Q4]
色彩：
- 主色：[十六進制] - [為什麼選擇這個顏色]
- 次要色：[十六進制] - [為什麼]
- 背景色：[十六進制] - [為什麼]
- 強調色：[十六進制] - [為什麼]
- 色板名稱：[引人聯想的命名]
字體：
- 展示字體：[特定字型名稱] - [為什麼適合]
- 內文：[特定字型名稱] - [為什麼]
- 特色：[描述其語調]
配置：
- 密度：[稀疏/平衡/密集]
- 形狀：[銳利/圓潤/有機/混合]
- 標誌性元素：[一個不尋常的配置選擇]
動態：
- 程度：[靜止/微妙/中等/動態/混亂]
- 簽名動畫：[一個定義此頁面的特定動畫]
通配符：
- 一個並不「匹配」、但卻能使其令人難忘的意外細節
步驟 4：新鮮度檢查
在繼續之前，請確認：
- 我沒有重複使用前 3 個專案的十六進制色碼
- 我沒有預設使用我「最舒適」的字型（檢查：我是否使用了 Inter？Nunito？Space Grotesk？如果是，請找其他的）
- Q3 的碰撞在我的選擇中是可見的
- 沒有人會將此頁面與我之前的登陸頁面混淆
- 我包含了一個連我自己都感到驚訝的通配符
氛圍探索範例
Q1 - 地方/物件：「尖峰時段的日本車站」
Q2 - 情緒：「有自信」
Q3 - 碰撞：「交通標誌 + 高級訂製服」
Q4 - 絕不能被誤認為：「冥想應用程式、任何異想天開的東西、科技新創兄弟」
產生的氛圍規格：
氛圍名稱：新宿跑道
參考：尖峰時段的日本車站
情緒：有自信
碰撞：交通標誌 + 高級訂製服
反模式：沒有柔和的漸層、沒有俏皮的插圖、沒有圓潤友善的形狀
色彩：
- 主色：#1a1a1a - 車門的黑色
- 次要色：#f5f5f0 - 月台混凝土，磨損光滑
- 背景色：#fafaf8 - 螢光燈下的白色
- 強調色：#e60012 - JR 線紅色，引人注目
- 色板名稱：「月台邊緣」
字體：
- 展示字體：Darker Grotesque - 有自信、略微壓縮、歐洲邊緣感
- 內文：Noto Sans JP - 乾淨實用、受交通標誌啟發
- 特色：權威但不冷漠。清晰。有方向性。
配置：
- 密度：豐富但有組織 - 像車站地圖
- 形狀：銳利，但有刻意保留的圓角例外（就像車窗）
- 標誌性元素：強烈的水平色帶，像列車時刻表一樣劃分區塊
動態：
- 程度：微妙但精確
- 簽名動畫：元素像到站的列車一樣從側面滑入 - 水平、流暢、時機精準
通配符：
- 其中一個元素使用了類似織物的紋理疊加 - 這是高級訂製服的碰撞元素
靈感啟動器（當 Q1 卡關時使用）
空間： 曼谷的夜市 | 閉館時的空蕩博物館 | 凌晨 4 點的機場貴賓室 | 老式唱片行 | 醫院候診室 | 賭場樓層 | 冬天的溫室 | 地鐵月台 | 天文台穹頂 | 廢棄工廠 | 豪華遊艇內部 | 24 小時自助洗衣店 | 圖書館善本書室 | 汽車鈑金廠 | 太空站艙體
物品： 1980 年代合成器 | 手術器械 | 老式行李箱 | 賽車 | 古董羅盤 | 工業織布機 | 霓虹燈 | 打字機 | 科學玻璃器皿 | 皮面書 | 電路板 | 瓷器
時代/風格： 蘇聯構成主義 | 曼菲斯設計 | 瑞士國際風格 | 新藝術運動 | 包浩斯 | 風格派 | 古奇建築 | 流線型現代 | 粗獷主義 | 日本代謝派 | 斯堪地那維亞現代主義 | 義大利未來主義
反趨同規則
- 不使用記憶中的色碼 - 從參考中即時產生新顏色，不要回憶「我常用的藍色」
- 必須輪換字型 - 不能在連續的專案中使用相同的展示字型
- 碰撞必須展現 - 如果別人看不出 Q3 的兩種影響，再努力一點
- 通配符是強制性的 - 每個風格都需要一個不「符合」但卻使其獨特的元素
- 為它命名 - 未命名的風格會變得普通。命名的風格具有身份。
快速脈絡問題（最小化版本）
如果使用者只說「幫我做一個登陸頁面」而沒有任何脈絡，請詢問：
- 「哪一個地方或物品最能捕捉這個品牌的能量？」
- 「哪種情緒應該主導？」
- 「這頁面絕不應該看起來像什麼？」
然後根據這三個答案來綜合一個風格。
50% 規則
將 50% 的時間花在英雄區域上。 它是社交媒體的封面圖片，是第一印象，是勾子。其他一切都來自於把英雄區域做對。
區塊構成（從上到下）
1. 英雄區塊（主要焦點）
成敗與否的關鍵元素。必須包含：
- 大標題：尖銳、以利益為導向的鉤子（參考 H1 圖庫以獲得靈感）
- 副標題：支援性的背景說明，最多 1-2 句
- 行動呼籲按鈕：主要動作 + 可選次要動作
- 社交證明：標誌跑馬燈、推薦感言或信任徽章
- 視覺元素：產品照片、插圖或動畫背景
英雄區塊變化：
- 分割配置（左側文字，右側視覺）
- 居中並帶有浮動元素
- 滿版背景加上疊加文字
- 不對稱且帶有裝飾元素
2. 功能/優勢區塊
展示產品的功能。選項：
- 便當盒網格：不對稱佈局中的卡片（由 Apple 推廣）
- 交替行：圖像 + 文字，左右交替
- 圖標網格：帶有簡短說明的簡單圖標
- 互動卡片：懸停狀態、微動畫
3. 社交證明區塊
透過以下方式建立信任：
- Logo 輪播（跑馬燈動畫）
- 附有照片的推薦感言卡片
- 帶有動畫計數器的統計數據/指標
- 案例研究摘要
4. 運作方式區塊
逐步解釋：
- 編號步驟（01, 02, 03 模式增加精緻感）
- 黏性滾動搭配漸進式揭露
- 時間軸或流程圖視覺化
5. 定價區塊（如果適用）
- 2-3 層比較
- 突出顯示的「推薦」層
- 功能比較表
- 下方常見問題手風琴選單
6. 行動呼籲區塊
最終轉換推力：
- 重述價值主張
- 強而有力的大標題
- 單一、聚焦的行動
- 緊迫感元素（如果是真實的）
7. 頁尾
- 導覽連結
- 社交圖標
- 法律連結
- 可選的電子報註冊
反 AI 垃圾內容原則
圖標：避免使用 Lucide（過度使用）
改用：
- Iconify Solar：多種樣式（線條、虛線、雙色）
- Heroicons：當你需要 Apple 般的簡潔時
- Phosphor：靈活的粗細系統
- 自訂 SVG：用於品牌區隔
字體：消滅 Inter/Roboto
有區別性的替代方案：
- 展示字體：Newsreader, Playfair Display, Space Grotesk, Clash Display
- 內文字體：Outfit, Plus Jakarta Sans, Manrope, Satoshi
- 等寬字體：JetBrains Mono, IBM Plex Mono, Fira Code
顏色：不要用紫色漸層
大膽的替代方案：
- 深海軍藍 + 電力感強調色
- 溫暖中性色 + 單一流行色
- 單色搭配色調深淺變化
- 深色模式搭配霓虹強調色
- 大地/有機色板
佈局：打破格線
- 元素重疊
- 對角線區塊
- 不對稱間距
- 突破容器邊界的英雄元素
- 將負空間作為設計元素
動畫詞彙表
入場動畫
fade-in：簡單的不透明度轉場blur-in：開始模糊，然後變清晰slide-in：基於方向的入場scale-in：從小尺寸放大到完整尺寸stagger：子元素依序揭露
連續動畫
marquee：無限水平滾動（Logo、推薦感言）beam：沿著路徑/邊框移動的光線pulse：微妙的縮放/不透明度呼吸效果float：輕柔的上下移動rotate：持續旋轉（圖標、裝飾）
互動動畫
hover-lift：輕微的 Y 軸位移 + 陰影hover-glow：邊框/陰影顏色變化hover-reveal：隱藏元素出現click-ripple：Material 風格的回饋
裝飾元素
- 垂直格線（基於容器尺寸）
- 元素之間的曲線連接線
- 背景中的漸層球體/斑點
- 顆粒/噪點紋理疊加
- 幾何形狀（圓形、帶圓角的矩形）
設計資源
英雄區塊靈感
- Superhero (superhero.design)：策劃的英雄區塊
- Dribbble：搜尋「hero section」、「landing page」
- Awwwards：獲獎設計
區塊模式
- Mobin：具有區塊分解的真實網站
- 便當盒網格：卡片配置靈感
- 行動呼籲圖庫：行動呼籲模式
字體
- Google Fonts：免費、AI 可存取的網頁字型
- Fontshare：免費高品質字型
- H1 圖庫：標題靈感
圖標與Logo
- Iconify：統一的圖標 API (Solar, Heroicons 等)
- Simple Icons：品牌標誌 (SVG)
- Heroicons：Tailwind 的圖標集
實施工作流程
階段 1：研究與收集
- 收集 5-10 個英雄區塊截圖作為線框
- 識別所需的區塊模式
- 選擇圖標集與字型配對
- 定義色板
階段 2：英雄區塊開發
- 根據最佳參考截圖產生英雄區塊
- 迭代：更改顏色、字型、配置
- 加入動畫（光束、淡入等）
- 加入裝飾元素（曲線、格線、數字）
- 精煉直到具有區別性
階段 3：區塊建置
- 一次加入一個區塊（而不是一次全部加入）
- 每個區塊參考特定的元件/截圖
- 從英雄區塊維持顏色/字型一致性
- 加入特定區塊的動畫
階段 4：打磨
- 修復回應式斷點（行動裝置、平板、桌機）
- 將佔位圖片替換為真實/高品質資產
- 最佳化動畫以提升效能
- 測試所有互動元素
階段 5：呈現
- 使用無限畫布配置建立封面截圖
- 突出顯示英雄區塊
- 包含行動裝置和桌機檢視
- 加入微妙的背景（模糊漸層、圖案）
提示模式
英雄區塊生成
為 [產品類型] 建立一個英雄區塊。
更改文字、名稱和數字以符合 [品牌]。
使用 Iconify Solar 圖標（雙色風格）。
使用 [字型] 作為標題。
加入垂直的容器尺寸格線。
加入 01, 02, 03 步驟指示器以增加精緻感。
使用 [顏色] 作為主色，深色模式。
區塊新增
改編一個新的 [區塊類型] 區塊。
匹配英雄區塊的配色方案和字體。
使用跑馬燈動畫顯示 Logo。
加入淡入模糊入場動畫。
保持英雄區塊完全不變。
動畫增強
將光線動畫加入到主要按鈕邊框。
光線應為 1px 寬，持續繞著膠囊形狀移動。
為功能卡片加入微妙的懸浮抬升效果。
負面提示（什麼不要更改）
不要更改英雄區塊。
保持導航欄完全照舊。
不要修改現有的動畫。
品質檢查清單
視覺區別性
- 沒有通用的紫色漸層
- 非預設的圖標集（不是 Lucide）
- 有區別性的字型配對
- 至少一個「令人難忘」的元素
- 透過 CSS 變數維持一致的色彩系統