著陸頁面設計 是做什麼的？
概述
建立既能轉換又能吸引目光的著陸頁面。這項技能結合了以轉換為導向的結構與獨特的視覺設計，創作出在 AI 充斥的世界中脫穎而出的頁面。目標：創造價值 $50-100、你會引以為傲且願意銷售的頁面。
強制執行：氛圍探索（請先執行此步驟）
在開始撰寫任何程式碼之前，你必須執行「氛圍探索」流程。 這不是一個查詢表，而是一個每次都能產生獨特美學方向的創意提示。
目標：即使產品類似，任何兩個著陸頁面也應該看起來截然不同。
氛圍探索流程
向使用者提出這些問題，然後綜合出一個獨特的方向。不要只是將答案對應到預設選項。
步驟 1：收集背景脈絡（提出以下問題）
Q1：這個品牌在現實世界中會是哪個地方或物體？
不是「哪個行業」，而是一個實際具體的東西。凌晨兩點的東京便利商店。祖母的廚房。粗獷風格的停車場。珊瑚礁。波音747的駕駛艙。摩洛哥的跳蚤市場。1970年代的錄音室。
Q2：人們在前 3 秒內應該感受到的「一種」情緒是什麼？
選擇一種：平靜。充滿活力。好奇。被信任。愉悅。印象深刻。叛逆。懷舊。受啟發。愉快。精緻。受歡迎。好奇。自信。
Q3：選擇兩種意想不到的風格來碰撞：
範例：「醫療包裝 + 滑板圖樣」、「試算表 + 街頭藝術」、「豪華飯店 + 龐克雜誌」、「NASA任務控制中心 + 幼稚園」、「日本便利商店 + 維多利亞圖書館」
Q4：這個頁面絕對不可以被誤認為是什麼？
舉出 2-3 個要積極避免的具體事物。「一個加密貨幣項目」、「一個健康應用程式」、「銀行做的東西」、「任何帶有紫色漸層的東西」
步驟 2：創造美學（不要查詢建立好的風格，自己創造）
根據答案，透過決定以下事項來創造獨特的氛圍：
色彩創造（不要使用記憶中的調色盤，從 Q1 的實體參考物衍生）
- Q1 中那個真實世界的地方/物體有哪些顏色？
- 提取 3-4 種對該參考物來說感覺真實的顏色
- 全新發明具體的十六進位色碼，不要重複使用之前專案的色碼
- 為你的調色盤取一個引人聯想的名稱（不是「藍色和橘色」，而是像是「Midnight Bodega」或「Rust Belt Morning」）
字體創造（讓字體的聲音與 Q3 的碰撞風格相符）
- 在那個地方，文字聽起來會像什麼？
- 找一個能體現 Q3 碰撞風格的顯示字體
- 不要預設使用你常用的字體，用全新的眼光瀏覽 Google Fonts
- 考慮：字重、字寬、對比度、獨特性
佈局創造（從實體空間衍生）
- Q1 中的那個地方是如何組織空間？
- 是擁擠還是寬敞？網格狀還是有機形狀？垂直還是水平？
- 哪種意想不到的佈局選擇能體現 Q3 的碰撞風格？
動畫創造（與情緒匹配）
- Q2 的情緒是如何「動」的？
- 平靜 = 幾乎察覺不到。精力充沛 = 動感。精緻 = 緩慢而從容。
- 定義這個頁面的一項標誌性動畫是什麼？
步驟 3：撰寫你的氛圍規格
在編碼之前，明確寫出以下內容：
氛圍名稱：[發明一個 2-3 字的名稱]
參考：[來自 Q1 的地方/物體]
情緒：[來自 Q2]
碰撞：[來自 Q3]
反模式：[來自 Q4]
色彩：
- 主色：[hex] - [為什麼選這個顏色]
- 次要：[hex] - [為什麼]
- 背景：[hex] - [為什麼]
- 強調：[hex] - [為什麼]
- 調色盤名稱：[引起共鳴的名稱]
字體：
- 顯示字體：[具體字體名稱] - [為什麼適合]
- 內文字體：[具體字體名稱] - [為什麼]
- 性格：[描述風格]
佈局：
- 密度：[稀疏/平衡/密集]
- 形狀：[銳利/圓潤/有機/混合]
- 標誌性元素：[一個不尋常的佈局選擇]
動畫：
- 程度：[靜止/微妙/中等/動態/混亂]
- 標誌性動畫：[一個定義此頁面的具體動畫]
驚喜元素：
- 一個不符合整體風格，但能讓頁面令人難忘的意外細節
步驟 4：新鮮度檢查
在繼續之前，請確認：
- 我沒有重複使用最近 3 個專案的十六進位色碼
- 我沒有預設使用我「舒適圈」的字體（檢查：我是否用了 Inter、Nunito、Space Grotesk？如果是，找別的）
- Q3 的碰撞風格在我所做的選擇中確實可見
- 別人不會誤認為這是我之前的著陸頁面
- 我加入了一個連我自己都感到驚喜的意外元素
氛圍探索範例
Q1 - 地方/物體：「一個尖峰時刻的日本火車站」
Q2 - 情緒：「自信」
Q3 - 碰撞：「交通標誌 + 高級訂製服」
Q4 - 絕對不要被誤認為：「一個冥想應用程式、任何異想天開的東西、創業仔的科技風格」
生成的氛圍規格：
氛圍名稱：Shinjuku Runway
參考：尖峰時刻的日本火車站
情緒：自信
碰撞：交通標誌 + 高級訂製服
反模式：沒有柔和漸層、沒有俏皮插圖、沒有圓潤友善的形狀
色彩：
- 主色：#1a1a1a - 車門的黑色
- 次要：#f5f5f0 - 月台混凝土，磨損光滑
- 背景：#fafaf8 - 螢光燈照亮的白色
- 強調：#e60012 - JR 線紅色，引人注目
- 調色盤名稱：「Platform Edge」
字體：
- 顯示字體：Darker Grotesque - 自信、略窄、歐洲風
- 內文字體：Noto Sans JP - 乾淨實用、交通風格
- 性格：權威但不冷漠。清晰。有方向性。
佈局：
- 密度：豐富但有組織 - 像車站地圖
- 形狀：銳利形狀但有刻意設計的圓角例外（像火車車窗）
- 標誌性元素：強烈的水平色帶分隔各區塊，像火車時刻表
動畫：
- 程度：微妙但精確
- 標誌性動畫：元素像進站火車一樣從側邊滑入 - 水平、流暢、時機精確
驚喜元素：
- 一個元素使用類似織物的紋理疊加 - 回應高級訂製服的碰撞
靈感起點（當 Q1 卡住時）
空間： 曼谷夜市 | 閉館時的空蕩博物館 | 凌晨四點的機場貴賓室 | vintage 唱片行 | 醫院候診室 | 賭場 | 冬天的溫室 | 地鐵月台 | 天文台圓頂 | 廢棄工廠 | 豪華遊艇內部 | 24小時自助洗衣店 | 圖書館珍本室 | 汽車鈑金廠 | 太空站艙體
物體： 1980年代合成器 | 手術器械 | 復古行李箱 | 賽車摩托車 | 古董指南針 | 工業織布機 | 霓虹燈招牌 | 打字機 | 科學玻璃器皿 | 皮革裝訂書籍 | 電路板 | 瓷器盤具
時代/運動： 蘇聯構成主義 | 孟菲斯設計 | 瑞士國際主義 | 新藝術運動 | 包浩斯 | 風格派 | Googie 建築 | 流線型現代風格 | 粗獷主義 | 日本代謝主義 | 斯堪地那維亞現代主義 | 義大利未來主義
反收斂規則
- 不能記憶十六進位色碼 - 從參考資料新鮮生成顏色，不要回憶「我常用的藍色」
- 必須輪換字體 - 不能在連續的專案中使用相同的顯示字體
- 碰撞必須可見 - 如果人們無法從 Q3 中看到兩種影響，請再努力一點
- 驚喜元素是強制的 - 每個氛圍都需要一個不「契合」但使其獨特的元素
- 為它命名 - 未命名的氛圍會變得平庸。命名的氛圍才有身份認同。
快速背景問題（最小化版本）
如果使用者只說「幫我做個著陸頁面」而沒有提供任何背景，請詢問：
- 「哪個地方或物體最能捕捉這個品牌的能量？」
- 「哪種情緒應該主導？」
- 「這個頁面絕對不能看起來像什麼？」
然後根據這三個答案綜合出一個氛圍。
50% 法則
將 50% 的時間花在英雄區塊上。 它是社交媒體的封面圖片、第一印象、吸引目光的鉤子。其他一切都始於正確的英雄區塊。
區塊構成（從上到下）
1. 英雄區塊（主要重點）
成敗的關鍵。必須包含：
- 標題：尖銳、以利益為導向的鉤子（參考 H1 Gallery 獲取靈感）
- 副標題：補充背景，最多 1-2 句
- 行動呼籲按鈕：主要行動 + 可選次要行動
- 社交證明：標誌跑馬燈、推薦或信任徽章
- 視覺元素：產品照片、插圖或動畫背景
英雄區塊變體：
- 分割佈局（文字左、視覺右）
- 置中並帶有浮動元素
- 滿版背景並疊加文字
- 帶有裝飾元素的不對稱佈局
2. 功能/效益區塊
展示產品的功能。選項：
- Bento Grid：以不對稱佈局排列的卡片（Apple 推廣）
- 交替行：圖片+文字，左右交替
- 圖示網格：簡單圖示搭配簡短說明
- 互動卡片：懸停狀態、微動畫
3. 社交證明區塊
透過以下方式建立信任：
- 標誌輪播（跑馬燈動畫）
- 附照片的推薦卡片
- 帶動畫計數器的統計數據
- 案例研究摘要
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：無限橫向滾動（標誌、推薦）beam：沿著路徑/邊框移動的光pulse：微妙的縮放/不透明度呼吸效果float：輕柔的上下移動rotate：持續旋轉（圖示、裝飾）
互動動畫
hover-lift：微妙的 Y 軸位移 + 陰影hover-glow：邊框/陰影顏色變化hover-reveal：隱藏元素出現click-ripple：Material 風格的回饋
裝飾元素
- 垂直網格線（基於容器大小）
- 元素之間的曲線連接器
- 背景中的漸層光暈/團塊
- 顆粒/噪點紋理疊加
- 幾何形狀（圓形、圓角矩形）
設計資源
英雄區塊靈感
- Superhero (superhero.design)：精選的英雄區塊
- Dribbble：搜尋「hero section」、「landing page」
- Awwwards：獲獎設計
區塊模式
- Mobin：真實網站及其區塊分解
- Bento Grids：卡片佈局靈感
- CTA Gallery：行動呼籲模式
字體
- Google Fonts：免費、AI 可存取的字體
- Fontshare：免費高品質字體
- H1 Gallery：標題靈感
圖示與標誌
- Iconify：統一的圖示 API（Solar, Heroicons 等）
- Simple Icons：品牌標誌（SVG）
- Heroicons：Tailwind 的圖示集
實作工作流程
第一階段：研究與收集
- 收集 5-10 個英雄區塊的螢幕截圖作為線稿
- 確定需要的區塊模式
- 選擇圖示集和字體搭配
- 定義色彩調色盤
第二階段：英雄區塊開發
- 根據最佳參考截圖生成英雄區塊
- 疊代：更改顏色、字體、佈局
- 加入動畫（光束、淡入等）
- 加入裝飾元素（曲線連接器、網格、數字）
- 調整直到獨特
第三階段：區塊建置
- 一次只加入一個區塊（不要全部加入）
- 參考每個區塊的特定元件/截圖
- 保持與英雄區塊一致的色彩/字體
- 加入特定區塊的動畫
第四階段：打磨
- 修正響應式斷點（手機、平板、桌機）
- 將佔位圖片替換為真實/高品質資源
- 最佳化動畫效能
- 測試所有互動元素
第五階段：呈現
- 使用無限畫布佈局建立封面截圖
- 突出顯示英雄區塊
- 包含手機和桌機檢視
- 加入微妙的背景（模糊漸層、圖案）
提示詞模式
生成英雄區塊
為 [產品類型] 建立一個英雄區塊。
更改文字、名稱和數字以符合 [品牌]。
使用 Iconify Solar 圖示（duotone 風格）。
標題使用 [字體]。
加入基於容器大小的垂直網格線。
加入 01, 02, 03 步驟指示器以增添精緻感。
使用 [顏色] 作為主色，暗色模式。
加入區塊
新增一個 [區塊類型] 區塊。
匹配英雄區塊的配色方案和字體。
為標誌使用跑馬燈動畫。
加入淡入模糊入場動畫。
完全保留英雄區塊。
動畫增強
為主按鈕邊框加入光束動畫。
光束應為 1px，在藥丸形狀周圍持續移動。
為功能卡片加入微妙的懸停抬起效果。
負面提示詞（不要更改什麼）
不要更改英雄區塊。
完全保留導航列。
不要修改現有動畫。
品質檢查清單
視覺獨特性
- 沒有通用的紫色漸層
- 非預設的圖示集（不是 Lucide）
- 獨特的字體搭配
- 至少有一個「令人難忘」的元素
- 透過 CSS 變數實現一致的色彩系統
技術品質
...
[因翻譯而截斷]