👦🏻 作者: GaKi
🥷 编辑: Koji
🧑🎨 排版: NCon
Claude Opus 5.5 发布之后，如果只看 Coding 能力的跑分，其实很难解释为什么很多开发者对这一代模型的体感这么强。
其中一个很重要的变化，其实是发生在前端上 —— AI 写出来的页面，是真的变好看了。
这也算是印证了 Vibe Coding 的一个很好玩的说法：
不过，现在 AI 做前端这件事，现在已经不只是 Opus 5.5 的优势了。
9 月 27 日，MiniMax 将 M3.1 Flash Preview 上线 MiniMax Code 并开启公测。这是一款在 Coding 和 Agent 工作上进一步提升的 Flash 模型，同时可以直接理解图片和视频。
我们这次实际测下来，一个比较明显的感受是，M3.1 Flash Preview 的前端能力相比 MiniMax 之前的模型，确实进步了很多，部分场景和 Claude Opus 5.5 对比也不输。
尤其是在复杂页面、视觉还原，以及一些比较有风格的交互网站上，两者做出来的结果已经非常接近。
接下来，我们做了 3 个非常有趣的 Case，看看 M3.1 Flash Preview 现在到底能把前端做到什么程度。
首先，现在 MiniMax M3.1 Flash Preview 已经可以直接在 MiniMax Code 里用了。速度挺快，官方给的数据大概是每秒 150 Token，我自己实际用下来，基本能跑到每秒 130 Token 左右。
最近 Opus 5.5 很火，很多人都在用它直接写 Python，逐帧渲染各种短片。里面有一种我很喜欢的效果，就是 @小禁书我和你拼了 做的动效简历。
这两天我也参考了下这位博主所做成品的风格，试了下 MiniMax M3.1 Flash Preview。只要把提示词写完整，它也能做出比较接近的效果。
比如，我让它只用 Python，配合 PIL 和 NumPy 逐帧渲染一段动态图形短片，给 Gemini 4 的模型发布史做一份动效简历。
整个过程不需要 Manim，也不用 AE，直接靠 Python 就能把动画一帧一帧画出来。
因为 M3.1 Flash Preview 本身就是 Flash 级模型，所以速度很快，也很适合反复改。
它的整体能力比较均衡，前端效果和审美也不错，我基本改 3～5 轮，整体效果就差不多了。
我录了几个 GIF，大家可以直接看下实际效果。
比如下面这个，我做的是从 Bard 到 Gemini 的整个变化过程。中间还顺手重新设计了一版 Gemini 图标，我给它取名叫「芒芒」。
整个项目里没有用任何 AI 生成图片，画面里的元素和动效，都是直接用代码做出来的。
再比如下面这种动态切镜：
我一开始先让 M3.1 Flash Preview 帮我把分镜补完整，再根据这套分镜去做短视频。
所以最后出来的效果里，会有很多动效之间的过渡，也会有不同镜头之间的切换。像下面这种音波变化，也能直接做出来。
这类效果本来就很常见于产品展示，所以拿来做 HTML 动效也比较合适，整个过程做下来还是挺顺的。
相比较 PPT、HTML 这类形式，本身会受到一些版式和前端规则的限制。纯 Python 的自由度会更高，文字、位置、动效都可以直接控制。
所以它才可以做出下面这种非常具有动效感的画面，但是本身的精准度又足够细致：
甚至更复杂一点，可以让它做出下面这种动态的方格展示图。所有的 Gemini 设计的角色 logo 可以排在一个方块里面，然后挤满整个屏幕，然后全部一起跳动。
上面这些，更像是在看 M3.1 Flash Preview 的纯前端能力。
但现在不少模型，比如 GPT 6 Astra、Opus 5.5，还有这次的 M3.1 Flash Preview，其实已经很适合把 3D 建模和前端交互放在一起做。
比如我做了一个「相机拆解实验台」，用来讲相机到底是怎么工作的。我用相同的提示词输入给 M3.1 Flash Preview 和 Opus 5.5 ，一起做了个简单效果对比。
二者的表现，其实非常接近。
它是一个可以直接操作的 3D 网页，我把整个过程拆成了 10 步，从最开始的一堆相机零件，到最后组装成一台完整的无反相机。
这里没有用 Blender 去做复杂建模，很多模型和交互都是直接靠代码完成。
而下面这个是 Opus 5.5 做出来的版本。整体效果和 M3.1 Flash Preview 已经非常接近了，不过 Opus 5.5 会在这个基础上再补一些细节，比如对重点组件做更明显的突出显示。
接下来就是整机拆解和光路演示。
点击之后，相机会把内部结构一层一层展开。光线从前往后进入机身，依次经过镜头、光圈和快门，最后到达图像传感器。
Opus 5.5 根据同一套提示词做出来的整体效果，和 M3.1 Flash Preview 相比并无太多差别。
不过在细节上，Opus 5.5 还多做了一步，比如给整个相机组装过程加上了长度和距离标尺，让整个展示更完整。
传感器后面还有主板和图像处理器，会继续把接收到的信号处理成最终的照片。
除了这些核心部件，机身里面的电池、电子取景器和背部屏幕也都能看到。
光圈可以从 F1.4 一直调到 F16。每调一次，右上角都会有一张对应的图片，直接展示这个光圈下拍出来大概是什么效果。
图像传感器其实是无反相机里很核心的一部分，因为里面会有几千万个像素。
所以我又做了一个传感器拆解，可以一层一层展开来看。
里面还有一个动态交互效果，光子会落进光电二极管里，然后再转换成电子。这样看整个过程会直观很多。
平时拍照还会有不同的格式，比如 RAW 和 JPEG。中间还会经过很多图像处理，比如去马赛克、白平衡、降噪和锐化。
这些也可以让 M3.1 Flash Preview 做成比较直观的动态展示。
比如从传感器最开始输出的原始数据开始，每个像素只记录一种颜色，再一步一步展示图像是怎么完成去马赛克、白平衡、降噪和锐化，最后再压缩成 JPEG 文件，写进存储卡。
在图像处理这一块，Opus 5.5 的细节会做得更完整一些。比如右上角图片切换时，它会加入一个滑动过渡，整个变化会更自然。
不过在光效上，M3.1 Flash Preview 反而做得更细。尤其是光粒子的数量、层次和运动效果，看起来会更丰富一些。
最后还有一个全流程回顾。
先把前面拆开的所有部件重新装回去，然后从按下快门开始，看光线怎么依次穿过镜头、光圈和快门，再到传感器完成记录，最后由处理器生成照片。
这个全流程回顾，其实是这次测试里最复杂的一部分。里面同时涉及光线变化、数据流动、电子信号传输，以及多个连续场景之间的衔接。
但也正是在这个 Case 里，使用同一套提示词时，M3.1 Flash Preview 和 Opus 5.5 最终做出来的效果几乎差不多，单看成品，已经很难看出明显差别。
基本上到这里，一台相机完整的工作原理就讲完了。
像这种快速建模，再加上各种比较直观的动态交互，其实都挺考验前端和 Coding 能力。
比如选中某个零件之后，这个零件会亮起一层比较自然的光，用来突出重点。还有各种讲解标签、光线和电子信号的传输，甚至按下快门之后，光线走完整个流程，最后屏幕上到底显示出什么样的照片，这些都需要前端效果和代码能力一起配合。
从这个角度来看，M3.1 Flash Preview 与 Opus 5.5 在相同的提示词输入下，表现非常接近甚至是持平的。
下面再来看一个贴纸复刻的案例。
这两天我在看各种开源项目的时候，发现不少大神做了很多很有艺术感的项目。不过这类项目里，很多都会用到 AI 生成的贴图。
比如下面这个，就是一个叫「Mr. Panda 熊猫纸艺世界」的开源项目。
现在很流行把这种手绘贴纸放进网页里，再让用户控制一个角色在里面走。
比如鼠标碰到某一块贴纸之后，这张贴纸会自动放大，整个页面也会有很明显的纸艺感和手绘感。
所以逛这个网站的时候，会很像在翻一本可以互动的立体故事书。
这个项目的交互也做得挺好，里面有一只小猫骑着自行车，周围很多剪贴画会自然地上下浮动。
我可以直接用电脑触控板控制小猫骑车，也可以让它向左移动，碰到背景里的纸张和贴纸，整个过程都是可以实时互动的。
之后，我截了几张图，让 M3.1 Flash Preview 先分析整个项目的交互效果和贴图素材。
它很快找到了原来的开源项目，但我专门加了一个要求，就是不能参考里面的任何源码，只能使用项目已经开源出来的贴图素材。
然后让 M3.1 Flash Preview 把整个交互重新写了一遍，所有素材也都直接内嵌进去。
现在已经可以支持滚动、拖动、换装，还有完整的场景循环，整个过程中没有使用原作者的应用源码，只用了原项目公开的美术素材。
有意思的一点是，我在玩原项目的时候，感觉它对触控板的响应有点弱，实际操作起来会稍微复杂一些。
但用 M3.1 Flash Preview 复刻之后，它把整个交互速度提快了，所以很多效果会更容易展示出来。
当然也能看到，有些地方会显得太快了一点。不过整体来看，交互还是比较完整的。
M3.1 Flash Preview 是把相机、滚动、交互和动画都重新写了一遍。
比如现在可以直接按住画面上下拖动，让整个场景往前或者往后移动。
不过熊猫本身没有重新建模，也没有单独做四肢骨骼和真实的踩踏动作。它的身体姿势还是来自原来的贴图，M3.1 Flash Preview 主要控制纸偶的位置、轻微起伏和换装。
一开始骑车的姿势还有一点问题，我又改了两三轮。现在整体已经比较完整了，和原项目看起来没有太大差别。
所以现在来看，像 MiniMax M3.1 Flash Preview 这种模型，虽然定位是 Flash，但前端效果和复刻能力都不错。
这可能会变成接下来多模态场景里的一个趋势。
以后大家看到一个做得很好的项目，可以直接让多模态模型去分析它的视觉效果和交互方式，再自己重新做一遍。这个过程本身也能帮助开发者更快理解一个项目到底是怎么实现的。
而 Flash 模型还有一个很明显的优势，就是迭代快。第一版出来之后，可以马上继续改第二版、第三版，所以学习和试错的速度都会更快。
这两年，大家明显越来越觉得前端能力非常重要。
像 Anthropic 后来专门给 Claude Code 做了 Frontend Design 能力，甚至明确要求模型尽量避开常见的「AI 风」页面，比如非常 AI 感的字体、经典的紫色渐变和固定的卡片布局。
所以现在再看一个 Coding 模型，很多人觉得前端已经是一个很值得单独拿出来测的能力。
从我们这次几个 Case 的实际体验来看，MiniMax M3.1 Flash Preview 在这一点上的表现确实不错。
尤其是给它一个比较明确的视觉参考之后，它对页面结构、风格、动画和细节的理解都已经比较到位。
从这几轮实测来看，M3.1 Flash Preview 的前端能力已经可以和 Opus 5.5 放在一起比较了。
在复杂页面、视觉还原和交互效果上，两者最终完成度非常接近。个别细节上 Opus 5.5 会更完整，但在一些光效和粒子效果上，M3.1 Flash Preview 甚至会更细。
这也意味着，Flash 模型的价值已经不只是速度快。像活动页、营销页、内部工具、小型产品原型这些需求，本身就很看重交付速度。
如果前端效果还能接近 Opus 5.5，这类模型会很有竞争力。
再往后，模型如果能更稳定地完成视觉理解、风格复刻、交互补全和持续修改，前端开发很可能会成为一个更大的模型调用场景，也会继续带动部署、托管、数据库等后续服务。
也就是说 AI 可以从偶尔做个演示，进入团队的日常制作流程，并将带来更稳定的模型订阅和 API 的调用。
如果这几天有时间，我们还是挺推荐大家自己去玩一下 M3.1 Flash Preview。
随便找一个你喜欢的网站、一张设计图，甚至一个一直想做的小项目，让它从头做一遍。
