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

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

測試過程中，即使是他隨便發(fā)揮生成的網(wǎng)頁都非常漂亮。

真的非常對我一個設(shè)計師的胃口。

以往 AI 默認(rèn)生成的結(jié)果都非常土，比如常見的那個藍(lán)紫色漸變。

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

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

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

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

你可以隨便找一些參考內(nèi)容扔給他，圖片、視頻、網(wǎng)頁鏈接都可以。

然后通過截圖和標(biāo)記不斷的迭代你的網(wǎng)頁作品。

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

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

這個組件雖然小，但是交互挺復(fù)雜的。

切換到右側(cè)的時候會完成一分二，而且選中狀態(tài)會變?yōu)榘咨?/p>

整個交互細(xì)節(jié)也很多，比如文字的移動，回彈效果以及右側(cè)的膠囊設(shè)計。

這里我的提示詞是：

“幫我實現(xiàn)視頻中的這個前端組件，重點是絲滑的交互動效，可以使用animejs 這類動效庫，重點關(guān)注切換后的已選中和未選中顏色變化以及關(guān)于右側(cè)一分二之后的設(shè)計細(xì)節(jié)”

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

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

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

然后我截圖標(biāo)紅的方式給他反饋了視覺問題之后，他立刻就搞定了。

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

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

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

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

其實這類小組件的交互視頻才是考驗?zāi)Ｐ鸵曨l多模態(tài)和代碼生成最難的考題。

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

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

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

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

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

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

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

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

有些視覺小問題，我就截圖標(biāo)記發(fā)給他，不需要費心描述位置和細(xì)節(jié)。

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

經(jīng)過了兩輪修改基本就還原了視頻原本的交互動畫和效果。

除了圖標(biāo)不一樣，K2.5 實現(xiàn)的效果我覺得甚至比原視頻還要好一些。

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

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

于是我就又去找一些其他的類似卡片設(shè)計參考，找到了一個閱讀卡片還不錯。

就讓他基于現(xiàn)在的交互效果，為我們的系統(tǒng)增加閱讀卡片的樣式，同時增加添加卡片的按鈕。

進行了兩三次這樣的迭代之后，我們就實現(xiàn)了一個非常炫酷充滿動效的卡片組件自定義系統(tǒng)。

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

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

還記得之前有個個人鏈接聚合產(chǎn)品就是這樣的嗎，后來還被收購了。

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

K 2.5 已經(jīng)完全可以支持通過 Vibe Coding 和多模態(tài)參考的形式，跳過設(shè)計直接進行開發(fā)。

你完全可以通過不同的參考圖邊設(shè)計邊開發(fā)，而且相較于 Sonnet 4.5 便宜很多。

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

比如下面這個風(fēng)格強烈的后臺界面，幾乎沒有常見的設(shè)計風(fēng)格每個組件都很怪，而且整體風(fēng)格一致性很強。

第一次復(fù)刻的結(jié)果就不錯，圖表這部分不能苛求，用現(xiàn)有圖表組件確實難復(fù)刻。

他甚至為了符合這風(fēng)格，還給圖片加了一個黑白網(wǎng)格點陣的濾鏡，說明已經(jīng)擁有這種美學(xué)和一致性的設(shè)計意識了。

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

你甚至可以直接給他一個連接啥也不說就讓他復(fù)刻這個網(wǎng)站。

他會自己訪問網(wǎng)頁，然后一點一點瀏覽、截圖、存檔分析。

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

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

而且他不是 1:1 復(fù)刻，他會在一些小細(xì)節(jié)上采用自己的設(shè)計風(fēng)格，而且這個風(fēng)格很一致會保持完整個網(wǎng)頁。

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

他會抽取參考網(wǎng)頁的設(shè)計思路和特殊的處理方式，然后自己再進行融合處理。

當(dāng)然你說你就是想讓他像素級復(fù)刻，多改幾次他也會遵循。

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

我整理了一個設(shè)計風(fēng)格的提示詞，準(zhǔn)備給它一個文檔，變成網(wǎng)頁的。

結(jié)果我忘了發(fā)文檔本身，就把提示詞發(fā)了進去。

但他給了我一個非常驚艷的結(jié)果：他直接為這個提示詞做了一個設(shè)計系統(tǒng)的設(shè)計規(guī)范網(wǎng)站。

而且本身的風(fēng)格也是跟著提示詞來的。

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

結(jié)果他的遵循相當(dāng)不錯，用結(jié)合各種組件把具體的要求和設(shè)計風(fēng)格都展示出來了。

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

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

當(dāng)時我讓他復(fù)刻一個網(wǎng)頁，可能網(wǎng)頁有反爬他沒有拿到信息。

但是自己發(fā)揮依然給了一個相當(dāng)不錯的結(jié)果。

我從這次測試的結(jié)果來看：

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

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

這次的多模態(tài)能力雖然有了非常大的進步。

但與其他類似模型一樣，在涉及到一些非常小的設(shè)計細(xì)節(jié)時，它其實無法完全理解和捕捉到那些精準(zhǔn)的數(shù)值。

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

這方面我覺得大家（多模態(tài)模型）都還需要繼續(xù)努力。

如果你覺得這次內(nèi)容還不錯的話，歡迎給我點贊、喜歡喜歡，或者轉(zhuǎn)發(fā)給你需要的朋友。