Anthropic: Claude Sonnet 4.6 在「SVG 动态手绘风格柱状图」的评测结果

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

基本信息

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

我来创建一个手绘风格的 SVG 柱状图，具有不规则边缘效果和生长动画。 ```html 手绘风格柱状图 /* ===== 全局样式 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fdf6e3; font-family: 'Segoe UI', 'PingFang SC', sans-serif; padding: 20px; } /* ===== 标题样式 ===== */ .chart-title { font-size: 22px; font-weight: 700; color: #3d2b1f; margin-bottom: 8px; letter-spacing: 2px; /* 模拟手写倾斜感 */ transform: rotate(-0.5deg); text-shadow: 2px 2px 0px rgba(0,0,0,0.06); } .chart-subtitle { font-size: 13px; color: #8b6f5e; margin-bottom: 24px; letter-spacing: 1px; transform: rotate(0.3deg); } /* ===== SVG 容器 ===== */ .chart-wrapper { background: #fffdf5; border-radius: 4px; padding: 10px; /* 手绘纸张阴影 */ box-shadow: 3px 3px 0 #e8d9c0, 6px 6px 0 #ddd0b8, 2px 2px 8px rgba(0,0,0,0.08); transform: rotate(-0.4deg); position: relative; } /* 纸张纹理叠加 */ .chart-wrapper::before { content: ''; position: absolute; inset: 0; border-radius: 4px; background-image: repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(180,160,130,0.07) 28px, rgba(180,160,130,0.07) 29px ); pointer-events: none; z-index: 1; } #chart { display: block; position: relative; z-index: 2; } /* ===== 图例样式 ===== */ .legend { display: flex; gap: 20px; margin-top: 16px; transform: rotate(0.2deg); } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b5040; } .legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.2); } 📊 2024 年各月销售额 单位：万元 · 手绘草图风格 月度销售额（万元） 目标线 // ===== 图表数据 ===== const data = [ { label: '1月', value: 42, color: '#e07b54' }, { label: '2月', value: 35, color: '#d4a843' }, { label: '3月', value: 68, color: '#5aab6e' }, { label: '4月', value: 55, color: '#5b8dd9' }, { label: '5月', value: 80, color: '#9b6bbf' }, { label: '6月', value: 73, color: '#e07b54' }, { label: '7月', value: 91, color: '#d4a843' }, ]; // ===== 图表布局参数 ===== const SVG_W = 620;...

AI 评审点评

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

【CLAUDE】该生成结果质量极高，全面满足了功能要求并在多个维度有所超越。手绘效果通过 feTurbulence 滤镜、路径抖动、纹理填充等多层技术叠加实现，视觉效果自然丰富；动画采用 clipPath + rAF + easeOutBack 的专业方案，流畅且有细节；图表要素完整，代码结构清晰规范。整体是一个高完成度的 SVG 手绘风格柱状图实现，可直接用于生产环境展示。 【GEMINI】这是一份极高水平的 SVG 动画实现。模型展示了深厚的 SVG 滤镜功底和前端动画技巧，通过「算法生成路径」与「滤镜后期处理」双重手段完美复刻了手绘草图的质感。代码结构清晰，注释详尽，不仅满足了所有功能要求，还在视觉细节和交互体验上做了大量加分项工作。 【KIMI】这是一个高质量的手绘风格 SVG 柱状图实现，充分展现了模型对 SVG 高级特性（feTurbulence 滤镜、clipPath、pattern、动态路径生成）的综合运用能力。代码结构清晰，注释完善，视觉效果出色，动画流畅，完整满足了所有功能要求。技术方案选择专业，在纯 SVG 实现中兼顾了性能与效果，体现了良好的前端工程素养。

进阶难度评测结果

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

模型生成产物

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

我来创建一个完整的交互式手绘风格SVG柱状图应用。 ```html 手绘风格柱状图 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #fdf8f0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Caveat', cursive, sans-serif; background-image: radial-gradient(circle at 20% 20%, rgba(255,220,150,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(180,220,255,0.15) 0%, transparent 50%); } .page-wrapper { width: 100%; max-width: 960px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .title-area { text-align: center; } .main-title { font-size: 2.4rem; font-weight: 700; color: #3a2e1e; letter-spacing: 2px; position: relative; display: inline-block; } .main-title::after { content: ''; position: absolute; bottom: -4px; left: 5%; width: 90%; height: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6'%3E%3Cpath d='M0,3 Q25,1 50,3 Q75,5 100,3 Q125,1 150,3 Q175,5 200,3' stroke='%23c0845a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center; background-size: auto 100%; } .sub-title { font-size: 1.1rem; color: #8a7a6a; margin-top: 10px; letter-spacing: 1px; } .chart-container { background: #fffdf7; border-radius: 12px; padding: 20px; box-shadow: 4px 4px 0px #d4c9b0, 8px 8px 0px rgba(180,160,120,0.2), 0 0 0 2px #e8dfc8; position: relative; width: 100%; } /* Paper texture overlay */ .chart-container::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300'...

AI 评审点评

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

【CLAUDE】该生成结果是一个技术实现较为完整的手绘风格SVG柱状图应用。在核心技术点上，feTurbulence 滤镜的多场景应用（动画期间、静态、悬停三态切换）体现了对 SVG 滤镜系统的深入理解，动画系统设计合理，交互功能齐全。手绘风格的整体一致性较好，Caveat 字体、暖色调配色、波浪线装饰等细节处理到位。主要改进空间在于：动画状态管理的健壮性可进一步加强，坐标轴手绘效果可适当增强，整体配色可在丰富度与统一性之间取得更好平衡。综合来看，这是一个高质量的实现，能够满足题目的核心功能要求。 【GEMINI】这是一份卓越的生成结果。模型不仅精准满足了所有功能要求，还在 SVG 高级特性的综合运用上展现了极高的专业性。通过多组针对性滤镜的组合，成功营造了极具艺术感的手绘动态图表，代码结构清晰，交互细节丰富，完全符合「前端开发工程师」的专家角色设定。 【KIMI】该实现是一份高质量的SVG手绘风格柱状图作品，充分展示了feTurbulence与feDisplacementMap滤镜的高级应用能力。动画系统尤为亮眼，通过SVG原生animate元素实现动态抖动效果，技术实现精准对应题目要求。整体视觉风格统一，交互体验流畅，代码结构清晰模块化。建议在响应式布局和纯SVG位移方案上进一步优化，但当前实现已远超及格水平，属于优秀范例。

困难难度评测结果

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

模型生成产物

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

我来创建一个功能完善的手绘风格SVG动态柱状图应用。 ```html 手绘风格动态图表 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Patrick+Hand&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #f5f0e8; font-family: 'Caveat', cursive; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; background-image: linear-gradient(rgba(180,160,120,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(180,160,120,0.15) 1px, transparent 1px); background-size: 30px 30px; } .app-container { width: 100%; max-width: 960px; background: #fffef7; border-radius: 4px; box-shadow: 4px 4px 0 #c8b89a, 8px 8px 0 #b8a88a, 2px 2px 20px rgba(0,0,0,0.1); padding: 28px; position: relative; border: 2px solid #8b7355; } .app-container::before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 1px dashed #c8b89a; border-radius: 6px; pointer-events: none; } .header { text-align: center; margin-bottom: 20px; position: relative; } .main-title { font-size: 32px; font-weight: 700; color: #3d2b1f; letter-spacing: 2px; text-shadow: 2px 2px 0 rgba(139,115,85,0.3); position: relative; display: inline-block; } .main-title::after { content: ''; position: absolute; bottom: -4px; left: 5%; width: 90%; height: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6'%3E%3Cpath d='M0,3 Q25,1 50,3 Q75,5 100,3 Q125,1 150,3 Q175,5 200,3' stroke='%238b7355' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x center; background-size: auto 100%; } .subtitle { font-size: 14px; color: #8b7355; margin-top: 8px; font-style: italic; } /* 控制区域 */ .controls-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; align-items: center; justify-content: center; } .btn-group { display: flex; gap: 6px; align-items: center; } .btn-label { font-size: 13px; color: #5a4030; font-weight: 600; white-space: nowrap; } .sketch-btn { font-family: 'Caveat',...

AI 评审点评

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

【CLAUDE】该实现对手绘风格 SVG 动态柱状图的核心需求覆盖度较高，feTurbulence 滤镜系统设计完整且差异化，三阶段动画逻辑清晰，交互功能基本完整。代码结构良好，视觉风格统一且具有艺术感。主要不足在于：图表类型切换缺乏真正的形变过渡动画（仅淡入淡出）；部分细节存在调试残留代码；折线图与柱状图的 Tooltip 坐标系处理不够统一；数值标签始终隐藏等小问题。整体而言是一个完成度较高、技术实现扎实的手绘风格图表应用。 【GEMINI】这是一个极高质量的生成结果。模型不仅精准理解了所有复杂的技术要求，还在视觉表现力上超出了预期。通过多组针对性滤镜和精细的 JS 动画控制，成功将枯燥的数据可视化转化为具有艺术感的手绘作品，充分展示了对 SVG 高级特性的综合掌控能力。

相关链接

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

加载中...
100%