GLM-5.1 在「统计卡片」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：统计卡片
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建精美的数据展示页面。 输出要求： 1. 所有代码（HTML、CSS、JavaScript）必须合并在单个 HTML 文件中，禁止引用任何外部本地文件。 2. 允许使用 CDN 链接引入外部库，但 Basic 级别优先使用原生实现。 3. 输出内容必须是完整、可直接在浏览器中独立运行的 HTML 代码，不附加任何解释文字。 4. CSS 样式追求简洁美观，使用 Flexbox 或 CSS Grid 实现布局，确保响应式断点正确生效。 5. 代码结构清晰，HTML/CSS/JS 各自用注释分隔，变量命名语义化。

用户提示词（User Prompt）

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

请生成一个统计卡片展示页面，所有代码写在单个 HTML 文件中，可直接在浏览器运行。 ## 卡片数据（共 4 张，默认横向一行排列） | # | 标题 | 数值 | 趋势 | 图标建议 | |---|----------|-----------|----------------|----------| | 1 | 总用户数 | 12,345 | ↑ 12% 比上月 | 👥 | | 2 | 活跃用户 | 8,901 | ↑ 5% 比上月 | 🟢 | | 3 | 总收入 | ¥89,012 | ↓ 3% 比上月 | 💰 | | 4 | 订单数 | 1,234 | ↑ 8% 比上月 | 📦 | ## 卡片设计要求 - 每张卡片包含：图标区域、指标标题、核心数值、趋势标签（百分比 + 文字说明） - 上升趋势（↑）显示绿色，下降趋势（↓）显示红色 - 卡片默认白色背景，带圆角和细边框阴影 - 鼠标悬停时卡片阴影加深，并有轻微上移过渡动画（transition） ## 布局与响应式 - 桌面端（≥768px）：4 张卡片横向一行等宽排列 - 平板端（480px ~ 767px）：2 列排列 - 手机端（<480px）：1 列排列 - 使用 CSS Grid 或 Flexbox 实现，禁止使用 float 布局 ## 页面整体 - 页面有标题区域（如「数据概览」）和副标题（如当前日期或「本月统计」） - 页面背景使用浅灰色（如 #f5f7fa），与白色卡片形成层次对比 - 整体风格简洁、专业，类似 SaaS 管理后台风格 请直接输出完整的 HTML 代码，不要附加任何说明文字。

任务要求

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

  1. 4 张卡片均正确展示图标、标题、数值、趋势信息，数据与题目要求完全一致（数值、百分比、货币符号无误）
  2. 上升趋势标签呈现绿色，下降趋势标签呈现红色，颜色逻辑通过 CSS class 或 inline style 实现，不得硬编码为同一颜色
  3. 响应式布局正确生效：桌面 4 列、平板 2 列、手机 1 列，通过 Media Query 实现，断点设置合理
  4. 卡片悬停效果完整：阴影加深 + 轻微上移，使用 CSS transition 实现平滑过渡，无跳变
  5. 页面整体视觉层次清晰：有页面标题区域，背景色与卡片色形成对比，卡片内部信息排版整齐
  6. 所有代码在单个 HTML 文件内，无外部本地文件依赖，可直接在浏览器打开运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 数据概览 /* ========== CSS 变量 ========== */ :root { --bg: #f0f2f5; --card-bg: #ffffff; --fg: #1a1a2e; --fg-secondary: #6b7280; --accent-green: #10b981; --accent-green-bg: rgba(16, 185, 129, 0.1); --accent-red: #ef4444; --accent-red-bg: rgba(239, 68, 68, 0.1); --border: #e5e7eb; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 10px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04); --shadow-lg: 0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06); --radius: 16px; --icon-size: 48px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', 'Noto Sans SC', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; } /* ========== 背景装饰 ========== */ body::before { content: ''; position: fixed; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -300px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ========== 主容器 ========== */ .dashboard { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 48px 24px; } /* ========== 页面标题区域 ========== */ .header { margin-bottom: 40px; } .header__title { font-size: 32px; font-weight: 700; color: var(--fg); letter-spacing: -0.5px; line-height: 1.2; } .header__subtitle { margin-top: 8px; font-size: 15px; color: var(--fg-secondary); font-weight: 400; } .header__subtitle span { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-green-bg); color: var(--accent-green); font-weight: 500; font-size: 13px; padding: 3px 10px; border-radius: 20px; margin-left: 8px; } .header__subtitle span::before { content:...

AI 评审点评

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

【CLAUDE】这是一个高质量的实现，完全满足题目的所有核心要求，并在多个方面超出预期。代码展现了扎实的前端开发功底：视觉设计现代专业，响应式布局精准，功能实现完整，代码组织规范。特别值得称赞的是细节处理，如数值滚动动画、迷你图表、无障碍支持、性能优化（IntersectionObserver）等，体现了对用户体验的深入思考。唯一的「不足」是使用 SVG 图标替代了 emoji，但这实际上提升了视觉专业度。整体评价：优秀的 SaaS 风格数据展示页面实现。 【GEMINI】这是一个非常高水平的生成结果。模型不仅准确地执行了所有显性要求（数据、布局、响应式、颜色逻辑），还展现了极强的专业审美和工程素养。额外的数值滚动动画、SVG 迷你趋势图以及完善的响应式细节处理，使得最终页面达到了可以直接上线使用的管理后台原型标准。 【KIMI】该实现是一份高质量的统计卡片页面，视觉设计专业现代，超出基础要求的动画效果和细节处理（入场动画、sparkline迷你图、脉冲状态指示器）展现了较高的前端开发水准。响应式布局、颜色逻辑、悬停效果等核心要求均正确实现。主要扣分点在于图标未使用题目建议的emoji而是替换为SVG，以及部分增强功能虽提升体验但偏离了Basic级别'优先原生实现'的简约导向。整体而言，代码质量高、可维护性强、运行稳定，是一份优秀的实现。

进阶难度评测结果

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

模型生成产物

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

```html 数据统计面板 :root { --bg: #0d0f14; --card: rgba(20, 24, 36, 0.82); --card-border: rgba(255,255,255,0.06); --fg: #eef0f6; --fg-muted: #6b7194; --accent: #f59e0b; --accent-glow: rgba(245,158,11,0.15); --green: #34d399; --red: #fb7185; --radius: 16px; --font-main: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--font-main); background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; } /* ===== 背景装饰 ===== */ .bg-deco { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .bg-orb { position:absolute; border-radius:50%; filter:blur(110px); opacity:.25; } .bg-orb-1 { width:520px; height:520px; background:#f59e0b; top:-220px; right:-80px; animation:orbA 22s ease-in-out infinite; } .bg-orb-2 { width:420px; height:420px; background:#34d399; bottom:-160px; left:-100px; animation:orbB 26s ease-in-out infinite; } .bg-orb-3 { width:320px; height:320px; background:#fb923c; top:45%; left:48%; animation:orbC 19s ease-in-out infinite; } @keyframes orbA { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-70px,50px)} 66%{transform:translate(30px,-30px)} } @keyframes orbB { 0%,100%{transform:translate(0,0)} 33%{transform:translate(50px,-70px)} 66%{transform:translate(-30px,30px)} } @keyframes orbC { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-50px) scale(1.15)} } .bg-grid { position:fixed; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:64px 64px; } /* ===== 容器 ===== */ .container { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:48px 24px 64px; } /* ===== 头部 ===== */ .page-header { margin-bottom:36px; } .page-title { font-size:2.6rem; font-weight:700; letter-spacing:-.03em; margin-bottom:6px;...

AI 评审点评

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

【CLAUDE】该实现在视觉设计、功能完整度和代码质量三方面均表现优秀。视觉层面采用现代化设计语言，毛玻璃效果、动态背景、渐变文字等元素营造出精致的科技感；响应式布局准确适配多种屏幕尺寸。功能层面四大核心模块（数值动画、Canvas Tooltip、筛选排序、Web Audio 音效）均完整实现且细节到位，如 FLIP 动画的平滑过渡、Tooltip 的边界检测、音效的频率设计等均体现出对用户体验的深度考量。代码层面结构清晰、注释完整、逻辑健壮，单文件封装符合要求且无外部依赖。综合来看，这是一个高质量的数据可视化交互组件实现，完全满足进阶版的所有技术要求，且在多个细节上超出预期。 【GEMINI】这是一份非常优秀的前端代码实现。开发者不仅满足了所有基础和进阶要求，还在交互细节上做了大量优化（如 FLIP 排序动画、Canvas 采样点检测、渐变背景等）。代码质量高，注释详尽，展示了资深的前端开发水平。 【KIMI】该实现在视觉设计、功能实现和代码组织方面均表现优秀，满足了题目要求的大部分核心功能点。页面视觉效果和响应式布局适配良好，动画流畅自然。Canvas迷你折线图和Tooltip功能实现完善，排序筛选交互体验佳。Web Audio API音效合成和静音开关功能正常。代码结构清晰，关键逻辑有注释，整体封装合理。但部分JS逻辑复杂度较高，可进一步优化以提升代码可读性。

困难难度评测结果

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

模型生成产物

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

```html 数据仪表盘 tailwind.config = { theme: { extend: { fontFamily: { mono: ['"JetBrains Mono"', 'monospace'], } } } } /* ===== CSS 变量 ===== */ :root { --bg: #0f172a; --bg-deep: #060d1f; --card: rgba(30, 41, 59, 0.65); --card-solid: #1e293b; --card-border: rgba(56, 189, 248, 0.12); --accent: #38bdf8; --fg: #e2e8f0; --muted: #64748b; --up: #22c55e; --down: #ef4444; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif; min-height: 100vh; overflow-x: hidden; } /* ===== 背景网格 ===== */ .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ===== 背景发光 ===== */ .bg-glow { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; } .bg-glow-1 { top: -120px; right: -80px; width: 500px; height: 500px; background: rgba(56, 189, 248, 0.07); animation: glow-drift 12s ease-in-out infinite alternate; } .bg-glow-2 { bottom: -180px; left: -120px; width: 600px; height: 600px; background: rgba(139, 92, 246, 0.05); animation: glow-drift 15s ease-in-out infinite alternate-reverse; } .bg-glow-3 { top: 40%; left: 50%; width: 300px; height: 300px; background: rgba(34, 197, 94, 0.04); animation: glow-drift 10s ease-in-out infinite alternate; } @keyframes glow-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, -20px) scale(1.1); } } /* ===== 卡片样式 ===== */ .stat-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 24px; cursor: grab; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.2s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);...

AI 评审点评

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

【CLAUDE】该候选输出高质量完成了 Hard 级别统计卡片仪表盘的所有核心要求。视觉设计精美，深色科技风格贯彻彻底，玻璃拟态效果和多层光晕营造出色的沉浸感。五项复杂功能（实时数据更新、拖拽排序、数据钻取、图表展示、Web Audio 音效）均已实现且基本可用，技术选型合理（原生 Drag and Drop API + FLIP 动画、ECharts 图表库、Web Audio API 音效合成）。代码组织清晰，模块化注释完善，单文件约束严格遵守，具备良好的防御性编程意识。扣分主要集中在细节优化空间：拖拽防误触机制可进一步增强，图表数据更新缺少边界校验，音效系统未提供音量调节。整体而言，这是一个完成度极高、工程质量优秀的实现，完全满足 Hard 级别要求并具备生产环境可用性。 【GEMINI】这是一份卓越的实现方案。模型不仅完美达成了所有“Hard”级别的技术指标，还在交互细节上做了大量优化，例如在拖拽排序中引入了 FLIP 动画算法以提升视觉流畅度，以及在 Web Audio 模块中利用 LFO 创造呼吸感的背景音。代码结构清晰，逻辑健壮，是一个高质量的单文件 Web 应用示例。 【KIMI】该实现是一份高质量的Hard级别仪表盘单文件方案，在视觉表现和功能完整性上达到较高水准。深色科技风设计精致，玻璃拟态与动态背景层次丰富；核心交互如拖拽排序的FLIP动画、数字滚动、音频反馈等细节处理专业。主要不足在于图表实时刷新的数据语义未完全对齐需求（柱状图/饼图未实现真正的时序追加移除），以及部分边界条件和内存管理的精细化处理空间。整体可作为生产级原型，经少量修正后即可投入实际使用。

相关链接

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

加载中...
100%