他們在X上炫耀的"一鍵生成"落地頁？全是騙人的
整理版優先睇
所謂「一鍵生成」落地頁其實係假嘅，真正嘅方法係一套Google AI工具鏈
呢篇文章嘅作者花咗一週時間研究X上嗰啲號稱「一句話生成驚豔落地頁」嘅帖文，發現背後唔係AI一句prompt搞掂，而係一套完整嘅Google AI工具鏈。作者係一個AI建站嘅實踐者，佢想拆穿呢啲誤導性宣傳，並分享真正用得著嘅工作流。
作者指出，靚嘅動畫落地頁需要一致嘅圖像序列、流暢嘅過渡動畫、合適嘅網頁格式、結構化嘅提示詞，同埋專業嘅UI組件。佢逐一介紹咗Whisk、Google Flow、Claude、Hero UI、motion.dev同21st.dev呢啲工具，並示範點樣將佢哋串連成完整流程。最終結論係：接地氣嘅落地頁唔係一步到位，而係工具鏈嘅藝術，但好消息係每個環節都有免費或開源方案。
- 所謂「一鍵生成」係誤導，實際需要Whisk、Google Flow、Claude等多個工具串連先做到一致又流暢嘅動畫。
- Whisk用主體-場景-風格三層框架生成一致圖像，唔使寫長提示詞，仲可以用自然語言修正。
- Google Flow負責連接關鍵幀過渡，但生成嘅MP4要轉做WEBP先方便網頁滾動動畫。
- Claude對XML結構提示詞有特殊優化，用<context>、<requirements>等標籤可以準確控制動畫邏輯。
- 用Hero UI呢類組件庫代替原生CSS可以避免「AI味」，再配合motion.dev加專業動畫效果。
Claude XML提示詞模板
用<context>、<requirements>、<animation-behavior>、<constraints>、<output>結構化描述，Claude可以獨立處理每個部分，減少理解偏差。
21st.dev - UI組件靈感庫
每個組件都有專門為AI編程助手優化嘅提示詞，包含依賴、代碼路徑、npm包同集成步驟。
內容片段
<context>我要做什麼，資產在哪裏</context><requirements>具體需求列表</requirements><animation-behavior>動畫如何表現</animation-behavior><constraints>限制條件</constraints><output>期望輸出</output>真相：靚落地頁唔係一鍵生成
你肯定刷到過呢種帖文：「用AI一句話生成了驚豔嘅落地頁！模型太強了！」佢哋係呃人嘅。頁面係真，但「一句話生成」就係假。作者花咗一週研究呢啲人嘅真實工作流，發現佢哋用嘅係一套完整嘅Google AI工具鏈。
- 作者拆解嘅流程：Whisk → Google Flow → 轉WEBP → Claude+XML → Hero UI → motion.dev → 21st.dev
- 每個工具解決一個具體問題，例如Whisk負責生成一致圖像，Flow負責過渡動畫，Claude負責理解結構化指令。
第一步：用Whisk生成一致嘅圖像序列
Whisk係Google推出嘅實驗工具，背後係Nano Banana圖像模型。佢最勁嘅地方係唔使你寫又臭又長嘅提示詞，因為佢用Gemini 3做中間層，自動擴寫你講嘅簡單詞。
- 1 主體：例如「復古相機」
- 2 場景：例如「鏡頭特寫，有反光效果」
- 3 風格：例如「高分辨率，淺景深」
如果生成得唔啱，簡單講一句「只顯示鏡頭分層」就修正到。
第二步：用Google Flow連接關鍵幀
Whisk雖然可以令單張圖動起來，但唔連得到多張圖做流暢過渡。呢個位就要用Google Flow。Flow用Gemini規劃故事線，再用VO模型生成視頻，專門解決「幀到幀」嘅過渡。
注意：Flow免費額度係每月180積分，生成一個視頻用20積分，即係最多9個。要慳住用。
生成嘅係MP4，但MP4喺網頁好難做滾動動畫映射，所以要轉做WEBP——WEBP畀網頁當圖像處理，可以直接綁定滾動事件。作者用免費在線轉換器搞掂。
第三步：用XML提示Claude，再用UI庫提升質感
作者發現Claude對XML格式有特殊優化，用結構化提示詞可以獨立處理每個部分，減少理解偏差。佢嘅提示詞模板包括<context>、<requirements>、<animation-behavior>、<constraints>、<output>。用呢個結構，Claude一次就實現咗想要嘅滾動動畫。
另外，新手成日犯嘅錯係用AI生成原生CSS，搞到有「AI味」。解決方法係用成熟嘅UI庫，例如Hero UI——風格似Apple，基於Tailwind CSS同Framer Motion，支援Next.js、Vite、Laravel。用戶喺3秒內就決定留唔留低，組件庫幫你贏呢3秒。
第四步：用motion.dev加動畫，用21st.dev攞提示詞
用戶留低之後，動畫嘅作用係引導注意力。但由零實現動畫好痛苦，作者推薦motion.dev。佢嘅核心優勢係自動處理DOM更新同動畫時序，內置滾動綁定，只需設定起止狀態。作者叫Claude用motion.dev實現視差同滾動動畫，頁面即刻有高級感。
終極武器係21st.dev——一個UI組件靈感庫，每個組件都有專門為AI助手優化嘅提示詞，包含依賴、代碼路徑、npm包同集成步驟。作者複製一個CTA區塊嘅提示詞畀Claude，佢唔單止完美還原，仲自動加咗motion動畫，甚至判斷唔需要GitHub圖標而自動去掉。
- 完整工作流：Whisk（生成圖像）→ Google Flow（過渡動畫）→ 在線轉換器（MP4轉WEBP）→ Claude+XML（滾動動畫邏輯）→ Hero UI（提升質感）→ motion.dev（專業動畫）→ 21st.dev（組件提示詞）
- 呢套工具鏈嘅每一環節，Google同開源社區都已經準備好，你要做嘅就係串起佢哋。
真相比你想像中更加有趣
你一定睇過呢類post：
「用AI一句說話就生咗呢個超靚嘅落地頁！個模型好勁！」
附圖係一個動畫流暢、設計精美嘅網站。
佢哋係度呃人。
唔係話個頁面係假——頁面係真嘅。但「一句說話生成」？呢個先係假。
我用咗成個禮拜研究呢班人嘅真實工作流程，發現咗一套完整嘅Google AI工具鏈。今日，我將呢套方法完整拆解俾你睇。
🔍 點解你「一鍵生成」嘅頁面成日都咁樣衰？
先講個殘酷嘅現實：
嗰啲靚到爆嘅落地頁上面嘅動畫，本質上就係一系列連續嘅圖片幀。
問題嚟啦——當你用普通AI工具生成呢啲幀嘅時候，每一幀都係獨立生成，風格根本對唔上。
第一幀係暖色調，第二幀突然變冷色。
相機喺第一幀向左邊，第三幀佢自己轉咗向。
Google嘅解法係：推出咗一個叫Whisk嘅實驗工具。
🎯 第一步：用Whisk生成一致嘅圖像序列
Whisk係專門為「資產生成」設計嘅工具，背後係Nano Banana圖像模型。
佢最叻嘅地方係咩？
你唔需要寫又長又臭嘅提示詞。
點解？因為Whisk用Gemini 3做中間層——你講幾個簡單嘅詞，佢幫你擴寫成詳細嘅提示詞。
實戰方法
Whisk用到主體-場景-風格三層框架：
舉個例子，我想生成一個相機鏡頭嘅特寫：
我描述咗鏡頭上面嘅反光效果、畫面景深、整體解像度——Whisk完全跟足我嘅意圖生成咗圖像。
💡 金句時間：唔係你嘅提示詞唔夠長，而係普通工具唔夠聰明。Whisk令到「講人話」變成可能。
如果生成得唔啱點算？
簡單改，簡單講。
例如我生成相機內部結構圖嗰陣，佢連電路板都拆開咗——但我淨係想展示鏡頭分層。
我只係講咗句「淨係顯示鏡頭分層」，佢就修正咗。
🎥 第二步：用Google Flow連接關鍵幀
呢度有個陷阱好多人會踩：
Whisk雖然支援動畫，但佢淨係可以令單張圖鬱起嚟，唔可以將多張圖連成流暢嘅過渡動畫。
呢個時候就需要Google Flow 。
Flow用Gemini規劃故事線，用VO模型生成視頻，專門解決「幀到幀」嘅過渡問題。
核心技巧：畀模型一條「邏輯路徑」
你嘅提示詞一定要包括：
起始幀到結束幀嘅邏輯關係（例如：相機從正面旋轉到側面） 動畫流動方式（順時針定逆時針） 過渡風格（平滑、彈性、線性）
我第一次生成嗰陣，相機轉向完全調轉咗，過渡好突兀。
解決方法：重新提示，清楚講「相機順時針旋轉」——搞掂。
⚠️ 注意：Flow嘅免費額度係每月180積分，生成一個視頻用咗20積分，即係每月最多9個視頻 。慳啲用。
🔄 第三步：MP4轉WEBP（呢步好多人唔知道）
Flow生成嘅係MP4格式。
問題係：MP4喺網頁上好難做到滾動動畫映射 。
點解？因為MP4需要用媒體播放器包裝，而WEBP喺網頁上會當作圖片處理，可以直接綁定滾動事件。
操作步驟
用免費在線轉換器上載MP4 設定輸出為最高質素動畫WEBP 下載後放去Next.js項目嘅 public目錄
💡 金句時間：格式選擇決定咗你可以做到啲乜。WEBP唔係「更好嘅GIF」，而係「可編程嘅動畫」。
🤖 第四步：用XML格式提示Claude
呢個係我見過最被低估嘅技巧：
Claude嘅模型對XML格式有特殊優化 。
用XML結構化你嘅提示詞，Claude可以：
更準確咁理解你嘅意圖 獨立處理每個部分 減少「理解偏差」
我嘅提示詞結構
<context>我要做什麼，資產在哪裏</context>
<requirements>具體需求列表</requirements>
<animation-behavior>動畫如何表現</animation-behavior>
<constraints>限制條件</constraints>
<output>期望輸出</output>
用呢個結構畀Claude，佢一次就實現咗我想要嘅滾動動畫效果 。
🎨 第五步：唔好用原生CSS，用UI組件庫
呢個係新手最常犯嘅錯誤：
用AI生成嘅原生CSS組件，永遠有種「AI味」——用得，但就係唔夠精緻。
解決方案：用成熟嘅UI庫。
我揀嘅係Hero UI——風格最接近Apple嘅設計語言。
佢基於Tailwind CSS，用Framer Motion驅動動畫，支援Next.js、Vite、Laravel。
💡 金句時間：用戶喺3秒內就決定留唔留喺你個頁面。呢3秒，組件庫幫你贏。
✨ 第六步：用motion.dev加入專業動畫
用戶留低之後，動畫嘅作用係引導注意力 。
但從零開始實現動畫？太痛苦啦。
motion.dev係我嘅救星 。
佢嘅核心優勢：
我叫Claude用motion.dev實現視差同滾動動畫，頁面即刻有咗「高級感」。
🛠️ 終極武器：21st.dev
最後呢個工具，直接改變咗我嘅工作流程。
21st.dev係一個UI組件靈感庫，匯集咗多個設計師基於Aceternity UI、Prism UI、Magic UI等庫創建嘅組件。
但佢最勁嘅功能係：
每個組件都有專為AI編程助手優化嘅提示詞。
呢個提示詞包括：
項目依賴（例如shadcn、TypeScript支援） 組件代碼同存放路徑 需要安裝嘅npm包 完整嘅集成步驟
我複製咗一個CTA區塊嘅提示詞畀Claude，佢唔單止完美還原咗個組件，仲自動加咗motion動畫——我根本冇提過呢個要求。
更聰明嘅係：demo入面嘅footer有GitHub同Twitter圖示，但Claude自動刪咗GitHub圖示，因為佢判斷呢個相機產品網站唔需要。
🚀 完整工作流程總結
最後講兩句
下次再見到有人講「一鍵生成」，你就知真相啦。
好嘅落地頁從來都唔係一步到位，而係工具鏈嘅藝術。
但好消息係：呢套工具鏈入面嘅每一個環節，Google同開源社區都已經幫你準備好曬。
你要做嘅，就係將佢哋串埋一齊。
而家，輪到你啦——揀一個產品，用呢套流程試嚇。
然後返嚟話俾我知效果點樣。👇
如果呢篇文章對你有幫助，轉發俾同樣係度搞AI建站嘅朋友啦。
真相比你想的更有趣
你肯定刷到過這種帖子：
"用AI一句話生成了這個驚豔的落地頁！模型太強了！"
配圖是一個動畫流暢、設計精美的網站。
他們在撒謊。
不是說頁面是假的——頁面是真的。但"一句話生成"？這才是假的。
我花了整整一週研究這些人的真實工作流，發現了一套完整的Google AI工具鏈。今天，我把這套方法完整拆解給你。
🔍 為什麼你"一鍵生成"的頁面總是很醜？
先說個扎心的事實：
那些炫酷落地頁上的動畫，本質上就是一系列連續的圖片幀。
問題來了——當你用普通AI工具生成這些幀時，每一幀都是獨立生成的，風格根本對不上。
第一幀是暖色調，第二幀突然變冷色。
相機在第一幀朝左，第三幀它自己轉向了。
Google的解法是：推出了一個叫Whisk的實驗工具。
🎯 第一步：用Whisk生成一致的圖像序列
Whisk是專門為"資產生成"設計的工具，背後是Nano Banana圖像模型 。
它最厲害的地方是什麼？
你不需要寫又臭又長的提示詞。
為什麼？因為Whisk用Gemini 3作為中間層——你說幾個簡單的詞，它幫你擴寫成詳細的提示詞 。
實操方法
Whisk使用主體-場景-風格三層框架 ：
舉個例子，我想生成一個相機鏡頭的特寫：
我描述了鏡頭上的反光效果、畫面景深、整體分辨率——Whisk完全按照我的意圖生成了圖像 。
💡 金句時刻：不是你的提示詞不夠長，而是普通工具不夠聰明。Whisk讓"說人話"成為可能。
如果生成的不對怎麼辦？
簡單改，簡單說。
比如我生成相機內部結構圖時，它把電路板也拆開了——但我只想展示鏡頭分層。
我只說了一句"只顯示鏡頭分層"，它就修正了 。
🎥 第二步：用Google Flow連接關鍵幀
這裏有個坑很多人會踩：
Whisk雖然支持動畫，但它只能讓單張圖動起來，不能把多張圖連成流暢的過渡動畫 。
這時候就需要Google Flow 。
Flow用Gemini規劃故事線，用VO模型生成視頻，專門解決"幀到幀"的過渡問題 。
核心技巧：給模型一條"邏輯路徑"
你的提示詞必須包含：
起始幀到結束幀的邏輯關係（比如：相機從正面旋轉到側面） 動畫流動方式（順時針還是逆時針） 過渡風格（平滑、彈性、線性）
我第一次生成時，相機轉向完全反了，過渡很突兀。
解決方法：重新提示，明確說"相機順時針旋轉"——搞定 。
⚠️ 注意：Flow的免費額度是每月180積分，生成一個視頻用掉20積分，也就是每月最多9個視頻 。省着點用。
🔄 第三步：MP4轉WEBP（這步很多人不知道）
Flow生成的是MP4格式。
問題是：MP4在網頁上很難做滾動動畫映射 。
為什麼？因為MP4需要媒體播放器包裝，而WEBP在網頁上被當作圖片處理，可以直接綁定滾動事件 。
操作步驟
用免費在線轉換器上傳MP4 設置輸出為最高質量動畫WEBP 下載後放到Next.js項目的 public目錄
💡 金句時刻：格式選擇決定了你能做什麼。WEBP不是"更好的GIF"，而是"可編程的動畫"。
🤖 第四步：用XML格式提示Claude
這是我見過最被低估的技巧：
Claude的模型對XML格式有特殊優化 。
用XML結構化你的提示詞，Claude能：
更準確地理解你的意圖 獨立處理每個部分 減少"理解偏差"
我的提示詞結構
<context>我要做什麼，資產在哪裏</context>
<requirements>具體需求列表</requirements>
<animation-behavior>動畫如何表現</animation-behavior>
<constraints>限制條件</constraints>
<output>期望輸出</output>
用這個結構給Claude，它一次就實現了我想要的滾動動畫效果 。
🎨 第五步：別用原生CSS，用UI組件庫
這是新手最常犯的錯誤：
用AI生成的原生CSS組件，永遠有種"AI味"——能用，但就是不夠精緻 。
解決方案：用成熟的UI庫。
我選的是Hero UI——風格最接近Apple的設計語言 。
它基於Tailwind CSS，用Framer Motion驅動動畫，支持Next.js、Vite、Laravel 。
💡 金句時刻：用戶在3秒內就決定要不要留在你的頁面。這3秒，組件庫幫你贏。
✨ 第六步：用motion.dev添加專業動畫
用戶留下來之後，動畫的作用是引導注意力 。
但從零實現動畫？太痛苦了。
motion.dev是我的救星 。
它的核心優勢：
我讓Claude用motion.dev實現視差和滾動動畫，頁面立刻有了"高級感" 。
🛠️ 終極武器：21st.dev
最後這個工具，直接改變了我的工作流。
21st.dev是一個UI組件靈感庫，彙集了多個設計師基於Aceternity UI、Prism UI、Magic UI等庫創建的組件 。
但它最強的功能是：
每個組件都有專門為AI編程助手優化的提示詞。
這個提示詞包含 ：
項目依賴（如shadcn、TypeScript支持） 組件代碼和存放路徑 需要安裝的npm包 完整的集成步驟
我複製了一個CTA區塊的提示詞給Claude，它不僅完美還原了組件，還自動加上了motion動畫——我根本沒提這個要求 。
更聰明的是：demo裏的footer有GitHub和Twitter圖標，但Claude自動去掉了GitHub圖標，因為它判斷這個相機產品網站不需要 。
🚀 完整工作流總結
最後說兩句
下次再看到有人說"一鍵生成"，你就知道真相了。
好的落地頁從來不是一步到位的，而是工具鏈的藝術。
但好消息是：這套工具鏈裏的每一個環節，Google和開源社區都已經幫你準備好了。
你要做的，就是把它們串起來。
現在，輪到你了——選一個產品，用這套流程試試看。
然後回來告訴我效果如何。👇
如果這篇文章對你有幫助，轉發給同樣在折騰AI建站的朋友吧。