试了一下 Kimi-K2.5,真的很顶!
美学表现、设计还原、从视频还原动效交互都是 T0 水平。
我后面写前端应该都会优先用这个模型了。
里面还有些藏师傅的使用小技巧:https://mp.weixin.qq.com/s/udlZJIu-aqRFdMhvq27zyw
======
为什么审美重要
以前 AI 生成的网页,不管你提示词写得多好,默认生成的结果都很土。
设计师每次都得反复调教,普通人根本不知道怎么描述自己想要的风格。
K2.5 解决了这个痛点:
▸ 对设计师:它能更好地遵循你的设计稿和提示词,帮你还原想象中的设计
▸ 对普通人:不用管提示词,不用找参考,把内容交给它就行
这两个加起来,迭代代码和生成网页就很舒服了。你可以随便找参考内容扔给它——图片、视频、网页链接都可以,然后通过截图标记不断迭代。
======
测试 1:Tab 切换交互组件
既然支持视频了,就搞个难的。
我找了一个 Tab 切换的交互视频,这个组件虽然小,但交互挺复杂。切换到右侧时会一分二,选中状态变白色,还有文字移动、回弹效果、右侧的胶囊设计。
提示词:
「帮我实现视频中的这个前端组件,重点是丝滑的交互动效,可以使用 anime.js 这类动效库,重点关注切换后的已选中和未选中颜色变化以及关于右侧一分二之后的设计细节」
------
第一次生成的交互动效就还原得很好了。
基础视觉有些小问题,比如左侧文字颜色和右侧对齐。我截图标红反馈之后,立刻搞定。
来看跟原始 AE 做的动效对比,基本所有要点都处理好了:圆润的文字字体、右侧一分二、颜色互换、黑色包裹白色胶囊。
它甚至加上了 duangduang 的回弹动效,看起来比原始交互更有活力和真实感。
------
这类小组件的交互视频才是最难的考题。
因为变化很快,交互的真实感往往是很多非常小的细节堆叠起来的。K2.5 第一次测试就完成得不错,我原本没指望它能做到。
======
测试 2:从视频到完整的卡片系统
这个案例展示如何用 K2.5 的多模态能力迭代一个项目。
首先找灵感,我找到一个天气卡片切换的动效,非常丝滑。把视频发给 K2.5,让它还原这部分动效。
提示词:
美学表现、设计还原、从视频还原动效交互都是 T0 水平。
我后面写前端应该都会优先用这个模型了。
里面还有些藏师傅的使用小技巧:https://mp.weixin.qq.com/s/udlZJIu-aqRFdMhvq27zyw
======
为什么审美重要
以前 AI 生成的网页,不管你提示词写得多好,默认生成的结果都很土。
设计师每次都得反复调教,普通人根本不知道怎么描述自己想要的风格。
K2.5 解决了这个痛点:
▸ 对设计师:它能更好地遵循你的设计稿和提示词,帮你还原想象中的设计
▸ 对普通人:不用管提示词,不用找参考,把内容交给它就行
这两个加起来,迭代代码和生成网页就很舒服了。你可以随便找参考内容扔给它——图片、视频、网页链接都可以,然后通过截图标记不断迭代。
======
测试 1:Tab 切换交互组件
既然支持视频了,就搞个难的。
我找了一个 Tab 切换的交互视频,这个组件虽然小,但交互挺复杂。切换到右侧时会一分二,选中状态变白色,还有文字移动、回弹效果、右侧的胶囊设计。
提示词:
「帮我实现视频中的这个前端组件,重点是丝滑的交互动效,可以使用 anime.js 这类动效库,重点关注切换后的已选中和未选中颜色变化以及关于右侧一分二之后的设计细节」
------
第一次生成的交互动效就还原得很好了。
基础视觉有些小问题,比如左侧文字颜色和右侧对齐。我截图标红反馈之后,立刻搞定。
来看跟原始 AE 做的动效对比,基本所有要点都处理好了:圆润的文字字体、右侧一分二、颜色互换、黑色包裹白色胶囊。
它甚至加上了 duangduang 的回弹动效,看起来比原始交互更有活力和真实感。
------
这类小组件的交互视频才是最难的考题。
因为变化很快,交互的真实感往往是很多非常小的细节堆叠起来的。K2.5 第一次测试就完成得不错,我原本没指望它能做到。
======
测试 2:从视频到完整的卡片系统
这个案例展示如何用 K2.5 的多模态能力迭代一个项目。
首先找灵感,我找到一个天气卡片切换的动效,非常丝滑。把视频发给 K2.5,让它还原这部分动效。
提示词: