试了一下 Kimi-K2.5,真的很顶!
美学表现、设计还原、从视频还原动效交互都是 T0 水平。
我后面写前端应该都会优先用这个模型了。
里面还有些藏师傅的使用小技巧:
mp.weixin.qq.com======
为什么审美重要
以前 AI 生成的网页,不管你提示词写得多好,默认生成的结果都很土。
设计师每次都得反复调教,普通人根本不知道怎么描述自己想要的风格。
K2.5 解决了这个痛点:
▸ 对设计师:它能更好地遵循你的设计稿和提示词,帮你还原想象中的设计
▸ 对普通人:不用管提示词,不用找参考,把内容交给它就行
这两个加起来,迭代代码和生成网页就很舒服了。你可以随便找参考内容扔给它——图片、视频、网页链接都可以,然后通过截图标记不断迭代。
======
测试 1:Tab 切换交互组件
既然支持视频了,就搞个难的。
我找了一个 Tab 切换的交互视频,这个组件虽然小,但交互挺复杂。切换到右侧时会一分二,选中状态变白色,还有文字移动、回弹效果、右侧的胶囊设计。
提示词:
「帮我实现视频中的这个前端组件,重点是丝滑的交互动效,可以使用 anime.js 这类动效库,重点关注切换后的已选中和未选中颜色变化以及关于右侧一分二之后的设计细节」
------
第一次生成的交互动效就还原得很好了。
基础视觉有些小问题,比如左侧文字颜色和右侧对齐。我截图标红反馈之后,立刻搞定。
来看跟原始 AE 做的动效对比,基本所有要点都处理好了:圆润的文字字体、右侧一分二、颜色互换、黑色包裹白色胶囊。
它甚至加上了 duangduang 的回弹动效,看起来比原始交互更有活力和真实感。
------
这类小组件的交互视频才是最难的考题。
因为变化很快,交互的真实感往往是很多非常小的细节堆叠起来的。K2.5 第一次测试就完成得不错,我原本没指望它能做到。
======
测试 2:从视频到完整的卡片系统
这个案例展示如何用 K2.5 的多模态能力迭代一个项目。
首先找灵感,我找到一个天气卡片切换的动效,非常丝滑。把视频发给 K2.5,让它还原这部分动效。
提示词:
「帮我根据这个视频实现类似的交互。中间的天气图片可以用互联网图片。交互核心:鼠标 hover 上去时,卡片大小调整的弹性变化和无缝过渡的动效(如弹跳效果等),可以用 Anime.js 等动效库去完成。功能模块:删除卡片、调整卡片大小」
第一个版本就搞出了不错的东西。
------
有些视觉小问题,我截图标记发给它,不需要费心描述位置和细节。而且我还在修复问题的时候让它加功能。
经过两轮修改,基本就还原了视频原本的交互动画和效果。除了图标不一样,K2.5 实现的效果我觉得甚至比原视频还要好一些。
------
做到这里,基本上完成了一个类似 iOS 卡片组件的动效效果。
自然而然就想把这部分做完,加上更多的卡片类型,同时处理纵向的排列逻辑。
于是又去找其他类似卡片设计参考,找到一个阅读卡片还不错。让它基于现在的交互效果,为系统增加阅读卡片的样式,同时增加添加卡片的按钮。
------
进行两三次这样的迭代之后,实现了一个非常炫酷充满动效的卡片组件自定义系统。
现在它支持天气卡片、纯文本卡片、书籍卡片、书籍推荐卡片、股票卡片。所有的操作都有动画,即使是添加和删除,每个部分都加上了不同卡片大小的样式适配。
还记得之前有个个人链接聚合产品就是这样的吗,后来还被收购了。而我们现在只需要打几个字,点几下同意就能完成这样精美的产品。
K2.5 已经完全可以支持通过 Vibe Coding 和多模态参考的形式,跳过设计直接进行开发。你完全可以通过不同的参考图边设计边开发,而且相较于 Sonnet 4.5 便宜很多。
======
Agent 模式:给它一个链接,啥也不说
这次的 Agent 模式非常强,给了 K2.5 虚拟机和各种工具之后,任务完成率高了一大截。
你甚至可以直接给它一个链接,啥也不说,就让它复刻这个网站。
它会自己访问网页,然后一点一点浏览、截图、存档分析。如果网站允许的话,它甚至可以帮你把图片素材都搞过来。
------
直接看结果,K2.5 把所有的交互和内容都搞定了,甚至那个卡片缺角也在有意模仿。
而且它不是 1:1 复刻,它会在一些小细节上采用自己的设计风格,而且这个风格很一致,会保持完整个网页。
从这个例子可以看到,K2.5 是有自己的美学逻辑和思维的,不只是单纯的像素级致敬。
它会抽取参考网页的设计思路和特殊的处理方式,然后自己再进行融合处理。当然你说你就是想让它像素级复刻,多改几次它也会遵循。
======
最惊艳的案例:设计系统规范网站
这个是意外。
我整理了一个设计风格的提示词,准备给它一个文档,变成网页的。结果我忘了发文档本身,就把提示词发了进去。
但它给了我一个非常惊艳的结果:它直接为这个提示词做了一个设计系统的设计规范网站。而且本身的风格也是跟着提示词来的。
------
这个提示词其实非常长,要求很多。
结果它的遵循相当不错,用结合各种组件把具体的要求和设计风格都展示出来了。它还给背景加上了那种很像条纹的纹理,有种很像纸张的感觉。
------
还有一个案例也是无意间跑出来的。
当时我让它复刻一个网页,可能网页有反爬它没有拿到信息。但是自己发挥依然给了一个相当不错的结果。
这说明它的自主设计能力已经很强了。
======
使用建议
从这次测试的结果来看:
▸ 简单效果和代码:用普通模式就行
▸ 复杂项目、大量动效、多资料参考:用 Agent 模式
------
Agent 模式的任务完成率明显高很多,但消耗的 Token 也更多。根据你的项目复杂度和预算选择。
======
局限性
这次的多模态能力虽然有了非常大的进步,但与其他类似模型一样,在涉及到一些非常小的设计细节时,它其实无法完全理解和捕捉到那些精准的数值。
主要体现在几个方面:
▸ 很小的圆角
▸ 卡片的描边细节
▸ 具体的色值
这方面我觉得大家(多模态模型)都还需要继续努力。
------
但总体来说,K2.5 在前端审美和动效复刻上已经是目前最好的选择之一了。配合 Agent 模式,边设计边开发的工作流已经很流畅。
而且相比 Sonnet 4.5,便宜不少。