北京
Kimi 上线了他们的 K2.5 模型，前端审美非常好，几乎要赶上 Gemini 3 了。
图片的多模态识别获得了增强，新支持视频的多模态识别。
测试过程中，即使是他随便发挥生成的网页都非常漂亮。
真的非常对我一个设计师的胃口。
以往 AI 默认生成的结果都非常土，比如常见的那个蓝紫色渐变。
如果你每次 AI 生成的网页视觉效果都不符合要求，我推荐你试试 Kimi K2.5。
K2.5 发布其实对于设计师和普通人的帮助都非常大：
- 1.对于设计师来说：它可以更好地遵循你的设计稿和提示词，帮你还原并完成你想象中的设计。
- 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 模式。
这次的多模态能力虽然有了非常大的进步。
但与其他类似模型一样，在涉及到一些非常小的设计细节时，它其实无法完全理解和捕捉到那些精准的数值。
主要体现几个方面：比如一些很小的圆角、我上面案例中延伸出卡片的描边、具体的色值。
这方面我觉得大家（多模态模型）都还需要继续努力。
如果你觉得这次内容还不错的话，欢迎给我点赞、喜欢喜欢，或者转发给你需要的朋友。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
