我去年給自己做個人品牌官網，找了一個在站酷上挺有名的獨立設計師，報價 3 萬，交付週期 6 周。拿到稿子我還挺滿意的，首屏一個流動的 Shader 背景，Hero 區嵌了段視頻，過渡動效絲滑得像絲綢。
直到昨晚。
我看到 Kimi 更新了 K2.6之後，就丟了一句需求給它。
5 分鐘後，它吐出來的東西，和那份 3 萬塊的稿子幾乎是同一個水平。
就一年時間，AI 能幹3萬的活兒了？
所以今天這篇，就來幫大家實測 Kimi 2.6 的真實實力。三個 Case 我都按“客戶真的會下單”的標準跑的。提示詞貼在每個 Case 下面，想抄作業的可以直接拿走。
01. 日式威士忌品牌落地頁
這個 Case 的起因是我有個朋友做精釀產品線，想做個高端化的產品頁，之前找外包報價 1.8 萬。
我用 Kimi 2.6 試了一下，定位是獨立日式威士忌品牌。
下面是完整提示詞：
做一個獨立日式威士忌品牌的產品落地頁。
品牌定位：小批量手工蒸餾，強調匠人精神和東方美學。
【首屏 Hero 區】
– 背景用 Three.js + GLSL Fragment Shader 做流體效果：
* 模擬威士忌在玻璃杯中緩慢晃動的視覺
* 主色調琥珀色 #C87533，混合深棕 #3B1F0E 和金色高光 #E8B547
* 光源從左上角打下來，明顯的折射和高光
* 整個流體緩慢呼吸（10 秒一個循環）
– Shader 必須包含以下光學細節：
Fresnel reflection（菲涅爾反射）——邊緣高光
Subsurface scattering（次表面散射）——液體內部透光
Caustics（焦散光）——液體表面波紋投影
- Chromatic aberration（色差）——高光邊緣微小色散 參考 shadertoy.com 上 ‘liquid gold’ 相關 Shader 的質感- 前景左側品牌名（豎排日文+橫排英文）
– 右側是 3D 威士忌瓶身，用 @react-three/fiber 渲染
* 瓶身緩慢旋轉（30 秒一圈）
* 滾輪滾動時，瓶身內液體跟着慣性晃動
* 快速滾 → 液體產生小氣泡上浮
* 靜止 → 液體緩慢迴歸水平
【記憶點:冰塊光標】
– Hover 到威士忌瓶身或產品卡片時， 鼠標變成一個浮動的 3D 冰塊（透明質感，有折射效果）
– 冰塊有極輕微旋轉（5 秒一圈）
– 離開產品區域，光標恢復默認【第二屏:風味輪盤】- 交互式圓形風味輪盤，hover 到不同扇區：
* 扇區發光
* 中心出現一朵對應風味的”煙霧”（Shader 模擬）
* 右側滑入風味描述
* 背景 Shader 顏色微調匹配（煙燻→灰藍，蜂蜜→金黃）
– 從上一屏的 Shader “凝固成輪盤”的轉場動畫
【第三屏:釀造工藝】
– 橫向滾動時間軸，5 個步驟：選麥、發酵、蒸餾、陳釀、裝瓶- 每步一張黑白工藝照片 + 文字描述
【第四屏:產品系列】
– 3 款威士忌產品卡片，每款一個 3D 瓶身- 卡片 hover 時瓶身輕微傾斜和高光變化
【第五屏:購買區】- 極簡購買按鈕 + 數量選擇 + 品牌故事長文本【風格參考】
– 主體參考山崎威士忌官網的剋制感
– 氣質混合三頓半官網（saturnbird.com）的產品呈現方式
– 排版節奏參考 Linear 官網
【技術棧】React 19 + TypeScript + Tailwind + Three.js + @react-three/fiber + @react-three/drei + GSAP
這份提示詞裏我沒說“Shader 要好看”，而是直接指定了幾個光學術語：Fresnel reflection（菲涅爾反射）、Subsurface scattering（次表面散射）、Caustics（焦散光）、Chromatic aberration（色差）。
模型聽到這幾個詞直接換擋。
一般 AI 生成的 Shader 看起來像“動態漸變”，是因爲它默認走的是最基礎的渲染方程。一旦你要求菲涅爾反射+次表面散射，它會調用更完整的 GLSL 代碼結構。這是跑出“真 Shader”的核心祕訣。
一起看看跑出來的效果。
首頁Shader 是真 Shader，不是那種糊弄人的 CSS 漸變。琥珀色液體在屏幕上緩慢流動，邊緣有菲涅爾高光，內部有透光感，表面有波紋投影的焦散光斑。盯着看五秒會有點眼暈，這就是我想要的那種真酒在玻璃杯裏晃的感覺。
風味輪盤這一屏跑出來還不錯，“煙霧和背景會根據風味聯動變色”。這種全局色調的呼吸感，是我在很多國外獲獎網站裏才見過的做法。
釀造工藝這一屏是最“懂設計”的一屏，也是我最意外的一屏。我以爲它會給我做一個常規的豎向時間軸，結果它默認就給了橫向滾動，和前幾屏的垂直節奏形成對比，讓整頁的呼吸感一下子打開了。黑白工藝照片處理得剋制，沒有濾鏡疊加的廉價感，這種細節是加分項裏的加分項。
毛病也有。3D 模型在低端機上確實喫性能，我用那台 5 年前的老 MacBook Air 打開，風扇起飛。這個鍋不能全甩給 Kimi，複雜 Shader 加高精度 3D 模型本來就重。但它沒主動做性能降級方案，比如檢測到低端設備時降低像素比、關掉次表面散射這類高開銷效果，或者直接退化成 2D 展示。這方面的考慮，目前和一個有經驗的前端相比，有一定差距。
02. 獨立調香師的個人網站
我給 Kimi 的設定是：一位叫 Lina 的獨立調香師，在京都學藝 8 年，作品以“東方草本”爲主題。
選“調香師”而不是更常見的“攝影師”，是因爲調香師這個身份自帶東方美學氣質，適合跑出“高級感”，更能檢驗Kimi2.6的水準。做 Vibe Coding 的第一件事，是給模型一個具體到能想象出來的主角，而不是“做個漂亮網站”這種空話。
下面是我用的完整提示詞，可以直接複製粘貼：
幫我做一個獨立香水調香師的個人作品集網站。
身份背景：他叫 Lina，在京都學習調香 8 年，作品以”東方草本”爲主題。
【首屏 Hero 區背景】
– 純黑底色 #0A0A0A
– 一縷硃砂紅色煙霧（#C9302C 漸變到 #8B1A1A）從畫面 底部中偏左位置緩慢升起
– 煙霧向上升起時逐漸擴散、變淡，在畫面上 2/3 處 溶解成若隱若現的硃砂霧氣
– 煙霧有極輕微的橫向飄移（2-3px 的左右搖擺）， 模擬無風環境下的氣流
– 循環週期 8 秒，循環時新的煙霧從底部浮起， 舊的煙霧在頂部消散，保證畫面始終有煙
– 煙霧用 Three.js + Fragment Shader 生成 （volumetric smoke shader，參考 shadertoy 上 “volumetric smoke” 類作品）
– 整體疊加一層極細的膠片顆粒感濾鏡（film grain）， 顆粒尺寸 0.3px，密度 15%
– 右下角有一個極其微弱的橙紅色光暈（#8B1A1A，20% 透明度）， 暗示”香爐”光源位置
【風格參考】- 排版參考 Linear 官網（linear.app）
– 質感參考 Awwwards 2025 年度獲獎作品 Lando Norris 官網 （由 OFF+BRAND 工作室操刀，可從 awwwards.com 檢索）
– 氣質參考站酷 2024 百大設計榜裏的品牌官網作品- 色板：主色墨黑 #0A0A0A，暖米白 #F5F0E8，硃砂紅 #C9302C
– 字體：大標題 Instrument Serif / Canela / Editorial New（擇優）， 正文 Inter / Söhne，裝飾性中文字體用”思源宋體”
【記憶點：墨跡光標】
– 把默認鼠標光標隱藏，替換成一個跟隨移動的水墨圓點
– 鼠標移動時，拖出一條會慢慢暈染、淡出的墨跡軌跡- Hover 到可點擊元素時，圓點變大，墨跡變淡
– 這個效果要貫穿整站
【頁面結構】
Hero 首屏（全屏視頻）
About 區：左文右圖，圖片是她在工作室的黑白照片
Works 區：香水作品展示，卡片用 clip-path 從左向右揭幕動畫
Process 區：調香流程的橫向滾動時間軸
Contact 區：極簡的預約表單
【技術棧】
React 19 + TypeScript + Tailwind + GSAP + Three.js + @react-three/fiber + WebGL Shader
首屏的視頻融合處理得很細。背景的火苗能清晰區分內焰和外焰，光標移動過去，會根據光標的節奏舞動。這種細節，是我當年那位設計師加錢才做的。
墨跡光標是我朋友看到第一反應“等下這鼠標是怎麼回事”的東西。默認鼠標被隱藏，替換成一個水墨線條，鼠標移動拖出慢慢暈染的墨跡軌跡。
當然也不是沒毛病。響應式在 iPad 豎屏下，Hero 區的視頻會有點溢出，我讓它改，它第二輪就修好了。讓我滿意的是單點修改這件事，它沒有把別的地方一起“優化”掉。以前我讓某模型改個按鈕顏色，它能順手把我整個導航欄給重寫了，當場血壓飆升。
03. 瑜伽老師的預約系統
前兩個 Case 玩的是審美。但這個 Case 玩的是，這東西真的能上線收錢。
因爲看到 K2.6的Agent這次不僅升級了前端，還增加了後端功能。
所以我設定了一個很具體的場景：一位在巴厘島教陰瑜伽 10 年的獨立瑜伽老師 Peggy，需要一個能讓學員在線預約的 SaaS 系統。
全棧應用不能一次性扔全部需求，要分輪對話。這樣每一輪的產出都可驗證，模型也不會迷失。我用了 4 輪。
第一輪：做出審美到位的官網前端
幫我做一個獨立瑜伽老師 Peggy的個人官網。
她在巴厘島教授陰瑜伽 10 年。
【首屏】
– Hero 背景是一段日出海邊瑜伽的視頻循環（先用佔位符）
– 大標題用優雅的襯線字體，緩慢淡入
– 有一個 CTA 按鈕”預約私教課”【風格參考】
– 排版和剋制感參考 Linear 官網（linear.app）
– 氛圍感參考 Awwwards 2024 SOTY 獲獎作品 Igloo Inc （可從 awwwards.com 檢索）
– 色板：主色米白 #F8F5F0，強調色青草綠 #6B8E5A 和陶土色 #C68B6A
– 字體：大標題用 Instrument Serif，正文用 Inter
【頁面結構】
- Hero 首屏
- About 區（Lina 的故事）
- 課程介紹（三種課程）
- 學員評價
- 聯繫方式
【技術棧】
React 19 + TypeScript + Tailwind + shadcn/ui + GSAP先只做前端頁面，不要做功能。
第一輪跑完我有點意外，海邊日出的 Hero 視頻、米白主色、蔚藍色大海，整體呈現出精品瑜伽工作室應有的剋制和鬆弛。字體選了 Instrument Serif 做大標題，襯線的柔和度和“陰瑜伽”的氣質對上了。這一屏直接截圖發朋友圈，估計都不會有人覺得是 AI 做的。
第二輪：加用戶系統
非常好。現在給這個網站加用戶系統：
– 學員可以郵箱註冊+登錄
– 用 Supabase 做後端
– 註冊後有一個個人中心頁面，可以看到自己的頭像、預約記錄
– 登錄態要持久化（刷新不掉）
– 註冊表單的報錯提示要有動效（抖動+紅色邊框）
這一輪的驚喜點是登錄態持久化和表單動效這兩個細節，它沒只做“能跑”的最小實現，而是默認考慮了真實用戶場景：刷新不掉線、報錯有抖動反饋、輸入框有 focus 動效。Supabase 的環境變量它全程自己配置，我沒碰過一行配置代碼。以前我覺得“加登錄”是件要開 1 小時 IDE 的事，這一輪 6 分鐘跑完，個人中心的頭像和預約記錄區都已經在了。
第三輪：加預約系統
繼續。
現在加預約功能：
– 我提供 3 種課程：
* 一對一私教（￥800/次）
* 小班課（￥300/次）
* 體驗課（￥0）
– 學員可以選日期、時間段、課程類型
– 預約成功後寫入 Supabase 數據庫
– 預約頁面要有一個日曆組件，已約滿的時段變灰不可選
【記憶點：預約成功的”蓮花綻放”】
– 學員點擊”確認預約”後，不是簡單的彈窗
– 而是：
* 整個屏幕變暗
* 中間浮現一朵緩慢綻放的蓮花（SVG 動畫）
* 蓮花下方顯示”您的時光已爲您保留”+ 具體日期時間 * 背景有輕微的花瓣飄落（粒子效果）
* 5 秒後自動跳回個人中心
日曆組件出來的第一版就是能直接上線的水準。已約滿時段自動變灰、不可選狀態有 tooltip 提示、移動端的時間選擇器做了單獨適配。最讓我願意反覆播放錄屏的是“蓮花綻放”：屏幕變暗 ， 蓮花用 SVG path 動畫逐瓣展開 ，花瓣粒子緩慢飄落 ，“您的時光已爲您保留”淡入。整個過程 4 秒，但它把“儀式感”三個字做出來了。
第一個版本的蓮花綻放效果，我不滿意，我讓Kimi只針對這一部分重新優化，它真的只改了這一部分，而且完成得很快。這一版是不是好多了。
一個會做“蓮花綻放”的 AI，和一個只會彈“預約成功”的 AI，中間隔着十個設計師。
第四輪：加管理員後台
最後做 admin 後台，只有 admin 賬號能登錄：
【儀表盤】
– 今日預約數、本週收入、新增學員數（有數字滾動動畫）
– “今日能量地圖”模塊：
* 展示老師今天的課程分佈（時間軸樣式）
* 每堂課是一個圓點，大小=學員數，顏色=課程類型 * Hover 顯示詳情- 本月預約趨勢折線圖（用 recharts）
【預約管理】
– 表格展示所有預約，可以篩選、取消
– 風格參考 Linear 官網的產品界面（linear.app）【學員管理】
– 所有註冊學員列表【整體風格】
– 用 shadcn/ui 做
– 表格設計參考 Linear 的 Issue 列表視圖
Admin 後台是整個 Case 最讓我感到“檔次變了”的一屏。“今日能量地圖”那個非標準組件它沒偷懶，圓點大小對應學員數、顏色對應課程類型、hover 浮層顯示詳情。配合 recharts 的折線圖和數字滾動動畫，這個後台的信息密度和顆粒度，已經接近我平時用的正經 SaaS 產品。
最後一步，也是最關鍵的：
幫我把這個應用部署到 Vercel，給我一個可以真實訪問的 URL。
前端部署到 Vercel，Supabase 作爲後端服務，把環境變量配置好。
十幾分鍾後，我拿到了這些東西：
前端官網 + 學員註冊登錄 + 課程預約系統 + 管理員後台 + 數據可視化 + 真實數據庫 + 一個真實可訪問的線上 URL。
04. 一些分享
測完這三個 Case，我感覺 Kimi 2.6 的審美是真的進了一個檔位。頂尖設計師暫時還不用擔心，但中間 90% 的外包市場，確實要抖三抖了。
另外，全棧這件事，比審美更有想象力。 因爲審美是錦上添花，全棧是從 0 到 1。以前做 Vibe Coding，你得到的是一個漂亮的殼。現在做 Vibe Coding，你能得到一個能收錢、能留資、能運營的生意。一個瑜伽老師不用再花 2 萬找外包做預約系統，一個咖啡店主不用再花 1 萬做品牌官網，這件事比“模型的跑分”重要得多。
最後，坦率講，審美這一項 Kimi 目前確實摸到了第一梯隊，前端複雜度高的 Case 裏，Shader 和 3D 效果穩定性比我預期的好。
幾年前我們聊 AI，聊的是“能不能做”。 去年我們聊 AI，聊的是“做得像不像人”。 現在聊 Kimi 2.6 這種模型，我們在聊的是“審美夠不夠高級”。評價維度的變化，本身就在說明AI的進步。
AI 開始和人類爭奪“品味”這塊領地。
原文鏈接：K2.6 小更新大躍進！實測超越了我花 3 萬找設計師做的網頁
