告別 AI 土味審美！Kimi K2.5 實(shí)測(cè)：扔個(gè)視頻復(fù)刻 iOS 級(jí)絲滑動(dòng)效

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

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

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

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

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

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

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

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

這兩個(gè)加起來(lái)迭代代碼和生成網(wǎng)頁(yè)的時(shí)候就很舒服了。

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

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

我們來(lái)看一些藏師傅的測(cè)試。

既然支持視頻了，我們就搞一個(gè)難點(diǎn)的，我找了一個(gè) Tab 切換的交互視頻。

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

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

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

這里我的提示詞是：

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

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

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

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

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

來(lái)看一下跟原始的用 AE 做的交互動(dòng)效的對(duì)比。

基本上所有的要點(diǎn)都處理好了：

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

他甚至加上了 duangduang 的回彈動(dòng)效，看起來(lái)比原始的交互更具活力和真實(shí)。

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

因?yàn)樽兓芸欤医换サ恼鎸?shí)感往往是很多非常小的細(xì)節(jié)堆疊起來(lái)的。

K 2.5 第一個(gè)測(cè)試完成的不錯(cuò)，我原本沒(méi)指望他可以完成。

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

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

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

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

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

很自然的他第一個(gè)版本就搞了一個(gè)不錯(cuò)的東西出來(lái)。

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

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

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

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

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

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

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

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

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

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

所有的操作都有動(dòng)畫(huà)，即使是添加和刪除，每個(gè)部分都加上了不同卡片大小的樣式適配。

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

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

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

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

其實(shí)我還用其他的比較飛機(jī)稿的設(shè)計(jì)圖測(cè)試過(guò)他。

比如下面這個(gè)風(fēng)格強(qiáng)烈的后臺(tái)界面，幾乎沒(méi)有常見(jiàn)的設(shè)計(jì)風(fēng)格每個(gè)組件都很怪，而且整體風(fēng)格一致性很強(qiáng)。

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

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

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

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

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

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

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

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

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

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

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

接下來(lái)是最令我驚艷的一個(gè)案例。

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

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

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

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

可以看到這個(gè)其實(shí)非常長(zhǎng)，要求很多。

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

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

還有一個(gè)案例也是無(wú)意間跑出來(lái)的我覺(jué)得不錯(cuò)，給大家看一下。

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

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

我從這次測(cè)試的結(jié)果來(lái)看：

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

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

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

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

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

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

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