殺死UI！普通人也能做最酷炫的 5 種 AI 動態網頁

最近探索到了一種酷炫的AI登陸頁制作方式，不需要專業的UI能力，你也可以制作出非常精美的網頁。

這些網頁都具有動態的頁面背景，所以看起來十分酷炫。在鯨哥制作的案例中，無論是賽車還是太空隕石，抑或是動態流光效果，這套AI流程都可以信手拈來。當然，細節相比專業UI還是有差距，但是對于小白來說，瞬間做出精美的網頁，也是一種成就感。

案例1：賽博飛馳

第一個案例做的是大漠飛馳賽車主題官網。這個案例啟發來自于車神張雪，最近他的成績十分耀眼，我們就想幫制作一個粉絲網站，當然怕侵權沒有采用公眾人物形象，核心不是機車而是賽車，主題更多偏向了飛馳人生。。。

話不多說，先上案例效果。

整個制作流程也非常簡單，你一遍就能學會。

1、制作封面圖片

制作首尾幀兩張圖片，確定主題風格。

首幀提示詞：

拉力賽車在戈壁沙漠賽道飛馳，黃沙漫天，強烈速度線，夕陽逆光，大氣史詩構圖，無雪山，無雪景，電影級光影，高飽和度，機械細節豐富，緊張刺激氛圍，hyperrealistic，dynamic motion

尾幀提示詞：

史詩結局鏡頭，一輛紅色拉力賽車停在賽道上，塵埃緩緩落下，金色夕陽照亮車尾，剪影效果，寧靜且勝利的氛圍，電影級靜幀，高細節，超寫實，無動態模糊，干凈背景，廣闊荒漠景觀，暖色調，杰作。

2、圖生視頻

有了首尾幀，以兩張圖作為參考圖，再用提示詞結合，就比較好控制視頻生成的效果。

視頻提示詞：

epic atmosphere, intense speed in the first 8 seconds, gradual calm in the last 7 seconds, cinematic lighting, detailed mechanical textures, vast desert landscape, no snow, no mountains.

3、制作網頁

根據視頻的風格，確定適合的網頁風格。這個網頁風格是黑暗風。

網頁風格提示詞

dark futuristic website UI, fullscreen 15s racing car desert sunset video as background, glass morphism cards, semi-transparent blur overlay, glowing neon blue accents, sleek modern typography, hero section with large title, minimal clean layout, racing game style interface, high contrast, cinematic atmosphere, responsive web design, 8K, ultra detailed

這里是關鍵一步，你需要視頻和網頁結合到一起，這里我們需要借助claudecode或者龍蝦等工具。一方面給AI這個視頻的地址，一方面給網頁提示詞，二者結合最終生成完美的動態網頁。

給Claude code的指令如下：

網頁作為游戲介紹頁

這里強調下，必須用Claude Code或者龍蝦等工具，因為這類AI會調用視頻，生成以視頻為背景的網頁。如果覺得視頻看得不清楚，可以通過讓AI調整透明度來調整背景的清晰程度。

案例2：流光動效網頁

這個案例更加酷炫，流程略微有些不同，核心是制作多HLS視頻背景。

這個提示詞更復雜些，對視頻和網頁有更多的規范和要求。

關鍵技術：多 HLS 視頻背景管理，HlsPlayer 組件封裝（支持背景模式），漸變疊加方案，環境光球協調，ScrollReveal 滾動動畫，視頻高度統一 h-[65vh]，無黑色分隔條，響應式適配。

值得提到的是，除了第一頁是video，每頁都是HLS視頻背景。

這個案例，鯨哥在用提示詞生成初版網頁后，需要反復調整WLS的位置、大小還有顯示效果，過渡效果。背景視頻不像單MP4背景網頁，簡單擺上去就完了，它要精確適配容器高度又不遮擋內容。

并且視頻橫豎比例各異，塞進固定容器里不是變形就是被裁，得反復調。要保證特效完整，也要文字內容清晰可見，必須加漸變遮罩讓文字清晰，但漸變透明度調高一度發灰、調低一度文字糊成一團，這個"剛剛好"要試很多次。

每個特效之間，從橫到豎，在第一版本時，下滑跳轉突兀，后續通過調整背景的大小，增加黑色過渡區，來確保上下滑動時，特效與特效的銜接不突兀。

最后就是，六路視頻同時播放性能直接爆炸，必須做視口檢測，讓不可見的視頻暫停，切換時還要處理得平滑不然就閃跳。

總結難點：把視頻變成半透明的、可定位的背景層，同時保證性能、文字可讀性、視覺美感。

PS：這個網頁效果其實也很接近PPT的效果，其實也可以作為PPT呈現。就是修改起來費勁，但是展示時候非常美觀。

案例3：星際探索

第3個案例是星際探索，隕石效果還是非常突出的。

流程也基本一樣，這里把提示詞開源給大家，大家也可以去復刻。

首幀

史詩科幻宇宙場景，遙遠璀璨星云，宏大螺旋星系，明亮藍紫色宇宙射線，漂浮小行星碎片，電影級廣角鏡頭，戲劇性光影，超精細細節，8K，暗黑未來美學，干凈神秘氛圍，適合太空展覽官網

尾幀

寧靜深空場景，柔和發光星云，緩慢漂浮光粒子，遠處飛船剪影，浩瀚星空，極簡構圖，流暢電影色彩，深藍色調，優雅未來感，平靜科幻氛圍，適合太空展覽官網結尾畫面

再做視頻

mysterious and advanced atmosphere, ultra detailed, perfect for space exhibition introduction page

給Claudecode的指令

做為太空展的介紹網頁

做了很多賽博風，鯨哥當然要試試國風的效果，說實話這個AI套路，還是非常適合做一些文化館藏官網的。

視頻利用豆包內置的Seedance 2.0 Fast 全能視頻模型生成，提示詞如下

生成一段敦煌壁畫文化的視頻，用于網頁制作，要求如下：16:9寬屏，敦煌壁畫文化宣傳片，超精細唐代凈土變壁畫特寫，一位面帶微笑冥想的菩薩，細膩線條，飄動絲帶，盛開蓮花環繞，古老泥皮墻面裂縫紋理，氧化褪色質感，主色調氧化鉛白、褪色朱砂紅、深邃石青藍，戲劇性側光，浮雕質感，唐代美學，水墨與壁畫結合風格，歷史文物保護氛圍，高分辨率，對焦清晰，畫面緩慢流動，莊重寧靜，適合網頁展示。

視頻下載后，網頁生成提示詞如下：

"C:\你的文件路徑\視頻.mp4"這里有一個視頻，我要做一個以這個視頻為背景的網頁。 網頁風格：黑暗神秘主義敦煌藝術展網站 UI，全屏莫高窟壁畫動態視頻背景，極簡東方設計，細小的發光金箔線條，砂巖質感玻璃擬態卡片，柔和的光塵粒子效果，優雅的宋體與無襯線字體排版，高對比度，敦煌美學 HUD 風格，響應式布局，神圣而空靈的氛圍，超精細。 網頁作為敦煌文化展覽。

這個風格感覺也很適合，一些城市展廳的官網，直接看效果。

并不需要過多的內容展示，可能大家進入官網，就差不多了解到整個展廳的內容。有點類似元宇宙的形態，當然不是全息的。

最后：

隨著AI的進步，前端做UI確實越來越方便。并不是說UI更容易被替代。鯨哥并不懂更多的UI風格，但已經可以做一些成果。

大家可以用這套提示詞和流程去修改，做出更多精美的網頁，期待大家評論區交作業。