whicencer/product-landing

Product Landing

為單一產品建立一頁式行銷網站，採用一致的視覺風格。 references/ 中的區塊檔案包含詳細規則，此檔案則說明工作流程及所有區塊共用的規則。

工作流程

步驟 1 — 詢問（僅一條訊息，在撰寫任何程式碼之前）

在一條訊息中收集以下必要資訊。請使用使用者的語言提問。

• 如果使用者已在請求中提供某項資訊，則跳過該項。
• 如果沒有任何遺漏，則完全跳過此步驟。
• 為每一項提供預設值，以便使用者簡短回答或直接跳過。

項目	跳過時的預設值
產品名稱 + 一句話描述產品功能	— （必要，不可跳過）
4–8 個主要功能	從產品描述推導
主要動作：按鈕文字 + 連結	"開始使用" → #
定價：方案、價格、貨幣 — 或「無定價區段」	無定價區段
品牌色	#229ED9

請勿詢問法定名稱、地址、聯絡方式或法律頁面連結 — 請使用佔位符（請參閱步驟 5）。 請勿進行多輪詢問。收到回答後，直接開始建置。

步驟 2 — 規劃

在內部決定，無需詢問：

• 功能展示模式（agent / command / search / task）— 請參閱 references/features.md。
• 每個功能 1–3 個範例，3–4 個「運作方式」步驟，所有標題與文案。

步驟 3 — 讀取區塊規則

在建置每個區塊之前，按照頁面順序讀取對應檔案：

1. references/hero.md — 導覽列 + 英雄區
2. references/features.md — 功能展示 + 表格（使用 assets/feature-showcase.js）
3. references/how-it-works.md
4. references/pricing.md — 若無定價區段則跳過
5. references/final-cta.md
6. references/footer.md

步驟 4 — 建置

輸出以下檔案結構（除非使用者要求框架）：

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — 僅含標記。沒有 <style> 區塊，沒有 style="" 屬性（除非腳本設定），沒有內嵌 JS。唯一允許的內嵌 <script> 是功能區段的 JSON 範例區塊。

• css/styles.css — 所有樣式。以 :root 上的設計標記開頭，然後按頁面順序列出各區段，每個區段上方有註解標題（如 /* ===== Hero ===== */）。

• js/main.js — 由你編寫的頁面行為（導覽列狀態、行動選單、頁尾年份等）。

• js/feature-showcase.js — 逐字複製 assets/feature-showcase.js。切勿將其合併至 main.js 或編輯它。

• 引入檔案方式如下：

  • 在 <head> 中加入 <link rel="stylesheet" href="css/styles.css">；
  • 在 <head> 結尾處加入 <script src="js/feature-showcase.js" defer></script> 與 <script src="js/main.js" defer></script>。

• 僅使用純腳本 — 無 type="module"，無 import。頁面必須能直接從磁碟開啟執行（file://）。

• 僅使用相對路徑，以便資料夾可直接上傳至任何主機。

步驟 5 — 檢查與回報

1. 逐一檢查每個區塊檔案的清單以及下方的全域清單。修正任何未通過的項目。
2. 回覆使用者，列出所有需要使用者填寫的佔位符（法定名稱、地址、聯絡方式、法律頁面連結、# 連結、$XX 價格）。

全域規則

事實

切勿虛構與業務相關的事實：價格、方案、數字、客戶名稱、推薦見證、法定名稱、地址、電子郵件、帳號、URL。請使用明顯的佔位符，並在步驟 5 中列出。

設計標記

將以下內容定義為 :root 上的 CSS 變數，並僅使用這些變數：

:root {
  --brand: #229ED9;              /* 由使用者的品牌色取代 */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* 卡片、面板 */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• 僅亮色主題。一個強調色（--brand）；其餘皆為黑色、灰色與白色。
• 字型：來自 Google Fonts 的 Inter（粗細 400、500、600、700、800）。
• 圖示：透過 https://unpkg.com/@phosphor-icons/[email protected] 引入的 Phosphor Icons（固定版本）。

區段標題（功能、運作方式、定價共用）

• H2：clamp(32px, 5vw, 48px)，粗細 800，letter-spacing: -0.03em，line-height: 1.05，--text，左對齊。
• 選擇性副標題：18px，一般粗細，--text-muted，最大寬度約 540px，下方 12px。

間距與節奏

• 內容容器：max-width: var(--container)，左右內邊距 24px（行動裝置 16px）。
• 區段之間的垂直間距：clamp(80px, 12vw, 140px)。
• 輕量區段與重量區段交替。切勿連續放置兩個互動區段。

文案

• 平實、具體、人性化。短句。使用真實名詞與數字。
• 禁用詞：無縫、強大、革命性、解鎖、超能、輕鬆、尖端。
• 所有頁面文案使用使用者要求的語言（預設：產品描述的語言）。

動態效果

• 僅使用微妙效果：懸浮上移、150–250ms 轉場、可選的一次性滾入淡入效果。
• 所有效果皆尊重 prefers-reduced-motion。
• 頁面上唯一的循環動畫是英雄區品牌標誌脈衝（請參閱 references/hero.md）。無其他無限動畫。

全域檢查清單

• 僅包含步驟 3 所列的區段，且依序排列。
• 僅使用標記中的顏色；一個強調色。
• 無虛構業務事實；所有佔位符皆已回報給使用者。
• 英雄區 CTA、導覽列 CTA 與最終 CTA 為相同動作。
• 在 375px 寬度下無水平捲動；行動裝置上所有內容皆可讀。
• 基本鍵盤與螢幕閱讀器支援：真實按鈕、替代文字、可見的焦點狀態。
• 每個內嵌 <script> 僅在其實際結束標籤處結束：JS 程式碼、註解或字串內不得包含 </script。
• 檔案：index.html、css/styles.css、js/main.js、js/feature-showcase.js — 無其他檔案，無內嵌 CSS/JS。
• js/feature-showcase.js 與 assets/feature-showcase.js 完全相同。
• JSON 範例區塊中不包含 </script 文字。
• 頁面可直接從磁碟開啟 index.html 運作。