StepFun: Step 3.5 Flash 在「SVG 动态手绘风格柱状图」的评测结果

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

基本信息

  • 模型名称：StepFun: Step 3.5 Flash
  • 用例名称：SVG 动态手绘风格柱状图
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个手绘风格的 SVG 柱状图。 功能要求： 1. 使用 SVG 绘制一组柱状图（至少 5 根柱子），展示一组静态数据 2. 为柱子应用 feTurbulence 滤镜，使柱子边缘呈现手绘不规则感 3. 页面加载时，柱子从底部向上生长，带有简单的上升动画 4. 包含 X 轴标签和 Y 轴刻度 5. 整体视觉风格接近手绘草图感

任务要求

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

  1. SVG 柱状图正确渲染，包含至少 5 根柱子
  2. feTurbulence 滤镜生效，柱子边缘呈现手绘不规则感
  3. 页面加载时柱子有从底部向上生长的动画
  4. 包含 X 轴标签和 Y 轴刻度
  5. 整体视觉具有草图/手绘风格

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个符合 Neo-Brutalism（新野兽派）与 Y2K（千禧复古）美学风格的单页 HTML 应用。 ### 设计思路 1. **视觉风格**： * **硬边框与阴影**：所有卡片、图表容器使用 4px 纯黑实线边框，并配合无模糊的硬阴影（`box-shadow: 8px 8px 0 #000`），营造强烈的物理质感。 * **色彩冲突**：使用高饱和度的酸性色（荧光绿、亮粉、青色、亮黄）作为柱状图颜色，与黑白背景形成剧烈反差。 * **原始排版**：标题使用巨大的 `Impact` 字体配合 `Courier New` 等宽字体，模拟早期电脑或海报的粗糙感。 2. **手绘 SVG 图表**： * 使用 SVG `` 定义 `feTurbulence`（湍流滤镜）和 `feDisplacementMap`（置换映射），将规则的矩形边缘扭曲，模拟手绘草图的不规则抖动。 * 坐标轴和柱子均应用此滤镜，保持风格统一。 * 数据标签保持清晰，确保可读性。 3. **动画与交互**： * **生长动画**：页面加载后，柱子通过 CSS `height` 属性从 0 平滑增长到目标高度。 * **故障效果**：标题文字带有随机位移和颜色分离的 Glitch 动画。 * **跑马灯**：底部无限滚动的文字带，增强 Y2K 氛围。 * **悬停反馈**：鼠标悬停在柱子上时，柱子会剧烈抖动（模拟不稳定的草图），并显示原始数值。 4. **技术实现**： * 纯原生 HTML/CSS/JavaScript，无任何外部依赖。 * SVG 动态生成，便于扩展数据。 * 代码结构清晰，包含详细中文注释。 --- ### 完整代码 ```html Neo-Brutalist Hand-Drawn Chart /* ========================================= 全局样式与变量 ========================================= */ :root { --bg-color: #ffffff; --ink-color: #000000; --accent-1: #ff3333; /* 红色 */ --accent-2: #33ff33; /* 荧光绿 */ --accent-3: #3333ff; /* 亮蓝 */ --accent-4: #ffff33; /* 亮黄 */ --accent-5: #ff33ff; /* 洋红 */ --border-width: 4px; --shadow-offset: 8px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); color: var(--ink-color); font-family: 'Courier New', Courier, monospace; /* 原始等宽字体 */ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } /* ========================================= 布局容器 - 硬边框风格 ========================================= */ .container { width: 100%; max-width: 800px; border: var(--border-width) solid var(--ink-color); background: #fff; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink-color); padding: 2rem; position: relative; z-index: 1; } /* ========================================= 标题区域 - 故障艺术效果 ========================================= */ header { text-align: center; margin-bottom: 2rem; position: relative; } h1 { font-family: 'Impact', 'Arial Black', sans-serif;...

AI 评审点评

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

【CLAUDE】该实现整体框架完整，代码结构清晰，注释详细，正确使用了 feTurbulence + feDisplacementMap 滤镜组合来模拟手绘效果，风格设计（Neo-Brutalism）有创意。但核心动画存在根本性技术错误——通过 style.height 操作 SVG rect 元素在主流浏览器中无效，且未处理 y 坐标变化导致动画方向错误。手绘视觉效果的置换强度偏弱，整体草图感不够突出。图表要素基本完整但有小瑕疵。综合来看是一份有思路但存在关键实现缺陷的作品。 【GEMINI】模型高质量地完成了任务，不仅实现了 SVG 高级滤镜的综合运用，还通过 CSS 动画和交互逻辑提升了图表的动态表现力。代码结构规范，注释详尽，视觉风格统一且具有创意。 【KIMI】该实现整体质量较高，成功运用了 SVG feTurbulence 高级滤镜实现手绘视觉效果，视觉风格鲜明独特。动画实现思路正确但存在技术细节偏差（柱子生长方向与要求不符）。图表功能完整，交互体验良好，代码规范且有详细注释，体现了较强的前端开发能力。

进阶难度评测结果

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

模型生成产物

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

你好！这是一个非常有趣的需求。将“手绘草图”的粗糙感与“新野兽派”的硬朗色彩结合，能产生非常独特的视觉张力。 下面是一个完整的、单文件的 HTML 应用。它完全使用原生 JavaScript 和 SVG 构建，没有依赖任何第三方库。 ### 设计亮点 1. **手绘滤镜**：核心在于 `` 和 `` 的组合。我创建了一个动态的“抖动”滤镜，不仅让柱子和坐标轴的边缘呈现不规则的手绘感，还在动画过程中实时改变 `baseFrequency`，模拟墨水未干时的轻微颤动。 2. **动态动画**：柱子升起时，不仅高度变化，边缘的抖动幅度也会随着高度增加而略微加剧，营造出一种“生长”的生动感。 3. **交互反馈**：鼠标悬停时，柱子不仅变色，抖动频率会显著加快（模拟激动或故障效果），同时显示带有粗边框的复古 Tooltip。 4. **视觉风格**：采用了高饱和度的酸性配色（酸性绿、亮粉、电光蓝），配合 `Courier New` 和 `Gloria Hallelujah` 字体，背景带有微妙的点阵网格，强化草图氛围。 你可以直接保存以下代码为 `.html` 文件并在浏览器中打开。 ```html 手绘风格交互式柱状图 :root { --bg-color: #f0f0f0; --ink-color: #1a1a1a; --border-width: 3px; --shadow-offset: 4px; --accent-1: #FF0055; /* 霓虹粉 */ --accent-2: #00FF99; /* 酸性绿 */ --accent-3: #00CCFF; /* 电光蓝 */ --accent-4: #FFCC00; /* 芥末黄 */ --accent-5: #9900FF; /* 紫罗兰 */ --accent-6: #FF5500; /* 活力橙 */ } body { margin: 0; padding: 0; background-color: var(--bg-color); /* 点阵网格背景，模拟工程绘图纸 */ background-image: radial-gradient(var(--ink-color) 1px, transparent 1px); background-size: 20px 20px; font-family: 'VT323', monospace; color: var(--ink-color); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; /* 防止抖动导致滚动条闪烁 */ } /* 主容器：新野兽派风格，硬边框，硬阴影 */ .chart-container { position: relative; background: #fff; border: var(--border-width) solid var(--ink-color); box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--ink-color); padding: 20px; margin-bottom: 20px; max-width: 90vw; } h1 { font-family: 'Gloria Hallelujah', cursive; font-size: 2.5rem; margin: 0 0 20px 0; text-align: center; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-1); text-shadow: 2px 2px 0px var(--ink-color); } /* SVG 样式 */ svg { display: block; width: 100%; height: auto; /* 确保 SVG 内部元素不继承 pointer-events 导致的穿透问题 */ pointer-events: all; } /* 坐标轴和网格线样式 */ .axis-line, .grid-line { fill: none; stroke: var(--ink-color); stroke-width: 2; stroke-linecap: round; /* 应用手绘滤镜 */ filter: url(#hand-drawn-filter); } .grid-line {...

AI 评审点评

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

【CLAUDE】候选输出完整实现了任务的主要功能需求：feTurbulence 滤镜手绘效果、柱子上升动画、悬停 tooltip 与增强抖动、重播按钮、手绘风格坐标轴。代码结构清晰，有详细注释，视觉设计有个人风格。主要不足在于：空闲抖动循环存在 cancelAnimationFrame 参数错误的 bug，悬停与动画状态切换逻辑有潜在缺陷，整体风格偏「新野兽派/赛博朋克」而非传统「铅笔草图」，与任务描述「草图美感」略有偏差。综合来看是一个功能较完整、视觉有特色但细节实现尚有瑕疵的中等偏上水平的实现。 【GEMINI】该模型完美完成了所有功能需求，不仅在 SVG 高级特性（feTurbulence）的运用上展现了极高的专业度，还在交互细节、视觉美感和代码质量上表现出色。代码逻辑严谨，动画效果生动，是一个高质量的单页应用案例。 【KIMI】这是一个技术实现精湛、视觉风格强烈的优秀案例。模型充分理解并超越了用户需求，将「手绘草图」与「新野兽派」美学巧妙融合，feTurbulence 滤镜的动态应用尤为出彩。代码结构清晰，注释完善，交互细节考究。建议在复杂状态切换时的动画平滑度上进一步优化，但当前实现已远超及格水准，展现了 SVG 高级特性的综合运用能力。

困难难度评测结果

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

模型生成产物

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

你好！这是一个非常有趣且富有挑战性的需求。将手绘艺术的“不完美”美感与数据可视化的“精确”需求结合，需要精细控制 SVG 滤镜和动画时序。 下面是一个完整的、单文件的 HTML 应用。它实现了一个高级的“手绘风格动态柱状图/折线图”系统。 ### 核心亮点： 1. **SVG 滤镜系统**：定义了 `filter-axis`（坐标轴）、`filter-grid`（网格）、`filter-bar`（柱子）、`filter-line`（折线）和 `filter-tooltip`（提示框），每者都有不同的 `baseFrequency` 和 `scale`，模拟不同的笔触压力。 2. **多阶段动画引擎**： * **上升阶段**：使用 `easeOutElastic` 模拟快速上升时的物理回弹。 * **呼吸阶段**：在 `requestAnimationFrame` 循环中，动态修改 `feTurbulence` 的 `baseFrequency`，让所有元素产生持续的、有机的微抖动。 3. **平滑过渡**：数据切换时，通过线性插值实现高度和位置的平滑变形，而非生硬跳转。 4. **交互反馈**：悬停时，元素不仅高亮，还会应用一个额外的 CSS `transform` 动画来模拟“手抖加剧”，同时其他元素透明度降低。 5. **手绘装饰**：标题、图例均使用手写字体，背景有噪点纹理。 您可以直接保存为 `.html` 文件并在浏览器中打开。 ```html 手绘风格动态图表 - Hand-drawn Dynamic Chart :root { --bg-color: #f4f1ea; /* 米色纸张 */ --ink-color: #2c3e50; --accent-color: #e74c3c; --secondary-color: #3498db; --grid-color: #bdc3c7; --text-color: #34495e; --panel-bg: rgba(255, 255, 255, 0.8); } body { margin: 0; padding: 0; font-family: 'Patrick Hand', cursive; background-color: var(--bg-color); 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)' opacity='0.05'/%3E%3C/svg%3E"); color: var(--text-color); display: flex; flex-direction: column; align-items: center; min-height: 100vh; } .container { width: 90%; max-width: 1000px; margin: 20px auto; background: #fff; border: 2px solid var(--ink-color); border-radius: 8px; box-shadow: 5px 5px 0px rgba(0,0,0,0.1); padding: 20px; position: relative; } /* 标题样式 */ h1 { text-align: center; font-size: 2.5rem; margin: 10px 0 30px 0; color: var(--ink-color); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); /* 标题轻微抖动动画 */ animation: titleShake 5s infinite linear; } @keyframes titleShake { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1px, 1px) rotate(0.5deg); } 50% { transform:...

AI 评审点评

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

【CLAUDE】该代码在架构设计和技术路线选择上较为专业，正确使用了 feTurbulence + feDisplacementMap 组合滤镜并做了差异化配置，具备 rAF 动画主循环和数据插值系统，支持多数据集切换和图表类型切换，控制面板功能基本完整。但实现深度存在明显落差：核心的「三阶段动画」（上升→弹跳→呼吸）中弹跳阶段缺失；图表类型切换无形变过渡；HTML 元素使用 CSS filter 引用 SVG 滤镜的兼容性问题影响 tooltip 手绘效果；存在 HTML 语法错误；数据集颜色与渐变定义脱节。整体属于「功能框架完整、细节实现不足」的中等水平实现，如果在浏览器中运行，基本功能可用但与需求的高标准要求相比存在差距。 【GEMINI】该模型交付了一个高质量的单页 HTML 应用，不仅在 SVG 高级滤镜的运用上展现了深厚的技术功底，还通过精心的动画编排和交互设计，完美实现了用户需求。代码逻辑严谨，视觉效果极具创意，是 SVG 可视化应用开发的优秀范例。 【KIMI】该实现是一个技术扎实、功能完整的手绘风格图表应用。SVG 滤镜系统的差异化配置和动态参数修改体现了对 feTurbulence 技术的深入理解，交互功能覆盖全面。主要不足在于三阶段动画的阶段性区分不够明确，以及部分细节（如 tooltip 实现方式、HTML 标签闭合）的完善空间。整体达到较高完成度，视觉效果独特，代码结构可维护性强。

相关链接

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

加载中...
100%