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

Kimi 上線了他們的 K2.5 模型，前端審美非常好，幾乎要趕上 Gemini 3 了。

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

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

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

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

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

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

1. 1.對于設計師來說：它可以更好地遵循你的設計稿和提示詞，幫你還原并完成你想象中的設計。
2. 2.對于普通人來說：你可以不用管提示詞，也不用去找漂亮的設計稿，只需要把你的內容交給它即可。

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

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

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

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

既然支持視頻了，我們就搞一個難點的，我找了一個 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 模式。

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

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

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

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

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