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 柱状图实现。

进阶难度评测结果

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

模型生成产物

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

```html 手绘风格柱状图 :root { --bg: #F5F0E8; --fg: #3D3226; --muted: #8B7D6B; --accent: #E07A5F; --card: #FDFAF3; --border: #C4B8A6; } * { 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: 30px 16px; background-image: radial-gradient(ellipse at 12% 85%, rgba(210,190,160,0.22) 0%, transparent 50%), radial-gradient(ellipse at 88% 15%, rgba(210,190,160,0.16) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(200,180,150,0.06) 0%, transparent 70%); } .container { max-width: 960px; width: 100%; } /* 标题区域 */ .title-area { text-align: center; margin-bottom: 26px; animation: fadeSlideIn 0.7s ease-out; } .title-area h1 { font-size: 2.8rem; font-weight: 700; color: var(--fg); position: relative; display: inline-block; letter-spacing: 1px; } .title-area h1::after { content: ''; position: absolute; bottom: -3px; left: -4%; width: 108%; height: 3.5px; background: var(--accent); border-radius: 2px; transform: rotate(-0.4deg); opacity: 0.75; } .title-area p { font-size: 1.25rem; color: var(--muted); margin-top: 10px; } /* 图表卡片 */ .chart-card { background: var(--card); border: 2.2px solid var(--border); border-radius: 14px; padding: 22px 18px 18px; position: relative; box-shadow: 5px 5px 0 rgba(61,50,38,0.045); animation: fadeSlideIn 0.7s ease-out 0.12s both; } /* 纸张纹理 */ .chart-card::before { content: ''; position: absolute; inset: 0; border-radius: 14px; 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.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } #chart { display: block; width: 100%; height: auto; position:...

AI 评审点评

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

【GEMINI】这是一份极高质量的实现方案。模型不仅准确理解了 SVG 高级滤镜的用法，还通过 JavaScript 动态控制滤镜参数实现了极具动感的“线条颤动”效果。代码结构清晰，工具函数封装合理，在满足所有功能要求的基础上，额外提供了极佳的视觉装饰和交互体验，充分展示了前端开发与 SVG 动画的高级运用能力。 【KIMI】代码实现了一个手绘风格的 SVG 柱状图，通过 `feTurbulence` 滤镜和动画技术，很好地模拟了手绘边缘和抖动效果。图表数据展示完整，配色和风格统一，整体美观度较高。动画和交互功能也实现得很好，用户体验佳。只是在柱子间距和图表密度上还有优化空间。总体来说，这是一个高质量的手绘风格柱状图实现。

困难难度评测结果

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

模型生成产物

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

```html 手绘风格 SVG 动态图表 :root { --bg: #f4eed9; --fg: #3a2e25; --muted: #8a7e72; --accent: #d4654a; --card: #faf5e8; --border: #cfc8b4; --shadow: rgba(58,46,37,0.12); } *{margin:0;padding:0;box-sizing:border-box} body{ background:var(--bg); background-image: radial-gradient(ellipse at 15% 20%,rgba(212,101,74,0.06) 0%,transparent 55%), radial-gradient(ellipse at 85% 75%,rgba(129,178,154,0.06) 0%,transparent 55%); color:var(--fg); font-family:'Caveat',cursive; min-height:100vh; display:flex;justify-content:center;align-items:flex-start; padding:28px 16px 40px; } .container{max-width:980px;width:100%} .chart-header{text-align:center;margin-bottom:18px;position:relative} .sketch-title{ font-size:46px;font-weight:700;color:var(--fg); display:inline-block;position:relative; filter:url(#sketch-heavy); } .chart-subtitle{font-size:20px;color:var(--muted);margin-top:2px} .chart-wrapper{ position:relative; background:var(--card); border:2.5px solid var(--border); border-radius:14px; padding:12px 14px 8px; box-shadow:5px 5px 0 var(--shadow); } .chart-wrapper svg{width:100%;height:auto;display:block} .tooltip{ position:absolute;pointer-events:none; background:var(--card);border:2.5px solid var(--fg); border-radius:10px;padding:10px 18px; font-family:'Caveat',cursive; opacity:0;transition:opacity .18s; filter:url(#sketch-tooltip); box-shadow:3px 3px 0 var(--shadow); z-index:10;white-space:nowrap; } .tooltip.visible{opacity:1} .tooltip-label{color:var(--muted);font-size:15px} .tooltip-value{font-size:26px;font-weight:700;color:var(--fg)} .tooltip-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle} .controls{ margin-top:22px;display:flex;flex-wrap:wrap;gap:14px 20px; align-items:center;justify-content:center; } .control-group{display:flex;align-items:center;gap:8px} .control-label{font-size:19px;color:var(--muted);white-space:nowrap} .btn-group{display:flex;gap:0} .btn{ font-family:'Caveat',cursive;font-size:17px; padding:7px...

AI 评审点评

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

【GEMINI】这是一个极高水平的生成结果。模型不仅精准理解了复杂的 SVG 滤镜技术要求，还通过高质量的数学插值和状态驱动的动画系统，完美实现了手绘风格与动态数据可视化的结合。无论是滤镜的参数调校，还是多阶段动画的编排，都展现了深厚的技术底蕴，完全满足并超越了用户的所有核心需求。 【KIMI】代码整体上较好地实现了题目要求的主要功能，包括手绘滤镜系统、动画编排、交互功能以及整体视觉效果。在SVG滤镜应用、动画实现、交互设计等方面展现了较强的技术能力。但仍有一些细节可以优化，如提升代码可读性、进一步丰富手绘装饰元素等。总体来说，代码质量较高，基本满足了题目要求，是一个较为优秀的实现。

相关链接

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

加载中...
100%