bittencourtthulio/perfect-landing-page

Perfect Landing Page

在一個 HTML 檔案中生成完整的首頁（內嵌 HTML + CSS + JS，僅 Google Fonts 為外部資源），準備好在瀏覽器中開啟並發佈。

參考範例為 exemplos/osvaldo-software.html（一款手機殼店鋪管理軟體的案例）。它是經過多輪審閱後產生的，目標是讓頁面「專業且看起來不像 AI 生成」。

何時使用

• 為公司建立網站、登陸頁面或首頁。
• 要求「與範例相同風格」或「像這個參考網站」的請求。
• 要求重做現有網站，使其看起來更專業。

不適用於：需要登入/後端系統的網站、具有購物車的商店、多頁面網站或社群媒體貼文。

步驟 1：簡報（僅詢問缺少的資訊）

如果專案中已有簡報檔案（BRIEFING.md、BRIEFING2.md），請閱讀並使用它。否則，根據請求中已提供的資訊，在一輪對話中只詢問不清楚的部分：

1. 公司名稱及其銷售的產品/服務（領域/利基市場）。
2. 主要差異化優勢：公司希望訪客記住的唯一一件事。這會組織整個頁面。
3. 目標客戶：誰會購買，以及他們的日常工作是怎樣的。
4. 功能或服務（3 到 6 項）。如果使用者不知道，根據利基市場提出建議，並告知這些是建議。
5. 聯絡方式：電話、WhatsApp、電子郵件。如果沒有，使用明顯的佔位符，例如 (00) 0000-0000。
6. 顏色或視覺風格（可選）。如果沒有，根據利基市場推斷。

如果使用者已經提供了足夠的資訊，則不要問任何問題：直接開始撰寫，讓後續調整留到之後再說。

如果使用者提供了參考網站，在開始撰寫之前先進行分析：字體、英雄區、內容密度、邊角與邊框、各區塊的節奏、頁尾。提取其設計原則，而不是直接複製。參考網站中依賴公司未提供資料的區塊（例如客戶見證、客戶標誌、方案與價格）不應包含在內：在交付結果時說明這一點，並列出解鎖每個區塊所需的資料。

步驟 1b：圖片（自動執行，永不詢問）

在開始撰寫之前，從專案根目錄執行：

python3 -I <技能資料夾>/scripts/gerar_imagens.py --detectar

（<技能資料夾> 是此技能安裝的位置，例如 ~/.claude/skills/perfect-landing-page；該腳本只輸出 sim 或 nao，絕不輸出金鑰）

• sim：專案的環境檔案中包含 OpenRouter 金鑰。使用圖片生成網站，無需詢問或要求確認（參閱步驟 2c）。
• nao：不使用圖片生成網站，無需詢問或告知「缺少金鑰」。頁面是無照片版本（產品畫面與色塊），這已經是一個完整的頁面。僅在交付時用一行說明它是在沒有圖片的情況下生成的。
• 切勿讀取、列印或評論環境檔案的內容。只有腳本可以觸及它。

步驟 2：視覺方向

讓頁面看起來專業的關鍵是節制。在編碼之前先定義：

• 短色板：品牌的深色、一個強調色、淺色區塊用的中性米白色，以及兩種文字灰色（一種用於深色背景，一種用於淺色背景）。如果品牌是黑色，使用純黑色（#000），而不是近似黑色。所有顏色都作為 CSS 變數放在 :root 中：更換品牌形象只需修改這些變數。
• 強調色只出現在少數地方：主要按鈕、H1 的最後一行、啟用中的項目以及產品畫面後方的色塊。不要使用發光、漸層或整個區塊都使用強調色。
• 淺色強調色上的文字（例如黃色）始終使用品牌的深色，而不是白色。在淺色背景上，不要使用強調色作為文字顏色。
• 區塊交替使用深色和淺色背景，從邊緣延伸到邊緣。英雄區、模組區和頁尾為深色；差異化區和聯絡區為淺色。
• 字體：僅使用一種無襯線字體，透過字重與大小建立層級。避免使用已成為 AI 生成網站標準的字體（如 Space Grotesk、單獨使用 Inter、襯線+無襯線組合）。在選擇之前，用 4 到 6 個 Google Fonts 候選字體渲染實際的 H1，並在截圖中比較。在範例中：Hanken Grotesk，字重 400 到 800。
• 適中的比例：H1 最大約 52px（字重 800，行高 1.05，負字距），H2 最大約 40px，內文 16 到 18px。過大的標題和誇張的留白是模板的標誌。
• 根據層級設定圓角：按鈕與輸入框 8px，視窗 12px，卡片 16px，色塊 28px。不要使用藥丸形狀或統一半徑。
• 使用細邊框代替陰影。陰影僅用於產品視窗下方。
• 按鈕為矩形，沒有彩色發光，文字中沒有箭頭。
• 頁面上不使用表情符號。圖示、頭像、聯絡資訊、WhatsApp 按鈕或確認訊息中也不使用。

會出賣 AI 生成網站的跡象（避免）

• 英雄區中的徽章或藥丸形狀帶有閃爍的點。
• 每個標題上方都有大寫的標籤。
• 並排的相同卡片網格用來展示功能。
• 傾斜的卡片、角落的放射狀發光、按鈕上的彩色陰影。
• 移動的文字橫幅（跑馬燈）。
• 為了「錨點數據」而隨意編造的大數字（例如在沒有數字的地方寫上「中國」）。
• 每個區塊都有向上浮現的動畫。
• 標準的表情符號和庫存圖示。
• 用點號連接的文字（「A · B · C」）以及按鈕末尾的箭頭。

步驟 2b：手繪圖示（強制）

• 使用自訂 SVG 繪製圖示，每個業務概念一個，並將它們全部集中在 <body> 開頭的一個隱藏 <svg> 中，使用 <symbol>；在需要的地方使用 <svg><use href="#i-名稱"/></svg>。
• 所有圖示保持相同的視覺風格：viewBox 32x32（聯絡圖示用 24x24），2px 描邊，圓頭端點，顏色使用 currentColor，並帶有一個使用 var(--accent) 填充的強調色細節。當圖示位於強調色背景上時，將 --accent 替換為白色。
• 賦予圖示利基市場的意義（例如蔬果店用葉子，手機殼店用手機殼）。
• 避免使用顯而易見的圖示（閃電、握手、鎖頭、火箭）。偏向於業務的隱喻。

步驟 2c：生成的圖片（僅在步驟 1b 返回 sim 時執行）

生成 3 張圖片，涵蓋所有需求（成本僅需幾分錢）：hero（背景）、diferencial（支援差異化區塊）和 contato（標題旁）。

1. 在專案根目錄撰寫 imagens.json，包含一個共用的 estilo 和葡萄牙語的提示詞。風格固定為：寫實的編輯式攝影、電影級燈光、品牌的色板（主導的深色、強調色作為光線）、沒有文字、字母、標誌、真實品牌或浮水印。
2. 每個提示詞描述目標客戶及其日常，而不是軟體：客戶的工作地點（對手機殼店來說，是擺滿手機殼的櫃檯）、正在解決差異化優勢任務的雙手、服務過程。不要出現電腦螢幕或介面（會變得難以辨識）。
   • hero（16:9，型號 pro）：廣角場景，左側較暗且空曠，用於放置文字。
   • diferencial（4:5，型號 flash）：差異化優勢所解決任務的特寫，俯視角度。
   • contato（3:2，型號 flash）：服務的人性化時刻，包裝上沒有文字，也沒有招牌（"embalagem lisa, nenhuma placa ou palavra visível"）。
3. 執行 python3 -I <技能資料夾>/scripts/gerar_imagens.py imagens.json（若要重新生成單張圖片，在末尾傳入其名稱）。圖片輸出在 imagens/*.jpg。沒有 16:10 的比例：請使用 3:2。
4. 在每個圖片使用前檢查它。如果圖片包含文字、可辨識的標誌、變形的手或臉，或場景與利基市場不符，則重新生成（僅重新生成失敗的那張）。每張圖片最多重新生成 2 次。
5. 在 HTML 中，圖片位於 imagens/ 並透過相對路徑引用（該資料夾會隨之一起發佈）。請參閱 exemplos/osvaldo-software-com-imagens.html：
   • Hero：將照片設定為區塊的 background，並在上面疊加兩層黑色漸層：水平（從左側約 94% 過渡到右側約 22%）和輕微的垂直。文字始終位於暗色部分。在截圖中測試 H1 和副標題的可讀性。
   • Diferencial：照片放在色塊內，使用 ::before 搭配 filter:brightness(2.4) grayscale(.35) 和 mix-blend-mode:multiply 疊加在強調色上：變成品牌色板的雙色調效果。照片上的說明文字保持淺色。
   • Contato：使用 <img> 與標題形成雙欄佈局，aspect-ratio:3/2、height:auto（否則 height 屬性會拉伸圖片）、loading="lazy"、width/height 以及描述性的 alt 屬性。在手機上會移至文字下方。
   • 圖片的 alt 屬性應說明該圖片是插圖，由 AI 生成。
6. 頁尾的免責聲明改為說明畫面與照片均為插畫，由 AI 生成。生成的圖片絕不展示為真實店面、團隊或客戶照片。

沒有金鑰（nao）：跳過這整個步驟。Hero 保持純黑色，差異化區塊的色塊保持強調色，聯絡區塊保持單欄，如 exemplos/osvaldo-software.html 所示。

步驟 2d：滑鼠互動效果（預設，始終包含）

每個網站都會附帶響應滑鼠的效果，尤其是在英雄區。複製 exemplos/osvaldo-software-com-efeitos.html 的 CSS 區塊和腳本，並僅調整顏色和強度。使用 Canvas 2D 和 requestAnimationFrame，不依賴任何函式庫（不使用 Tween.js 或 GSAP）。

英雄區（最具活力的地方）：

• 圖層：照片（或無圖片時的純色背景）放到一個專屬的 div.hero-bg 中，設定 inset:-36px；在其之上，疊加 div.hero-light 和 canvas.hero-fx，全部設定 aria-hidden 和 pointer-events:none；內容保持在 z-index:3。
• 手電筒光：一個 radial-gradient 使用強調色，搭配 mix-blend-mode:screen，透過 --mx/--my 跟隨滑鼠游標，並在滑鼠移開時消失。
• Canvas 上的光塵：最多 120 個小點（強調色和白色）緩慢上升並閃爍；靠近游標（半徑約 150px）時它們會散開，並透過細線（使用強調色）與游標連接；一個隱約的圓環標示出游標位置。使用 devicePixelRatio（最多 2）並在 resize 時重新計算尺寸。
• 深度：背景朝滑鼠相反方向移動（最多約 22px）；產品視窗以 3D 方式傾斜（最多約 6°），帶有光線反射（::after 搭配 soft-light）；浮動卡片和色塊以不同速度移動，透過 translate 屬性實現（不要使用 transform，以避免與進入動畫衝突）。

頁面其餘部分：

• .tilt 用於重點元素（差異化區塊卡片、畫面面板）：在滑鼠下傾斜最多約 7°（大型面板約 3.5°）並帶有光澤，滑鼠移開時回到中心。
• 磁性按鈕（.btn-y、.btn-k、.fab）：朝游標方向移動約 25%，translate 帶有 transition。

規則：

• 所有移動都透過插值（lerp）平滑處理，絕不跳躍。
• 當英雄區滾出畫面時，英雄區的動畫循環停止（透過 IntersectionObserver）。
• prefers-reduced-motion：不啟用任何效果。
• 無滑鼠環境（pointer: fine 為 false，例如手機和平板）：僅顯示上升的灰塵，不傾斜，不使用磁性按鈕。
• 畫面線條的進入動畫使用 @keyframes（使用 animation 而非 transition）：這在動畫循環運行時更加穩健。
• 效果不改變佈局或文字。如果使用者要求無效果的版本，只需移除腳本區塊和英雄區的三個圖層即可。

步驟 3：頁面結構（按此順序）

所有內容左對齊。每個區塊只執行一個功能；如果兩個區塊說明相同的事，則合併它們。

1. 固定頂欄，深色：一行顯示標誌（品牌 + 名稱），右側是錨點選單、WhatsApp 連結（文字）和 CTA 按鈕。在手機上僅顯示標誌和按鈕。
2. 雙欄英雄區。左側：三行簡短的 H1，結合利基市場和差異化優勢，最後一行使用強調色；兩句副標題；兩個按鈕（實色和輪廓）；按鈕下方一小行支援文字，說明點擊後的結果。標題上方沒有標籤。右側：一個證明差異化優勢的系統視窗，包含側邊選單、搜尋欄和列表，放置在一個延伸到螢幕邊緣的強調色塊上，還有一個帶有選中項目細節的浮動卡片。
3. 靜態橫幅：一行包含 4 句簡短的差異化優勢陳述，每句都有一個圖示，並以細線分隔。
4. 差異化區塊（淺色區塊）：左側是產品畫面的放大特寫，位於強調色塊上，並朝英雄區的相反方向延伸。右側：肯定性的標題、一個段落、三個由線條連接的步驟（"運作方式" 放在這裡）和一個按鈕。
5. 標籤式模組區塊（深色區塊）：左側是標題和段落，接著是編號列表（01, 02...），每個項目都有自訂圖示、名稱和一行說明；啟用的項目會顯示一個句子並獲得一條強調色條。右側是一個固定面板，顯示每個模組的預繪畫面，使用簡單的 HTML/CSS。僅在順序有意義時才編號（在範例中，是貨物的路徑：從供應商到櫃檯）。透過懸停、點擊和鍵盤切換；使用 role="tablist"、role="tab"、role="tabpanel"、aria-selected，且僅在啟用的標籤頁上設定 tabindex。在手機上，面板移至列表下方。使用 4 到 6 個模組。
6. 聯絡區塊（淺色區塊）：以提問形式呈現的標題，差異化優勢的亮點陳述緊接在下方，以及兩個並排的盒子：一個深色盒子包含表單（姓名、公司、WhatsApp），一個強調色盒子包含直接聯絡方式。
7. 多欄頁尾：品牌和一句話、導航、模組和聯絡資訊。底部是版權資訊和畫面為插畫的免責聲明。僅包含確實存在的連結：不要包含社群媒體、部落格或政策，除非有實際頁面。
8. WhatsApp 浮動按鈕，小型，使用強調色。

產品畫面

• 將其繪製成真實產品：側邊選單、搜尋欄、帶有欄位的表格、操作按鈕。淺色畫面在深色背景上形成對比。
• 在所有地方（英雄區、差異化區塊、標籤頁）保持相同的介面。
• 每個畫面都標記為「使用範例數據的插圖」。
• 畫面不能承諾文字無法支持的內容：不要顯示客戶或供應商計數、「已驗證」徽章、截止日期、進口價格或星級評分。

步驟 4：生成

• 在專案根目錄生成一個名為 index.html 的單一 HTML 檔案。
• 使用內嵌的 <style> 和 <script> 區塊；不要使用外部 CSS 或 JS 檔案。
• 在 <head> 中包含 <meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0"> 和一個合適的標題。
• 確保頁面在 Chrome、Firefox 和 Safari 的最新版本中正常運作。不需要支援舊版 IE。
• 驗證後再交付：在瀏覽器中開啟生成的 HTML 並在螢幕截圖中檢查文字可讀性、佈局和效果。

步驟 5：交付

• 提供一個指向 index.html 的連結，準備好在瀏覽器中開啟。
• 說明這個頁面是一個完整的登陸頁面，可在瀏覽器中開啟並發佈，無需外部依賴（字體除外）。
• 如果沒有圖片，用一行說明它在沒有圖片的情況下生成，指出可以新增 OpenRouter 金鑰並重新生成。
• 如果頁面包含的區塊依賴於使用者尚未提供的資料（例如客戶見證、方案與價格），請列出解鎖這些區塊所需的資料。

---

免責聲明：此頁面中的畫面與照片均為插畫，由 AI 生成。它們不代表真實產品、團隊或客戶。