StepFun: Step 3.5 Flash 在「SVG 粒子汇聚成型动画」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：StepFun: Step 3.5 Flash
  • 用例名称：SVG 粒子汇聚成型动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端动画开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 使用原生 SVG + JavaScript 实现动画 4. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

创建一个 SVG 粒子汇聚动画。 功能要求： 1. 页面上随机分布至少 100 个 SVG 小圆形粒子，初始位置随机散布在画布各处 2. 点击「开始动画」按钮后，所有粒子平滑移动并汇聚成一个爱心（❤）的轮廓形状 3. 点击「重置」按钮后，粒子重新随机散布回初始状态 4. 粒子移动过程有平滑过渡效果（transition 或 animation 均可）

任务要求

AI 模型需要满足以下要求：

  1. 页面初始显示至少 100 个随机分布的 SVG 粒子
  2. 点击按钮后粒子能平滑汇聚成爱心轮廓形状
  3. 粒子移动有明显的过渡动画效果
  4. 支持重置回随机散布状态
  5. 代码在单个 HTML 文件中运行

评测结果

综合得分

该模型在此用例的得分为：86.7 分（满分 100 分），已通过

基础难度评测结果

  • 得分：86.7 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html Particle Heart Convergence /* 全局样式设定 */ body { font-family: 'Inter', sans-serif; background-color: #050505; /* 深邃黑 */ color: #ffffff; overflow: hidden; /* 防止滚动 */ margin: 0; padding: 0; width: 100vw; height: 100vh; } /* 噪点纹理叠加 - 增加物理触感 */ .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* SVG 画布 */ #particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* 粒子基础样式 */ .particle { transition: cx 2s cubic-bezier(0.34, 1.56, 0.64, 1), cy 2s cubic-bezier(0.34, 1.56, 0.64, 1); /* 贝塞尔曲线带来轻微的回弹效果，增加生动感 */ will-change: cx, cy; } /* UI 层级 */ .ui-layer { position: relative; z-index: 10; pointer-events: none; /* 让鼠标事件穿透到非交互区域 */ height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; } /* 标题样式 */ .title-block { text-align: left; pointer-events: auto; } .main-title { font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; background: linear-gradient(135deg, #ffffff 0%, #a5a5a5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; text-shadow: 0 10px 30px rgba(0,0,0,0.5); } .subtitle { font-size: 1rem; font-weight: 300; color: #888; letter-spacing: 0.2em; text-transform: uppercase; } /* 控制面板 - 玻璃拟态 */ .controls-card { pointer-events: auto; background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 1.5rem 2rem; display: flex; gap: 1.5rem; align-items: center; box-shadow: 0 20px 40px rgba(0,0,0,0.4);...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现质量较高，使用原生SVG+JavaScript完成了粒子汇聚爱心的动画效果。150个粒子超出要求数量，爱心参数方程运用正确，CSS transition动画平滑，UI设计精美（玻璃拟态控制面板、发光滤镜、渐变色等）。代码结构清晰，注释完善。主要技术风险点是CSS transition对SVG cx/cy属性的跨浏览器兼容性，但现代主流浏览器（Chrome/Firefox/Safari）均支持。整体是一个功能完整、视觉效果出色的SVG粒子汇聚动画实现。 【GEMINI】模型高质量地完成了任务要求，不仅实现了基础的粒子汇聚功能，还通过引入贝塞尔曲线过渡、随机延迟、发光滤镜和玻璃拟态 UI 等细节，显著提升了动画的视觉质感。代码结构清晰，逻辑严密，完全符合单页应用的要求。 【KIMI】该实现是一个高质量的 SVG 粒子动画方案，功能完整且视觉效果出色。代码结构清晰，注释充分，数学计算严谨，动画效果流畅自然。外部 CDN 的引入虽增强了 UI 美观度，但在严格的技术评测中略扣分数。整体而言，完全满足并超越了题目要求，展现了专业的前端动画开发能力。

进阶难度评测结果

  • 得分：81.9 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html Particle Morph // Swiss Design :root { --bg-color: #050505; --text-main: #ffffff; --text-muted: #888888; --accent: #00f0ff; --glass: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --font-sans: 'Inter', sans-serif; --font-serif: 'Playfair Display', serif; } * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; } body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-sans); overflow: hidden; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; position: relative; } /* Noise Texture Overlay */ .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* Main Stage */ #stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* UI Layer */ .ui-layer { position: relative; z-index: 10; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; } header { text-align: left; pointer-events: auto; } h1 { font-family: var(--font-serif); font-size: 4rem; line-height: 1; margin-bottom: 0.5rem; background: linear-gradient(135deg, #fff 0%, #aaa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } p.subtitle { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 0.2em; text-transform: uppercase; } /* Controls - Bento Grid Style */ .controls { pointer-events: auto; align-self: center; display: flex; gap: 1.5rem; background: var(--glass); backdrop-filter: blur(12px);...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该作品整体架构完整，代码质量较高，展现了良好的前端动画开发能力。粒子系统设计合理，UI视觉质感现代，采用了玻璃拟态、霓虹色彩、辉光滤镜等多种视觉增强手段，整体观感炫酷。三种形状汇聚功能均已实现，缓动与延迟机制设计正确。主要不足在于：爆散状态管理逻辑存在bug（isExploding由单粒子控制），心形和星形的形状生成算法精度有限，文字采样缩放参数可能偏小，以及convergence完成判断存在潜在问题。若能运行，核心功能应基本可用，但部分细节效果可能与预期有偏差。 【KIMI】该实现是一个高质量的SVG粒子动画应用，完整实现了所有功能需求。代码架构清晰，采用面向对象的Particle类管理状态，ShapeGen模块封装形状生成算法，体现了良好的工程实践。视觉效果达到「炫酷」标准，深色背景配合霓虹色系粒子、发光滤镜和毛玻璃UI，具有强烈的现代设计感。动画细节丰富，缓动曲线、波浪延迟、呼吸脉动、爆散物理均实现到位。主要改进空间在于边界情况处理（resize重计算、文本采样点不足时的分布策略）和爆散状态管理的鲁棒性。

困难难度评测结果

  • 得分：1.9 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

系统报错（阶段=模型生成; 模块=app.services.inference.call_text_model; provider=openrouter; model=stepfun/step-3.5-flash）：[app.services.inference.call_text_model][provider=openrouter][model=stepfun/step-3.5-flash] 流式调用超时: 超过 120.0s 没有收到新数据

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】模型在推理阶段发生流式调用超时（超过120秒未收到新数据），未能生成任何有效输出。候选输出仅为一条系统错误信息，所有评分维度均无法得分，整体评分为0分。这属于模型服务层面的故障，与任务本身的复杂度无关。 【GEMINI】由于模型在生成过程中发生流式调用超时，未能提供任何代码实现。根据评测输入包，该次生成任务完全失败，因此所有维度均评为 0 分。 【KIMI】该候选输出为系统报错信息（流式调用超时超过120秒），未生成任何有效代码或功能实现。所有评分维度均无法评估，全部计0分。这是一个完全的生成失败案例，模型未能完成任何任务要求。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%