https://x.com/i/article/2118674564461019138
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 味的办法。里面有两条准则，放到这里刚好对症。
第一条，去掉没必要的英文小字说明。用大白话讲，就是别什么都靠文字解释，能靠排版，位置，间距，大小和视觉关系让人看懂的，就别再啰嗦。
第二条，在整个页面里，先定好要用哪几种色号，哪几档字号，每种颜色各自负责什么功能。规矩定在前面，页面做出来才会不烧心。
前面说的这些，我已经总结成了自己做的 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 里，
跟着你换到任何一个模型上。