AI探索指南
lpjrEIMEzPlFJXZQtR40tHyxHSP1.mp4.mov
「帮我根据这个视频实现类似的交互。中间的天气图片可以用互联网图片。交互核心：鼠标 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，便宜不少。
