UI/3D/代码动画... 分享4大类能去掉AI味的新技巧

这段时间我只要打开抖音都是vibe coding知识大赏动画。这段时间就是不停地刷动效 Skill，刷麻了。 见过9种到65种画风，甚至99种都有。在这些教程底下，不管提的pr、issue还是评论，都是在说，我用不了Opus 5.5，那我要怎么做？ 这个节点我就想看看，有没有国产模型，也能做出类Opus 5.5的代码动画？如果能，需要经过哪些步骤？ 所以这次我跟商汤的新模型SenseNova-6.8-Flash一拍即合，想来完成这个挑战。除了代码动画，我还加上了UI，3D和SVG动态海报，凑够四类常见的AI生成产物，先看在没有额外风格约束和Skill辅助时能做到什么程度，再用我自己做的vibecoding-humanizer重跑一遍。Here we go！ ㅤ 直接上正菜，代码动画。 想摸清一个模型的审美底子，我觉得第一个case上一支经典的代码动画就够了。也不用先去挑Three.js还是p5.js 这些技术栈，直接让它生成 15 秒，看它自己怎么选。 提示语就这一条，中英各一版。 制作一支充满动感的 15 秒动态图形视频，像求职作品集中的个人精彩混剪一样，充分展现你作为顶尖动态设计师的实力。放开手脚，火力全开。make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out. 为了观察模型最原始的表现，我新建了一个环境。一开始这个环境里啥都没有，没装视频制作Skill，没装 HyperFrames Skill，连Playwright都没装。我只给了上面这条提示语，没有任何风格上的约束。缺什么工具，要不要装，装哪个，全让模型自己拿主意。 做出来的15秒，长这样， 整体水平是在我预估之上的，特别是开头日落渐变色的同心圆环，搭配SHOWREEL字标擦除式显现的，还有第五幕的星形多边形的工具徽章，都挺有作品集的味道。 比起Opus 5.5的话，我可以挑出有比较有AI味的细节，一个是字体样式，一个是固定节奏的转场。 虽然一开始让AI做PPT的时候，这些还不叫AI味，但我觉得AI味这个词最没有道理的就是，一旦有个东西，有个风格，所有人那一段时间都在做的话，它也就被自动划分成为AI味这个广义的概念。 所以你仔细看这一版，用的其实就是当时我们做AI PPT最常见的那套样子。画面中间留一大片白，左上角挂一行补充说明的英文小字，意义不大，字形从头到尾几乎没变过。 再就是Opus 5.5比起国产模型，它在单次生成中还有一个比较明显的不同。 就是在画logo或者画像素动画的时候，定位会特别准。所以你可以看到商汤在这一版生成的时候，特别是在 logo，你会看到它中间的圆形会非常细微地超出这个外围正方形的靛青色线。 但我想说，这些都是能被解决的 AI 味。 上上篇里，我总结过最近半年大家常用的，用一两句提示语就能压掉AI味的办法。 分享6个新提示语去掉DeepSeek新模... 里面有两条准则，放到这里刚好对症。 第一条，去掉没必要的英文小字说明。用大白话讲，就是别什么都靠文字解释，能靠排版，位置，间距，大小和视觉关系让人看懂的，就别再啰嗦。 第二条，在整个页面里，先定好要用哪几种色号，哪几档字号，每种颜色各自负责什么功能。规矩定在前面，页面做出来才会不烧心。 前面说的这些，我已经总结成了自己做的 vibecoding-humanizer skill。把它安装到商汤小浣熊里，再用 SenseNova-6.8-Flash跑一次，你就会看到明显不一样。我这些写到的四类案例的优化版本用的都是这同一个 Skill。 来看7秒左右三原则那一帧，Purpose，Rhythm，Craft换成了压画面的粗重大字，旁边只留一句短说明，层级一眼就分开了。配色也从首版的紫粉橙，收进了橙红金一个色系，正好对上第二条准则。那种会动的PPT感淡了很多。 这类代码动画，模型从头到尾都是在写代码，再由浏览器或者渲染器把代码一帧一帧跑出来。 你可以把它想成小时候那种手翻动画书。每一页上的小人站在哪，多大，多透明，都是代码按时间算出来的，再套上一个缓动函数，比如弹性，正弦波，让动作有快有慢，然后一页一页重画。翻得够快，它就动起来了。 那些3D圆环点云，就是在代码里算出每个点的三维坐标，每帧转一点点，再投影到平面上。生成艺术那部分，是拿一个随机种子加上流场公式，算出粒子该往哪儿飘。用的基本都是Canvas、SVG 或 WebGL，再加上 JavaScript。 OK，既然UI跟代码动画在审美和排版上重叠的地方这么多，那下一个，就来测UI。 老粉应该知道，很长一段时间，我在设计AI提示语网站goodcase和AI热点图谱 aimap 的时候，都是刻意躲着黑色蓝色紫色这几个色系走的。 后来给AI教程网站learnprompt用上了紫色，我也是把墨黑，淡紫和3D素材搭在一起，才敢说它没那么重的AI味。 因为黑色网页是真的不好做。 做得好是高级，做得一般，就会被一眼认出来，然后被吐槽一句，好重AI味。大家可以看一下啊，DeepSeek跑出来的这个，比方说我让它生成一个深黑背景、银色金属轮廓、冷白光这种，一看就知道会踩那个AI味的雷点。 看那行PRECISION IN SILENCE的英文大字就够了。产品图也有点跑偏，我要的是银色金属耳机，出来更像一副耳塞。深黑加冷光这种题，最容易交出来的就是这种看着高级，换谁来做都差不多的页面。 然后我换到SenseNova-6.8-Flash加载我这个 Skill，再做一次。加载 Skill 之后，网页搭建的顺序就变了。先生成主视觉图，然后主动检查有没有达标，最后才按我们给的方法搭首页，不往上堆功能区。 我的习惯是先出首页，首页过了，再出后面的页面。首页一定下来，后面几页的风格就都有了参照。 大家可以看一下它完整的页面。 UI 这方面去AI味，这段时间能补充的新细节不多，我更多是在看Taste Skill这类项目怎么做。 现在很多 Skill 的思路挺一致的。卡片的大圆角和阴影减下去，主题色控制在一到两个，背景用接近黑白的中性色，点缀色只留给关键的交互位置。 AI 写的网页还有一个老毛病，字特别多。所以现在去 AI 味有个很重要的办法，是拿真实截图或者线框图去当参考，光靠文字描述是不够的。全大写的胶囊标签，莫名其妙在滚的emoji，装饰性的光晕，这些也都被ban掉了。 如果你想把这些东西收成一个简单的动作，除了装我这个能覆盖四类情况的Skill，我还挺建议在生成完之后，多走一步验收。生成后用Hallmark，Impeccable，Taste Skill 再跑一遍审计和polish 这三个里两个都是10万Star的项目。 OK，都做了两个平面了，接下来就做3D。 3D也一样，不管是做3D动画，还是做能互动的3D建模，其实都能看出一个模型带不带所谓的AI味。 测试题很简单。第一轮限定只用Three.js，不碰Blender，提示语里尽量写清楚想在场景里放哪些物体，哪些细节，然后看模型会用什么样的几何形状去表达它们。等到优化阶段，再让它开Blender神力。 这一版挺有意思的。仙鹤是用类似折纸鹤的方式叠出来的，能看出它有自己的思路。 普通的阶梯和瓷砖，用的都是长方体堆砌上来的。 3D 跟前面两类不太一样，它的AI味更多出在物理上。看这一帧，第一级台阶往上抬了一大截，真爬上去，估计都要飞天遁地了。山是另一个问题。山体做成了带锯齿的形状，有点像金字塔。侧面那些纹理更像是一张贴图直接贴上去的，一道道没有规律的黑线，看着不像枯掉的树，也不像荒山。 然后，树是浮在半空中的。。。 所以这里最明显的改进方向有两个。 一个是把建模细节做好。第一轮只用Three.js，到了优化阶段就开放Blender，让模型自己判断哪些部分适合交给 Blender建，哪些部分继续用Three.js实现。另一个是，在规划好的场景里，尽可能保留真实的物理性质。 这块我还专门翻了goodcase这段时间抓到的3D case，看看大家做3D都会用到哪些关键词。3D这方面专用的 Skill其实挺少的，所以我把下面要说的这些点，都融进了vibecoding-humanizer里。 可以看出，改过光影，调整过细节之后，SenseNova-6.8-Flash用的几何体其实没有更复杂很多，但是在细节方面，不同颜色的青砖瓦，房间的结构，以及重构之后的鹤，表现效果已经不一样了。绕到侧面那几个视角看，平台底下有岩柱撑着，树也都长在台面上，之前那些物理性的bug基本都消掉了。 准确地说，要明确材质，再指定灯光。 像Blender这样的工具，需要通过灯光形成明确的阴影。如果到处都在发光，整个画面就会显得很假。就算建模精度不高，灯光合理了，表现也能好上一大截。 然后像刚提到的这种几何感要怎么磨掉呢，其实我们就可以在普通的面上去加轻微磨损，边缘倒角，以及非完美的几何去增加它的真实缺陷。 也可以加入更具体的3D约束。如果Agent能操作本地建模工具，SenseNova-6.8-Flash也是支持computer use的，我就二次明确了相机的位置和角度，不要总用默认正视视角。另外，制作PBR贴图时，要禁止把阴影和高光烘焙进贴图。 最后，分步完成的思路也适用于3D。做 UI 时，可以先做好hero模块，定下风格，再完成其余部分和后续页面，做 3D 时，则可以先定几何和拓扑，再单独调整材质与灯光。 最近还有一种形式，有点类似SVG的新分支。 以前我们做SVG的时候，可能就是做经典的鹈鹕骑单车，这次新模型做的，我也放在这里了。 另外一个新的形式其实就是动态海报。 它是HTML，SVG和CSS搭起来的一种组合。一张图里，每个元素都可以单独拿出来用。图表，数据，文字都放在独立的HTML层上，这时候动态海报里的标题，图注，数值都保持成随时能改能动的文本。用人话来说，相当于一张可以随时调整文本的海报，换一句话，改一个数值，都不用重新生成，还可以加上一点简单的位移和光框。 SVG 当然也有自己独特的压缩AI味的方法，前面 UI 里说过的那些，约束输出格式、颜色、风格锚点和图标系统，这里就不重复了。3D里说的分步生成，也一样适用。 SVG要多花功夫的，是生成之后那一步清理。 回到这张海报的静帧，主照片旁边那几格，每一格都有自己的小标题。哪一格要换图换字，单独动那一格就行。 后期清理我整理成了4类。 第一就是删除背景和隐形层。这里说的背景，是那种盖满整个viewBox、没有任何意义的白底矩形或路径；第二简化路径节点。一条简单的曲线，不该挂几十个点，可以用Illustrator的Object>Path>Simplify，把多余的节点合掉； 第三统一重叠路径。模型画的图经常把一条线拆成好几个重叠的形状，透明度一叠就发暗。在Illustrator 里做一次布尔合并（Boolean）就好了；最后一步，像是GPT特别喜欢写注释，冗余属性和一长串小数，可以用SVGO或 SVGOMG 清掉注释和冗余属性，再把小数精度降下来。 好，四类都走完了。 回头看，这四大类产物，都是可以靠提示语加Skill往好了改的。而且也不一定非得每一类都去找一个专用的、特别底层的去 AI 味提示语，有一些限制写对了，就能把效果稳在一个不错的水平上。 再说回开头那个问题。 用国产模型做 Opus 5.5 风格的代码动画，真的不可能吗？ 我自己的答案是，不至于到我在某音上刷到的那么惨，只能做成会动的 PPT。 方法对了，做之前给它参考影片，做完以后接着调，也能做到八九成相似。 所以我觉得，大家真的不用太担心。 看到一个好看的case，就去复刻它，它就是能做出来的。 国产模型追上Opus 5.5速度还是超快的。 模型会更新，会换代，也总会有一时半会儿用不上的时候。 但你攒下来的审美，踩过的坑，总结出来的方法， 可以装进一个Skill里， 跟着你换到任何一个模型上。 @ 作者 / 卡尔 最后，感谢你看到这里👏如果喜欢这篇文章，不妨顺手给我们点赞｜在看｜转发｜评论 📣 如果想第一时间收到推送，不妨给个星标🌟 如果你有更有趣的玩法，欢迎聊聊🤝 更多的内容正在不断填坑中……