登陸頁面 — 編排器是做什麼的？

輸出目錄：./generated/{slug}-landing（相對於目前工作目錄，或透過 LANDING_PAGE_OUTPUT_DIR 環境變數設定）

步驟 1 — 解析輸入

以 | 分割參數（去除前後空白）：

[0] → company_name（公司名稱，若無則憑空創造一個有創意且符合產業的名稱）
[1] → industry（產業，若無則推斷）
[2] → tagline_hint（標語提示，可選）
[3] → target_audience（目標受眾，可選）
[4] → cta_goal（行動呼籲目標，可選，預設為 "開始免費試用"）

slug = 公司名稱轉小寫、移除重音符號、空格換成連字號。

解析輸出路徑：

OUTPUT_DIR="${LANDING_PAGE_OUTPUT_DIR:-./generated}/{slug}-landing"

步驟 2 — 內容摘要 (landing-page-copy)

使用解析後的輸入呼叫 landing-page-copy 技能。等待完整的 CONTENT_BRIEF 輸出後再繼續。

摘要包含：英雄區文案、功能、見證、常見問題、關於我們、定價方案、部落格文章、案例研究、導覽標籤。此文案是產生網站中所有文字的唯一真實來源 — 在程式碼生成階段請勿自行編造文案。

步驟 3 — 設計 + SEO（平行執行）

3-A. 設計智慧 (ui-ux-pro-max)

平行執行以下 3 個指令：

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --design-system -p "{company_name}"
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --domain color -n 3
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry} landing page" --domain typography -n 3

注意：需安裝 ui-ux-pro-max 技能。若無法使用，請直接根據產業和品牌背景綜合出設計摘要。

綜合產生設計摘要：

視覺氛圍（3-5 個形容詞）
調色盤：主要、次要、強調、背景、背景柔和、背景卡片、表面、文字、文字淡色、文字反白、邊框、邊框柔和、點
字體：標題字體 + 正文字體（必須存在於 Google Fonts 中）
佈局決策：英雄區類型、功能區佈局、見證區樣式
動畫風格：微妙 / 適中 / 表現豐富
簽名細節：一個能讓此頁面令人難忘的獨特視覺元素

3-B. SEO 計畫 (landing-page-seo)

使用 company_name、industry 和 CONTENT_BRIEF 呼叫 landing-page-seo 技能。等待完整的 SEO_PLAN 輸出。

該計畫包含：每個頁面的 meta 標籤、結構化標記類型、Sitemap 設定、Core Web Vitals 建置提示、AI SEO 提示。

步驟 4 — 寫入所有檔案

建立 {OUTPUT_DIR}，然後使用「寫入」工具從頭開始寫入每個檔案。所有文案使用 CONTENT_BRIEF，所有 meta/結構化資料使用 SEO_PLAN。不使用範本，沒有佔位文字。

4-A. 基礎設施

package.json：

{
  "name": "{slug}-landing",
  "version": "0.1.0",
  "private": true,
  "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
  "dependencies": {
    "next": "^16.2.7",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "lucide-react": "^0.474.0",
    "framer-motion": "^12.40.0"
  },
  "devDependencies": {
    "@next/mdx": "^16.2.7",
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@types/mdx": "^2.0.0",
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^3.4.1",
    "postcss": "^8.5.10",
    "autoprefixer": "^10.0.1"
  }
}

版本：已驗證的技術棧 Next 16 + React 19 + framer-motion 12 + lucide-react 0.474（output: 'export' 建置正常）。請勿將 next 固定到 14.2.0，也不要將 react/react-dom 固定到 ^18（這些版本存在漏洞 — Next 於 2025-12-11 發布的重大安全性建議）。lucide-react 必須 >= 0.474（0.378 及 < 0.474 的版本未宣告對 React 19 的同儕依賴，會導致 npm install 失敗）。

next.config.js：

const withMDX = require('@next/mdx')()
module.exports = withMDX({
  output: 'export',
  images: { unoptimized: true },
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
})

tsconfig.json：標準 Next.js tsconfig，使用 @/* 路徑別名指向 ./，並設定 "jsx": "react-jsx"（Next 16 使用 React 自動執行環境 — "preserve" 在建置時會自動被改寫）

tailwind.config.ts：

darkMode: 'class'
fontFamily：標題 + 正文 CSS 變數
animation：marquee、float、line-grow
keyframes：marquee translateX(0%)→translateX(-50%)、float、lineGrow

postcss.config.js：tailwind + autoprefixer

mdx-components.tsx：將 h1 h2 h3 p ul li strong blockquote 對應到使用 CSS 變數的樣式化元素

app/globals.css：

@tailwind base/components/utilities
:root 中的 CSS 變數 — 來自設計摘要的所有設計權杖
html.dark { ... } — 覆蓋深色模式下的所有變數
body 使用 CSS 變數，並帶有 background-color 和 color 的過渡效果
自訂工具類別：.text-gradient、.dot-grid、.glass-card、.bracket-card、.clip-diagonal-bottom、.clip-diagonal-top
規則：元件中的每個顏色引用都使用 CSS 變數 — 零個硬編碼的十六進位色碼

4-B. 元件

每個元件撰寫為 .tsx。每個元件從 lib/data.ts 讀取文案。所有顏色透過 CSS 變數。

components/DarkModeToggle.tsx：

'use client'，在掛載時讀取 localStorage，切換 <html> 上的 dark class
保留偏好設定，使用 lucide-react 的 Sun/Moon 圖示

components/LogoCarousel.tsx：

'use client'，純 CSS marquee（animate-marquee），無 JS 滾動
品牌名稱來自 lib/data.ts，重複以實現無縫循環

components/ContactForm.tsx：

'use client'，狀態：'idle' | 'sending' | 'sent' | 'error'
<form data-netlify="true" name="contact"> 帶隱藏的 form-name
欄位：姓名、電子郵件、公司、訊息
提交：fetch('/', { method: 'POST', body: new URLSearchParams(new FormData(form)) })

components/Navbar.tsx：固定、感知滾動、行動選單、<DarkModeToggle />

components/Hero.tsx：

Framer Motion 進入動畫，搭配 useReducedMotion 檢查
統計資料列，使用 <data value="{stat.value}">（AI SEO）
來自設計摘要的簽名設計細節

components/Features.tsx：whileInView Framer Motion，交錯延遲

components/Testimonials.tsx：每張卡片的 whileInView Framer Motion

components/FAQ.tsx：

'use client'，手風琴式
<dl>/<dt>/<dd> 語意標記（FAQPage 結構化資料 + AI SEO）

components/Pricing.tsx：

'use client'，月/年計費切換，附 −20% 徽章
price 與 price_annual 切換

components/About.tsx：故事 + 價值觀

components/Footer.tsx：標語 + 導覽 + 版權

元件規則：

僅在互動式/瀏覽器 API 元件上使用 'use client'
僅類型匯入使用 import type { X }
動態 lucide 圖示：import type { LucideIcon } from 'lucide-react'，然後 (Icons as any)[name] as LucideIcon | undefined。將任何圖示 prop 的類型設為 LucideIcon — 不要設為 React.ComponentType<{size?:number}>（lucide 的 size 是 string|number，因此狹義類型會導致 next build 類型檢查失敗）。
所有顏色透過 CSS 變數 — 零個硬編碼的十六進位色碼
使用 Framer Motion 進行動畫（不使用 IntersectionObserver）
所有文字來自 lib/data.ts

4-C. 頁面

app/layout.tsx：

透過 next/font/google 使用 Google Fonts
來自 SEO_PLAN 首頁 meta 的中繼資料
JSON-LD：Organization + WebSite（或 SoftwareApplication），來自 SEO_PLAN

深色模式防閃爍，位於 <head> 中：

try{if(localStorage.getItem('theme')==='dark'||(localStorage.getItem('theme')===null&&window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark')}}catch(e){}

在 <html> 上設定 suppressHydrationWarning
<link rel="preconnect" href="https://fonts.googleapis.com">

app/page.tsx：Navbar + Hero + LogoCarousel + Features + Testimonials + Pricing + FAQ + ContactForm + Footer

app/tarifs/page.tsx：來自 SEO_PLAN 的中繼資料 + JSON-LD（Offer + FAQPage）+ Navbar + Pricing + FAQ + ContactForm + Footer

app/a-propos/page.tsx：來自 SEO_PLAN 的中繼資料 + JSON-LD（AboutPage + Organization）+ Navbar + About + Footer

app/blog/layout.tsx + app/blog/page.tsx：來自 lib/blog.ts 的清單

app/blog/{slug-1}/page.mdx + app/blog/{slug-2}/page.mdx：

內容來自 CONTENT_BRIEF blog[]
<article> + <time datetime="..."> 語意包裝
第一段為 TL;DR（AI SEO 可引用性）

app/cas-clients/layout.tsx + app/cas-clients/page.tsx：來自 lib/case-studies.ts 的清單

app/cas-clients/{slug-1}/page.mdx + app/cas-clients/{slug-2}/page.mdx：

內容來自 CONTENT_BRIEF case_studies[]
明確的 ## 挑戰 / ## 解決方案 / ## 結果 H2 結構（AI SEO）
來自 SEO_PLAN 的 BreadcrumbList JSON-LD

app/sitemap.ts：SEO_PLAN sitemap_config，涵蓋所有頁面 + 文章 + 案例研究

app/robots.ts：允許所有，包含 Sitemap URL

4-D. 資料檔案

lib/data.ts — 所有來自 CONTENT_BRIEF 的文案：

export const siteData = {
  nav: { links: [...], cta: "..." },
  hero: { badge, headline_a, subheadline, cta_primary, cta_secondary, social_proof_bar, stats },
  logoCarousel: { section_label, brands: [...] },
  features: { badge, heading, sub, items: [...] },
  testimonials: [...],
  faq: { items: [...] },
  about: { headline, story, values: [...] },
  pricing: { heading, sub, plans: [...] },
  contact: { heading, sub, form_cta },
  footer: { tagline }
}

lib/blog.ts：來自 CONTENT_BRIEF 的部落格註冊表

lib/case-studies.ts：來自 CONTENT_BRIEF 的案例研究註冊表

英雄圖片 — 從這些 Unsplash 佔位圖中選擇：

科技/SaaS/金融科技：https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80
健康/保健：https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1600&q=80
食品/生技：https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1600&q=80
運動/健身：https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80
時尚/奢侈品：https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80
房地產：https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=80
教育：https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600&q=80
預設：https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80

步驟 5 — 建置

cd {OUTPUT_DIR}
npm install
npm run build

TypeScript 錯誤 — 修復並重試：

import { X } → 僅類型匯入使用 import type { X }
動態圖示：(Icons as any)[name] as LucideIcon | undefined（從 lucide-react 匯入類型）；將圖示 props 的類型設為 LucideIcon，永遠不要設為 ComponentType<{size?:number}>
在報告成功前修復所有 TypeScript 錯誤

步驟 6 — 報告

🏢  公司：    {company_name} — {industry}
🎨  設計：     {mood} | {heading font} / {body font}
✨  簽名：  {distinctive detail}
📝  標題：   "{headline_a}"
📄  頁面：      / · /tarifs · /a-propos · /blog · /cas-clients
🔍  SEO：        {page title} | {schema types}
📁  輸出：     {OUTPUT_DIR}

本地預覽：cd {OUTPUT_DIR} && npm run dev

登陸頁面 — 編排器