GLM-5.1 在「SVG 动态手绘风格柱状图」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：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. 整体视觉具有草图/手绘风格

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 手绘风格柱状图 :root { --bg: #DDD5C5; --fg: #2D2926; --muted: #8B7E74; --accent: #C75C2E; --card: #FAF6EE; --border: #C4B9A8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Caveat', cursive; background-color: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; /* 桌面纹理背景 */ background-image: radial-gradient(ellipse at 20% 30%, rgba(160, 140, 110, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(160, 140, 110, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(180, 160, 130, 0.1) 0%, transparent 70%); } /* 噪点纹理覆盖层 */ body::before { content: ''; position: fixed; inset: 0; opacity: 0.35; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 200px 200px; } .page-wrapper { position: relative; z-index: 1; max-width: 920px; width: 100%; } /* 纸张容器 */ .chart-paper { background: var(--card); border: 2px solid var(--border); border-radius: 3px; padding: 2.5rem 2.2rem 2rem; position: relative; box-shadow: 3px 3px 0 rgba(0,0,0,0.04), 7px 7px 18px rgba(0,0,0,0.1), inset 0 0 80px rgba(200, 180, 150, 0.06); } /* 纸张右上角折角 */ .chart-paper::after { content: ''; position: absolute; top: -1px; right: -1px; width: 42px; height: 42px; background: linear-gradient(225deg, var(--bg) 48%, var(--border) 50%, var(--card) 52%); border-radius: 0 3px 0 0; } /* 左上角回形针装饰 */ .paper-clip { position: absolute; top: -12px; left: 32px; width: 28px; height: 52px; border: 3px solid #A0887A; border-radius: 14px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; opacity: 0.5; } .paper-clip::after { content: '';...

AI 评审点评

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

【CLAUDE】这是一个高质量的手绘风格SVG柱状图实现。代码结构清晰，注释完善，充分利用了feTurbulence滤镜、贝塞尔曲线、随机偏移等技术手段营造手绘草图感。动画实现流畅，图表要素完整，还包含了工具提示、重播按钮、无障碍支持等额外功能。整体超出了任务要求，是一个完成度很高的作品。 【GEMINI】这是一个非常优秀且专业的实现。模型不仅满足了所有功能要求，还在视觉表现力上做了大量加分工作，如通过算法模拟手绘线条的随机性、添加纸张纹理滤镜以及完善的交互体验。代码质量高，对 SVG 高级特性的运用十分熟练。 【KIMI】整体而言，该实现在手绘视觉效果和图表完整性方面表现优秀，动画实现也符合基本要求。代码结构清晰，注释适当，是一个高质量的 SVG 柱状图实现。

进阶难度评测结果

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

模型生成产物

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

```html 手绘风格柱状图 — 月度销售数据 :root { --bg: #faf6ee; --fg: #3d3229; --muted: #9c8e7c; --accent: #e07a5f; --card: #f5efe3; --border: #c4b9a8; } body { font-family: 'ZCOOL KuaiLe', 'Caveat', cursive; background-color: var(--bg); color: var(--fg); min-height: 100vh; background-image: radial-gradient(ellipse at 12% 25%, rgba(224,122,95,0.06) 0%, transparent 50%), radial-gradient(ellipse at 88% 75%, rgba(129,178,154,0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(210,190,160,0.08) 0%, transparent 60%); } /* 纸张噪点纹理 */ body::after { content: ''; position: fixed; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } svg text { font-family: 'ZCOOL KuaiLe', 'Caveat', cursive; } /* 提示框 */ #tooltip { position: fixed; pointer-events: none; background: var(--card); border: 2.5px solid var(--fg); border-radius: 8px; padding: 10px 18px; font-family: 'ZCOOL KuaiLe', 'Caveat', cursive; box-shadow: 4px 4px 0 rgba(61,50,41,0.12); z-index: 100; transition: opacity 0.18s ease; backdrop-filter: blur(2px); } #tooltip.hidden { opacity: 0; pointer-events: none; } /* 手绘按钮 */ .sketch-btn { font-family: 'ZCOOL KuaiLe', 'Caveat', cursive; font-size: 18px; background: var(--card); border: 2.5px solid var(--fg); border-radius: 10px; padding: 10px 30px; color: var(--fg); cursor: pointer; box-shadow: 4px 4px 0 rgba(61,50,41,0.18); transition: all 0.18s ease; user-select: none; outline: none; } .sketch-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(61,50,41,0.22); background: var(--accent); color: #fff; border-color: var(--accent); } .sketch-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(61,50,41,0.18); }...

AI 评审点评

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

【CLAUDE】这是一个高质量的手绘风格 SVG 柱状图实现。技术上充分运用了 feTurbulence 滤镜的多档位配置，结合随机路径生成和持续抖动动画，完美呈现草图美感。交互设计细腻，悬停状态的滤镜切换、抖动增强、tooltip 显示等细节处理到位。动画节奏把控优秀，easeOutBack 缓动配合交错延迟产生流畅的视觉体验。整体风格统一，从配色、字体到装饰元素都贯彻手绘主题。代码结构清晰，注释详尽，可维护性强。唯一可优化空间在于手绘强度可以更大胆，以及数值标签的可读性提升。 【GEMINI】这是一份高质量的实现方案。模型不仅完全满足了所有功能要求，还在技术实现上展现了深度：通过 JS 动态计算路径偏移与 SVG 滤镜相结合，完美模拟了手绘的随机性。交互反馈灵敏，视觉风格高度统一，代码结构清晰且考虑了响应式布局，是一个非常优秀的单页应用示例。 【KIMI】该实现是 SVG 高级特性综合运用的优秀范例，feTurbulence 与 feDisplacementMap 的分层应用、手绘路径生成函数、RAF 动画主循环的设计均体现了较高的技术水准。视觉效果精致美观，交互反馈丰富，重播功能带有随机性增强了趣味性。主要提升空间在于：将 rect 柱子替换为真正的手绘路径以强化笔触质感，以及让抖动效果更深入地驱动滤镜参数而非仅做位移变换，从而更贴近'草图感'的核心诉求。

困难难度评测结果

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

模型生成产物

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

```html 手绘风格动态图表 :root { --bg: #FAF3E8; --fg: #4A3728; --muted: #8B7D6B; --accent: #E85D4A; --card: #FFFBF0; --border: #D4C5A9; } * { margin:0; padding:0; box-sizing:border-box; } body { background: var(--bg); color: var(--fg); font-family: 'Nunito', sans-serif; min-height: 100vh; } body::before { content:''; position:fixed; inset:0; background: radial-gradient(circle at 15% 25%, rgba(232,93,74,0.04) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(78,205,196,0.04) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(240,160,48,0.03) 0%, transparent 60%); pointer-events:none; z-index:0; } .font-sketch { font-family: 'Caveat', cursive; } .chart-wrap { position:relative; background: var(--card); border: 2px solid var(--border); border-radius: 16px; box-shadow: 4px 6px 0 rgba(74,55,40,0.08); overflow: hidden; } .ctrl-panel { background: var(--card); border: 2px solid var(--border); border-radius: 12px; box-shadow: 3px 4px 0 rgba(74,55,40,0.08); } input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; background: var(--border); border-radius:3px; outline:none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; background: var(--accent); border-radius:50%; cursor:pointer; border:2px solid var(--card); box-shadow: 1px 2px 0 rgba(74,55,40,0.2); } .btn-sk { font-family:'Caveat',cursive; font-size:1.05rem; font-weight:600; padding:5px 14px; border:2px solid var(--border); border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer; transition:all .2s; box-shadow:2px 3px 0 rgba(74,55,40,0.08); user-select:none; } .btn-sk:hover { transform:translate(-1px,-1px); box-shadow:3px 4px 0 rgba(74,55,40,0.12); background:#FFF8E8; } .btn-sk:active { transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(74,55,40,0.08); } .btn-sk.active { background:var(--accent); color:#fff; border-color:var(--accent); } .sketch-tooltip { position:absolute;...

AI 评审点评

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

【CLAUDE】这是一个高质量的手绘风格 SVG 动态图表应用，技术实现深度和完成度都非常出色。滤镜系统设计专业，为不同元素配置了差异化的手绘强度，并通过动态修改 baseFrequency 实现持续呼吸效果，展现了对 SVG 高级特性的深刻理解。多阶段动画编排流畅，柱子上升、弹跳、呼吸三阶段过渡自然，数据切换和图表类型切换的形变动画实现优雅。交互功能完整且细致，悬停交互、控制面板、触摸支持等细节处理到位。整体视觉风格统一，手绘艺术感强烈，代码结构清晰模块化，性能优化得当。主要扣分点在于：tooltip 边框未应用手绘滤镜、rising 阶段抖动效果不够明显、引入外部 CDN 依赖影响了代码的完全内联性。总体而言，这是一个接近生产级别的优秀作品，充分展示了 SVG 滤镜与动画编排的综合运用能力。 【GEMINI】这是一份极高水平的交付结果。模型不仅在技术上完全满足了 SVG 滤镜、复杂动画状态机和交互控制的要求，还在艺术细节（如标题的微小旋转、图例色块的随机旋转、折线的二次贝塞尔模拟）上展现了极高的追求。代码逻辑清晰，数学计算准确（如 lerp 和缓动函数的使用），是一个功能完备且视觉统一的单页应用。 【KIMI】该实现是一个功能较为完整的手绘风格SVG动态图表应用，核心滤镜系统和多阶段动画均正确实现，交互功能覆盖全面。主要不足在于：滤镜动态调整的深度有限（仅barDisp可动态修改）、折线手绘随机性不足、tooltip未应用手绘滤镜、以及代码中HTML实体编码问题。整体达到良好水平，但在SVG高级特性的精细化控制和代码健壮性方面仍有提升空间。

相关链接

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

加载中...
100%