doubao-seed-2-1-pro 在「阶梯式业务增长趋势页」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-1-pro
  • 用例名称：阶梯式业务增长趋势页
  • 测试类型：网页生成
  • 评测维度：单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

设计一个阶梯状上升的条形图页面，展示过去五年的用户增长数据。 功能要求： - 使用条形图展示 2020～2024 年的用户数量（数据自拟，呈逐年递增趋势） - 条形图整体呈阶梯状上升排列，视觉上体现增长趋势 - 在最高点（2024年）的柱子顶部添加一个向上的箭头图标和「New High」标签 - 每根柱子上方显示对应的数值

任务要求

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

  1. 展示 2020～2024 年共五年的条形图，数据逐年递增
  2. 条形图整体呈阶梯状上升的视觉效果
  3. 最高点柱子顶部有向上箭头和「New High」标签
  4. 每根柱子上方显示数值
  5. 页面布局清晰，代码在单个 HTML 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 用户增长趋势 - 五年数据展示 /* 自定义动画和样式 */ @keyframes growUp { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); } 50% { box-shadow: 0 0 20px 8px rgba(251, 191, 36, 0.3); } } .bar { animation: growUp 1s ease-out forwards; transform-origin: bottom; } .bar:nth-child(1) { animation-delay: 0.1s; } .bar:nth-child(2) { animation-delay: 0.25s; } .bar:nth-child(3) { animation-delay: 0.4s; } .bar:nth-child(4) { animation-delay: 0.55s; } .bar:nth-child(5) { animation-delay: 0.7s; } .value-label { animation: fadeIn 0.6s ease-out forwards; opacity: 0; } .bar:nth-child(1) .value-label { animation-delay: 1.1s; } .bar:nth-child(2) .value-label { animation-delay: 1.25s; } .bar:nth-child(3) .value-label { animation-delay: 1.4s; } .bar:nth-child(4) .value-label { animation-delay: 1.55s; } .bar:nth-child(5) .value-label { animation-delay: 1.7s; } .new-high-badge { animation: fadeIn 0.6s ease-out 1.8s forwards, bounce 2s ease-in-out 2.4s infinite; opacity: 0; } .highlight-bar { animation: growUp 1s ease-out 0.7s forwards, pulse 2s ease-in-out 1.7s infinite; } /* 阶梯状背景网格 */ .staircase-line { stroke-dasharray: 8, 4; animation: dashMove 20s linear infinite; } @keyframes dashMove { to { stroke-dashoffset: -100; } } 用户增长趋势 2020 - 2024 年度用户数据统计 持续增长中 800万 600万 400万 200万 0 起始用户 (2020) 120万 当前用户 (2024) 750万 五年增长率 +525% 年均增长 157.5万 数据来源：平台统计部门 | 更新时间：2024年12月 // 数据配置 const chartData = [ { year: '2020', value: 120, color: 'from-blue-600 to-blue-400' }, { year: '2021', value: 240, color: 'from-cyan-600 to-cyan-400' }, { year: '2022', value: 380, color: 'from-teal-600 to-teal-400' }, { year: '2023', value: 520, color: 'from-emerald-600...

AI 评审点评

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

【GEMINI】这是一份非常优秀的代码实现。模型不仅完全满足了用户的所有功能性要求（五年数据、递增趋势、特定标注、数值显示），还在视觉设计和交互体验上做了大量加分项。代码结构清晰，通过 Tailwind CSS 实现了高质量的 UI，SVG 的运用让“阶梯状”这一核心需求得到了极具创意的视觉表达，整体表现超出预期。

进阶难度评测结果

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

模型生成产物

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

以下是根据您的要求设计的阶梯式业务增长趋势页面，包含了所有功能和美观的视觉效果： ```html 业务增长趋势 - 五年用户数据 @keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.8); } } .bar-grow { transform-origin: bottom; animation: growUp 1s ease-out forwards; opacity: 0; } .fade-in { animation: fadeIn 0.6s ease-out forwards; } .new-high-bounce { animation: bounce 2s ease-in-out infinite; } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .diagonal-bg { background: repeating-linear-gradient( -45deg, transparent, transparent 20px, rgba(59, 130, 246, 0.03) 20px, rgba(59, 130, 246, 0.03) 40px ), linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); } .diagonal-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; } .diagonal-line { position: absolute; width: 2px; height: 200%; background: linear-gradient( to bottom, transparent, rgba(34, 197, 94, 0.1) 50%, transparent ); transform: rotate(-45deg); } .tooltip { opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateX(-50%) translateY(10px); } .bar-wrapper:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .bar-wrapper:hover .bar { filter: brightness(1.2); } .bar { transition: filter 0.3s ease; } .grid-line { stroke-dasharray: 5, 5; opacity: 0.2; } 业务增长趋势 2020 - 2024 用户增长数据概览 持续增长中 起始用户 120万 2020年 当前用户 850万 2024年 总增长率 608% 五年累计 年均增长 182万 复合增长 1000万 800万 600万 400万 200万 0 2020年 120万用户 基准年份 120万 2021年 230万用户 +91.7% 同比增长 230万 2022年 380万用户 +65.2% 同比增长 380万 2023年 580万用户 +52.6% 同比增长 580万 2024年 NEW HIGH 850万用户 +46.6% 同比增长 New High 850万 2020 2021 2022 2023 2024 用户数量 增长趋势...

AI 评审点评

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

【GEMINI】该生成结果是一份高质量的前端开发作业。模型不仅精准实现了所有功能点（阶梯图、New High 标注、斜向背景、入场动画、详细 Tooltip），还在视觉细节上做了大量优化，如阶梯趋势连接线、同比增长率的自动计算以及响应式布局处理。代码结构清晰，利用 Tailwind CSS 实现了非常现代且专业的数据大屏感，用户体验极佳。

相关链接

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

加载中...
100%