如果你依賴工具，很快就能做出看起來「還行」的東西。然而，結果往往會帶著一種你似曾相識的通用感。這就是所謂的「AI 味」的本質，也是現在最能拉開差距的地方。
根據我使用基於 Claude Code 建立的生產線（即 makeLP 專案），從同一基礎上打造三個風格截然不同的網站的經驗，我將簡要總結一個可複現的方法。
工廠，而非一次性的魔術
即使你一次做出了好東西，如果無法複現，它也不會成為資產。因此，我們會透過四個階段來執行。
生產 → 品質 → 驗證 → 改進。
共有四類支援元件：
・技能：方法論模板（用於創建的 motion-lp-builder、用於反 AI 原則的 frontend-design、用於批量分類的 bulk-categorize）
・子 Agent：專業角色（負責繪圖與評論的 lp-visual-verifier、將參考轉為規格的 design-reference-analyst、負責分類的 bulk-classifier）
・參考庫：一個存放 4,074 條 SANKOU 清單的書架，按「網站類型 × 產業」分類
・進化中的規則：CLAUDE.md（標準流程/紀律）+ Memory（將評論永久化）
準備與先決條件
基礎架構固定為 Vite + React + GSAP (ScrollTrigger) + Lenis。關鍵在於「將滾動進度直接連結到製作」。滾動的量成為表現的輸入（背景影片逐格、固定、視差、進場揭示）。
資產有兩種類型，根據主題選擇：
・AI 生成 (Higgsfield)：當需要度假村這類寫實圖像時
・程式碼繪製 (SVG/Canvas/CSS)：這對 B2B 和科技業來說感覺更「對」。無需消耗點數
如果不確定，則根據「應該是照片還是圖表？」來決定。
第一步：生產
順序至關重要。不要立刻開始撰寫程式碼；首先，將品牌簡報（你向誰承諾什麼、顏色、字體、動態強度）凝聚在一頁上。即使基礎相同，決定輸出差異的是簡報，而不是程式碼。
如果選擇 AI 生成，請遵循點數紀律：
- 檢查餘額
- 使用 get_cost 獲取初步估算
- 先創建一張主視覺圖片
- 以該圖片為參考生成其他圖片，以統一質感
- 等待完成並下載。
實作方面，直接將製作與滾動連結（逐格/固定/視差/揭示）。並且始終使其強健：使用 prefers-reduced-motion 的靜態備用方案，確保即使在缺少素材的情況下 npm run dev 也能運作，並考慮觸控與 Canvas 的省電設定。
第二步：品質 - 擺脫量產設計
將「AI 味」拆解為六個部分並消除：
- 過度使用漸層（尤其是文字和紫色漸層） → 縮小到單一顏色 + 一個點綴色
- 只是按標準順序排列標準部件 → 為結構本身創建獨特的概念（例如，整個頁面是一個工作流程畫布）
- 四捨五入的「膨脹」數字 → 要具體（例如，「每月 600 張發票 → 0」的前後對比）
- 表情符號圖示 → 不要使用。必要時繪製 SVG
- 僅在區塊左邊緣的色條 → 不要使用。在平面、邊距和字體中使用顏色
- 所有東西都對稱、統一、圓角、帶有柔和陰影 → 引入不對稱和邊距強度的變化
原則是：配色方案是單一顏色 + 一個點綴色，字體用一個有特色的字型來推高表現，邊距的強度，以及為了「聚焦」而做的動態。
第三步：驗證 - 構建通過 ≠ 好
即使程式碼通過，固定、逐格和揭示在實際畫面上也可能失效。因此，lp-visual-verifier 會啟動開發伺服器，透過 puppeteer-core 操作現有的 Chrome/Edge，逐區塊渲染並截取，然後「用眼睛評論它」。
三個關鍵點：
・驗證者不修復程式碼（以隔離原因）
・使用 prefers-reduced-motion 截取可以靜態可視化固定區域和等待揭示的下方區塊
・務必同時以行動裝置寬度截取
僅進行一輪評論 → 修正就能顯著提升品質。不要滿足於構建成功。
第四步：改進 + 參考庫
design-reference-analyst 會閱讀參考網站，並將它們轉化為「通用模式」和「改進規格（在哪裡以及如何改進）」，而不僅僅是印象。sankou-reference 庫有 4,074 個項目，在兩個軸上分類，讓你可以立即提取「僅限旅遊 × 特殊 LP 的例子」（每一行的備註中說明了內容）。
批量分類本身也是模板化的（bulk-categorize：拆分 → 子 Agent 並行處理 → 聚合 → 修正）。
會成長的規則
這是最重大的發現。不要讓客戶的評論隨著一次性的修正就結束；將它們提升為永久規則。
範例：
「表情符號圖示看起來像 AI」 「左邊的色條看起來像 AI」 → 將這些變成 memory 和 CLAUDE.md 中的禁止規則 → 從此在每個網站中自動避免。
換句話說，使用得越多，「AI 味」就消失得越多。擁有技能和子 Agent 也使得橫向擴展變得容易。
打造三個截然不同的網站
・AZURE BAY（夏日泳池 LP / B2C）：藍綠色 + 金色。Higgsfield 生成。滾動時逐格顯示泳池影片。
・FLOWGEAR（n8n 實作支援 / B2B）：單一珊瑚色 + 平面風格，無圖像生成。整個頁面是一個 n8n 工作流程畫布。使用具體的前後對比取代膨脹的數字。
・STATIK（虛構工作室的實驗室）：接近黑色 + 單色 + 一種酸系顏色。Canvas 動態文字網格 + 自訂游標。不僅僅是 LP，而是一種沉浸式體驗。
共同點是「單一顏色 + 一個點綴色」、「用具體數據說話」以及「透過單一概念突破」。根據主題選擇手段是脫離平庸的第一步。
自己建置的最小配置
- 將滾動連結的基礎架構模板化（不要每次都從頭撰寫）
- 將反量產原則放入單一規則表中（無漸層/表情符號/左邊條...）
- 創建後務必截取並查看實際畫面
- 每次都將評論提升為規則
常見陷阱與對策：點數浪費（先做主圖 + 初步估算）、驗證遺漏（截取實際畫面）、動態無障礙性（reduced-motion）以及行動裝置破版（務必以不同寬度截取）。
總結
AI 是一雙「快手」，而不是「眼睛」。
當你將眼睛（驗證）和規則（學習）納入系統的那一刻，AI 製作的網站就能擺脫 AI 味。
