Generic
Webflow-style
差別在哪
同一份內容，兩種排法
左邊是最常見的做法：標題置中、三欄卡片等寬、每一區塊的視覺重量都一樣，讀起來像在重複同一頁。右邊是 Webflow 的做法：大標左靠、區塊寬度一路變化——大圖、細線、小圖、滿版，節奏跟著內容走，不是跟著格線走。捲動時注意兩邊進場的方式也不同：左邊一次全部淡入，右邊一塊接一塊展開。
AI創業學院 · Landing Page 教學
一般網頁能用
Webflow 頁面讓人想留下
- 差別不是套件。Webflow 官網一個動畫函式庫都沒裝。差別在排版節奏、字重邏輯，還有動效綁在捲軸上，不是綁在時間上。
- 這頁就是教材。往下捲，你會先看到兩種風格並排比較，再看實作的三個步驟，最後是可以直接複製貼上的提示詞。
- 全部用 Claude Code 做。這裡示範的每一段 CSS、每一個設定檔結構，都是實際做出這頁本身用的東西。
- 00個動畫／UI 函式庫
- 195B頁面自身的 client JS
- 0CLS，用 PerformanceObserver 量的
- 03個實作步驟，跟著做就好
三個支撐點
Webflow 質感從哪裡來
不是更多動畫，是更少隨意。三件事撐起整頁，缺一個都會露餡。
TOKENS
數值先定義，再使用
間距、字級、easing、圓角全部先變成變數。程式碼裡不准出現裸數字——這樣改一個字級，全站十幾個地方跟著對齊，不用一一手改。
看設計 token 怎麼設 →RHYTHM
版面節奏要故意不對稱
一般網頁的通病是每個區塊都「置中標題＋三張等寬卡片」。Webflow 質感的頁面故意讓寬度不斷變化：滿版、留白、圖文交錯輪流出現，眼睛才不會累。
看下面的對照圖 →MOTION
動效跟著捲軸走
好的捲動動效不是「滑到就播一段」，是進度隨捲軸連續變化——往回捲，動畫也跟著往回演。這是瀏覽器原生就有的能力，不需要任何函式庫。
看怎麼寫不出錯 →
節奏怎麼安排
三種版型，寬度遞增著用
圖文交錯的段落只需要三種版型：圖左、圖右、滿版寬圖。訣竅是連續使用時要讓寬度遞增——圖左和圖右的圖片一樣寬，最後一段跳到滿版。如果排成「圖左、圖右、圖左」，寬度完全沒變，讀者會覺得是同一個版型換了個方向，而不是三段不同的內容。
A 圖左
B 圖右
WIDE 滿版
最優解提示詞
五句話，涵蓋整個流程
每一句都可以直接複製貼給 Claude Code。順序照做，從交付範圍到動效驗收都涵蓋到。
左右捲動 →
第一句
交付範圍
先定義這是什麼
「這是站內既有網站掛的一頁，還是完全獨立的網站？沿用現有的 Navbar / Footer 還是這頁自己做一套？動手前先告訴我你的理解，我確認後再開始。」——這句決定了會不會做出一個自帶選單、卻裝錯地方的東西。
第二句
硬約束
把禁止清單寫死
「純靜態頁面，不要動畫函式庫（GSAP / Framer Motion 一律不裝），不要 UI 元件庫，全部手寫。禁止漸層背景、禁止毛玻璃卡片、禁止到處灑陰影。」寫清楚就沒有模糊地帶，AI 不會自己決定裝一個「比較快」的套件。
第三句
排版系統
要求 token，不要裸數字
「建立間距階梯、字級階梯（clamp() 做流體字級）、easing、duration 的 CSS 變數，所有數值都要引用它們，不准出現沒有名字的數字。」這句直接決定程式碼能不能維護——沒有它，換一個字級要改十幾個地方。
第四句
動效驗收
用可量測的句子描述動效
「捲第一下（約 100px）就要看得出畫面有變化，每捲 100px 進場元素至少位移 20px，動效必須在元素抵達畫面中央之前完成。」不要寫「中等」——那個詞在你我腦中對不上號，實測過，AI 做出來的幅度會遠低於你以為的「中等」。
第五句
自我驗證
要求數字，不要形容詞回報
「你自己截圖驗證，量 CLS 給我看實際數字，確認 console 沒有錯誤，不要叫我手動檢查。如果有什麼驗證不了，直接說，不要假裝已經驗證過。」這句把「看起來不錯」換成可以查核的證據。
實作三步驟
照這個順序做，少走兩輪
- 01
先做靜態版，零動效
把版面、字級、排版節奏全部定案，一個動效都不要加。版面沒確定就加動效，之後每次調整排版都要重新調一次動效的時機與幅度，等於做兩次工。
- 02
文案抽進一個設定檔
所有文字、圖片路徑、區塊順序都放進一個物件，元件只負責渲染。這一步做完，之後要換文案、調順序、甚至拿去做另一個站，都不需要碰版面程式碼。
- 03
最後才加 scroll-driven 動效
用 animation-timeline: view() 綁進場動畫，用 animation-timeline: scroll() 綁視差。全程用 longhand 寫（animation 簡寫會讓進度失效），並包在 @supports 裡讓不支援的瀏覽器看到完成狀態，而不是卡在半透明。
常見問題
照著做之前，你可能會問
一定要用深色底嗎？
不一定，這頁選深色只是配合 Webflow Enterprise 的參考風格。淺色一樣適用同一套原則：token 系統、不對稱節奏、綁捲軸的動效。差別只在色票要重新校色——把品牌色放到目標底色上實際量一次對比度，不要憑印象套用。
不裝套件真的做得完嗎？
做得完，而且通常更快。這頁的動效全部是原生 CSS，實作時間花在調參數（幅度、時機），不是花在學套件的 API 或除錯版本相容性。整頁最後的 client JS 是 195 B。
為什麼強調「可量測」而不是「看起來對」？
因為「看起來對」沒辦法給下一個人複製。實測過，同一句「動效中等」兩個人做出來的幅度可以差十倍。換成「每捲 100px 位移 20px」，任何人接手都做得出同一個結果。
這頁的示意圖是圖片還是真的元素？
是真的 DOM 元素畫出來的，不是圖片也不是影片。用真元素的好處是可以直接綁 scroll-driven 動效——捲到哪、動畫演到哪，這是靜態圖片和影片都做不到的。
原始碼在哪？
三個檔案，都在 aistartup-tw 這個 repo 的 src/app/(frontend)/webflow/ 底下：page.tsx（渲染）、webflow.css（樣式與動效）、landing.config.ts（文案與排版設定）。
開始做你的版本
照這五句提示詞，從頭做一次
不用從零想怎麼下指令。把上面五句提示詞依序貼給 Claude Code，照三步驟做——先靜態、再設定檔、最後動效。
- 原始碼 — src/app/(frontend)/webflow/
- 三個檔案 — page.tsx / webflow.css / landing.config.ts
- 示意圖 — DOM + CSS 繪製，無外部素材