告別 AI 土味審美！Kimi K2.5 實測：扔個視頻復刻 iOS 級絲滑動效

圖片嘅多模態識別有咗增強，新加咗視頻嘅多模態識別功能。

測試期間，就算佢隨手發揮整出嚟嘅網頁都整得好靚。

真係好啱我一個設計師嘅口味。

以前 AI 預設生成嘅結果都好老土，例如成日見到嗰啲藍紫色漸變。

如果你每次用 AI 生成嘅網頁視覺效果都唔啱要求，我推薦你試下 Kimi K2.5。

K2.5 發佈其實對設計師同普通人都好有幫助：

呢兩個加埋一齊，疊代代碼同生成網頁嘅時候就好舒服喇。

你可以隨便揾啲參考內容掉畀佢，圖片、視頻、網頁連結都得。

然後透過截圖同標記不斷咁疊代你嘅網頁作品。

我哋嚟睇下藏師傅嘅測試。

既然支援視頻，我哋就整一個難啲嘅，我揾咗一個 Tab 切換嘅互動視頻。

呢個組件雖然細，但係互動都幾複雜。

切換到右邊嘅時候會完成一分二，而且揀咗嘅狀態會變成白色。

成個互動細節都好多，例如文字嘅移動、回彈效果以及右邊嘅膠囊設計。

呢度我嘅提示詞係：

「幫我實現視頻中嘅呢個前端組件，重點係絲滑嘅互動動效，可以用 animejs 呢類動效庫，重點關注切換後嘅已選中同未選中顏色變化，以及關於右邊一分二之後嘅設計細節」

我都提咗佢一下需要重點關注嘅部分，如果唔係因為主要互動時間太短佢可能會漏咗。

第一次生成嘅時候，互動動效效果已經還原得好好。

基本嘅視覺部分有啲小問題，例如左邊文字顏色同右邊對齊問題。

然後我用截圖標紅嘅方式同佢反饋視覺問題之後，佢即刻就搞掂咗。

嚟睇下同原本用 AE 做嘅互動動效嘅對比。

基本上所有要點都處理好曬：

圓潤嘅文字字體、右邊切換後嘅一分二、切換後已選中未選中顏色互換、右邊黑色包住白色膠囊。

佢甚至加咗 duangduang 嘅回彈動效，望落比原本嘅互動更有活力同真實感。。

其實呢類小組件嘅互動視頻先至係考驗模型視頻多模態同代碼生成最難嘅考題。

因為變化好快，而且互動嘅真實感通常係由好多好細嘅細節堆疊出嚟嘅。

K2.5 第一個測試做得唔錯，我原本冇諗過佢可以完成到。

跟住我哋用一個案例嚟睇下，點樣用 K2.5 強大嘅前端美學同多模態能力去疊代一個項目。。

首先我哋要收集一啲靈感，我揾到一個天氣卡片切換嘅動效，好絲滑。

於是就將上面嘅互動視頻先發咗畀 K2.5，叫佢還原呢部分動效先。

我照舊將視頻發咗畀佢，順便講咗下提示詞：

「幫我根據呢個視頻實現類似嘅互動。中間嘅天氣圖片可以用互聯網圖片。互動核心：鼠標 hover 上去嘅時候，卡片大小調整嘅彈性變化同無縫過渡嘅動效（例如彈跳效果等），可以用 Anime.js 等動效庫去完成。功能模塊：刪除卡片、調整卡片大小」

好自然咁佢第一個版本就整咗個唔錯嘅嘢出嚟。

有啲視覺小問題，我就截圖標記發畀佢，唔使費心描述位置同細節。

而且我仲喺修復問題嘅時候叫佢加功能。

除咗圖示唔同之外，K2.5 實現嘅效果我覺得甚至比原本嘅視頻仲要好啲。

你發現冇，我哋而家基本上完成咗一個類似 iOS 卡片組件嘅動效效果。。

自然咁我就想將呢部分做完，加多啲卡片類型，同時處理垂直嘅排列邏輯。

於是我就再去揾啲其他類似卡片設計參考，揾到一個閲讀卡片都唔錯。

就叫佢基於而家嘅互動效果，為我哋嘅系統加閲讀卡片嘅樣式，同時加添加卡片嘅按鈕。

進行咗兩三次咁樣嘅疊代之後，我哋就實現咗一個好炫酷充滿動效嘅卡片組件自訂系統。

而家佢支援天氣卡片、純文字卡片、書籍卡片、書籍推薦卡片、股票卡片。

所有操作都有動畫，就算係添加同刪除，每個部分都加咗唔同卡片大細嘅樣式適配。

仲記唔記得之前有個個人連結聚合產品就係咁嘅，後來仲俾人收購咗。

而我哋而家只需要打幾個字，㩒幾下同意就可以完成咁精美嘅產品。

K2.5 已經完全可以支援透過 Vibe Coding 同多模態參考嘅形式，跳過設計直接進行開發。

你完全可以透過唔同嘅參考圖邊設計邊開發，而且比起 Sonnet 4.5 平好多。。

其實我仲用咗其他比較「飛機稿」嘅設計圖測試過佢。

例如下面呢個風格強烈嘅後台界面，幾乎冇常見嘅設計風格，每個組件都好怪，而且整體風格一致性好強。

第一次復刻嘅結果已經唔錯，圖表呢部分冇得苛求，用現有圖表組件確實難復刻。

佢甚至為咗符合呢個風格，仲幫圖片加咗一個黑白網格點陣嘅濾鏡，說明佢已經有呢種美學同一致性嘅設計意識喇。

今次嘅 Agent 模式都好勁，畀咗 K2.5 虛擬機同各種工具之後，任務完成率高咗一大截。

你甚至可以直接畀佢一個連結，乜都唔講就叫佢復刻呢個網站。。

佢會自己訪問網頁，然後逐點逐點瀏覽、截圖、存檔分析。

如果網站允許嘅話，佢甚至可以幫你將圖片素材都搞過嚟。

直接睇結果，可以見到 K2.5 將所有互動同內容都搞掂曬，甚至嗰個卡片缺角都有意模仿。

而且佢唔係 1:1 復刻，佢會喺一啲小細節上採用自己嘅設計風格，而且呢個風格好一致，會保持喺成個網頁。

從呢個例子可以見到 K2.5 係有自己嘅美學邏輯同思維，唔單止係純粹嘅像素級致敬。

佢會抽取參考網頁嘅設計思路同特殊嘅處理方式，然後自己再進行融合處理。

當然你話你就是想佢像素級復刻，改多幾次佢都會跟。

跟住係最令我驚豔嘅一個案例。。

我整理咗一個設計風格嘅提示詞，準備畀佢一個文檔，變成網頁。

結果我唔記得咗發文檔本身，就淨係將提示詞發咗入去。

但係佢畀咗我一個好驚豔嘅結果：佢直接為呢個提示詞做咗一個設計系統嘅設計規範網站。

而且本身嘅風格都係跟住提示詞嚟嘅。

可以見到呢個其實好長，要求好多。

結果佢嘅跟從都幾好，用結合各種組件將具體嘅要求同設計風格都展示出嚟。

可能視頻睇唔係好清楚，佢仲幫背景加咗嗰種好似條紋嘅紋理，有種好似紙張嘅感覺。

仲有一個案例都係無意間整出嚟嘅，我覺得唔錯，畀大家睇下。

當時我叫佢復刻一個網頁，可能網頁有反爬，佢冇拎到資訊。

但係自己發揮依然畀咗一個相當唔錯嘅結果。

我從今次測試嘅結果嚟睇：

如果你想佢實現一啲簡單嘅效果同代碼，我推薦用普通嘅模型就得。

如果你嘅項目比較複雜，有好多動效，而且你有比較多資料畀佢參考嘅話，可以用 Agent 模式。

今次嘅多模態能力雖然有咗好大嘅進步。

但同其他類似模型一樣，去到一啲好細嘅設計細節時，佢其實冇辦法完全理解同捕捉到嗰啲精準嘅數值。

主要體現喺幾個方面：例如一啲好細嘅圓角、我上面案例中延伸出卡片嘅描邊、具體嘅色值。

呢方面我覺得大家（多模態模型）都仲需要繼續努力。

如果你覺得今次內容唔錯嘅話，歡迎幫我點讚👍、畀like，或者轉發俾你需要嘅朋友。

圖片的多模態識別獲得了增強，新支持視頻的多模態識別。

測試過程中，即使是他隨便發揮生成的網頁都非常漂亮。

真的非常對我一個設計師的胃口。

以往 AI 默認生成的結果都非常土，比如常見的那個藍紫色漸變。

如果你每次 AI 生成的網頁視覺效果都不符合要求，我推薦你試試 Kimi K2.5。

K2.5 發佈其實對於設計師和普通人的幫助都非常大：

這兩個加起來迭代代碼和生成網頁的時候就很舒服了。

你可以隨便找一些參考內容扔給他，圖片、視頻、網頁連結都可以。

然後通過截圖和標記不斷的迭代你的網頁作品。

我們來看一些藏師傅的測試。

既然支持視頻了，我們就搞一個難點的，我找了一個 Tab 切換的交互視頻。

這個組件雖然小，但是交互挺複雜的。

切換到右側的時候會完成一分二，而且選中狀態會變為白色。

整個交互細節也很多，比如文字的移動，回彈效果以及右側的膠囊設計。

這裏我的提示詞是：

“幫我實現視頻中的這個前端組件，重點是絲滑的交互動效，可以使用animejs 這類動效庫，重點關注切換後的已選中和未選中顏色變化以及關於右側一分二之後的設計細節”

我還是提醒了他一下需要重點關注的部分，不然由於主要交互時間過短他可能會錯過。

第一次生成的時候交互動效效果已經還原的很好了。

基礎的視覺部分有些小問題，比如左側文字顏色和右側對齊問題

然後我截圖標紅的方式給他反饋了視覺問題之後，他立刻就搞定了。

來看一下跟原始的用 AE 做的交互動效的對比。

基本上所有的要點都處理好了：

圓潤的文字字體、右側切換後的一分二、切換後已選中未選中顏色互換、右側黑色包裹白色膠囊。

他甚至加上了 duangduang 的回彈動效，看起來比原始的交互更具活力和真實。

其實這類小組件的交互視頻才是考驗模型視頻多模態和代碼生成最難的考題。

因為變化很快，而且交互的真實感往往是很多非常小的細節堆疊起來的。

K 2.5 第一個測試完成的不錯，我原本沒指望他可以完成。

接下來我們用一個案例看一下，如何用 K2.5 強大的前端美學和多模態能力迭代一個項目。

首先我們需要收集一些靈感，我找到一個天氣卡片切換的動效，非常絲滑。

於是就先把上面的交互視頻發給了 K2.5 ，讓他先還原這部分動效。

我照例把視頻發給了它，順便說了一下提示詞：

“幫我根據這個視頻實現類似的交互。中間的天氣圖片可以用互聯網圖片交互核心：鼠標 hover 上去時，卡片大小調整的彈性變化和無縫過渡的動效（如彈跳效果等），可以用 Anime.js 等動效庫去完成。功能模塊：刪除卡片、調整卡片大小”

很自然的他第一個版本就搞了一個不錯的東西出來。

有些視覺小問題，我就截圖標記發給他，不需要費心描述位置和細節。

而且我還在修復問題的時候讓他加功能。

除了圖標不一樣，K2.5 實現的效果我覺得甚至比原視頻還要好一些。

你發現沒有，我們現在基本上完成了一個類似 iOS 卡片組件的動效效果。

自然而然的我就想把這部分做完，加上更多的卡片類型，同時處理縱向的排列邏輯。

於是我就又去找一些其他的類似卡片設計參考，找到了一個閲讀卡片還不錯。

就讓他基於現在的交互效果，為我們的系統增加閲讀卡片的樣式，同時增加添加卡片的按鈕。

進行了兩三次這樣的迭代之後，我們就實現了一個非常炫酷充滿動效的卡片組件自定義系統。

現在他支持天氣卡片、純文本卡片、書籍卡片、書籍推薦卡片、股票卡片卡片。

所有的操作都有動畫，即使是添加和刪除，每個部分都加上了不同卡片大小的樣式適配。

還記得之前有個個人連結聚合產品就是這樣的嗎，後來還被收購了。

而我們現在只需要打幾個字，點幾下同意就能完成這樣精美的產品。

K 2.5 已經完全可以支持通過 Vibe Coding 和多模態參考的形式，跳過設計直接進行開發。

你完全可以通過不同的參考圖邊設計邊開發，而且相較於 Sonnet 4.5 便宜很多。

其實我還用其他的比較飛機稿的設計圖測試過他。

比如下面這個風格強烈的後台界面，幾乎沒有常見的設計風格每個組件都很怪，而且整體風格一致性很強。

第一次復刻的結果就不錯，圖表這部分不能苛求，用現有圖表組件確實難復刻。

他甚至為了符合這風格，還給圖片加了一個黑白網格點陣的濾鏡，說明已經擁有這種美學和一致性的設計意識了。

這次的 Agent 模式也非常強，給了 K 2.5 虛擬機和各種工具之後任務完成率高了一大截。

你甚至可以直接給他一個連接啥也不說就讓他復刻這個網站。

他會自己訪問網頁，然後一點一點瀏覽、截圖、存檔分析。

如果網站允許的話，他甚至可以幫你把圖片素材都搞過來。

直接看結果，可以看到 K2.5 把所有的交互和內容都搞定了，甚至那個卡片缺角也在有意模仿。

而且他不是 1:1 復刻，他會在一些小細節上採用自己的設計風格，而且這個風格很一致會保持完整個網頁。

從這個例子可以看到 K 2.5 是有自己的美學邏輯和思維的，不只是單純的 像素級致敬。

他會抽取參考網頁的設計思路和特殊的處理方式，然後自己再進行融合處理。

當然你說你就是想讓他像素級復刻，多改幾次他也會遵循。

接下來是最令我驚豔的一個案例。

我整理了一個設計風格的提示詞，準備給它一個文檔，變成網頁的。

結果我忘了發文檔本身，就把提示詞發了進去。

但他給了我一個非常驚豔的結果：他直接為這個提示詞做了一個設計系統的設計規範網站。

而且本身的風格也是跟着提示詞來的。

可以看到這個其實非常長，要求很多。

結果他的遵循相當不錯，用結合各種組件把具體的要求和設計風格都展示出來了。

可能視頻看不太出來，它還給背景加上了那種很像條紋的紋理，有種很像紙張的感覺。

還有一個案例也是無意間跑出來的我覺得不錯，給大家看一下。

當時我讓他復刻一個網頁，可能網頁有反爬他沒有拿到信息。

但是自己發揮依然給了一個相當不錯的結果。

我從這次測試的結果來看：

如果你想要讓它實現一些簡單的效果和代碼，我推薦用普通的模型就行。

如果你的項目比較複雜，有非常多的動效，且你有比較多的資料給它參考的話，可以用 Agent 模式。

這次的多模態能力雖然有了非常大的進步。

但與其他類似模型一樣，在涉及到一些非常小的設計細節時，它其實無法完全理解和捕捉到那些精準的數值。

主要體現幾個方面：比如一些很小的圓角、我上面案例中延伸出卡片的描邊、具體的色值。

這方面我覺得大家（多模態模型）都還需要繼續努力。

如果你覺得這次內容還不錯的話，歡迎給我點贊👍、喜歡喜歡，或者轉發給你需要的朋友。