GLM-5v-turbo 在「业务转化漏斗流程图页」的评测结果

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

基本信息

  • 模型名称：GLM-5v-turbo
  • 用例名称：业务转化漏斗流程图页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

设计一个五层业务转化漏斗图页面。 漏斗层级（从上到下）： - 第一层：展现（100%） - 第二层：点击（60%） - 第三层：咨询（30%） - 第四层：成交（15%） - 第五层：复购（8%） 视觉要求： - 每一层为梯形形状，从上到下宽度递减，形成漏斗效果 - 五层颜色由浅入深（同一色系渐变） - 每层右侧标注对应的百分比转化率 - 整体居中展示，排版平衡对称 - 每层内显示该层的名称文字

任务要求

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

  1. 漏斗呈现五层梯形结构，从上到下宽度递减
  2. 五层颜色在同一色系内由浅入深渐变
  3. 每层内显示层级名称（展现/点击/咨询/成交/复购）
  4. 每层右侧标注对应的百分比转化率
  5. 整体布局居中对称

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个业务转化漏斗图的需求。我会设计一个具有现代感、动态交互的漏斗可视化页面，采用深色主题配合醒目的渐变色系。 ```html 业务转化漏斗分析 :root { --bg-primary: #0a0f1a; --bg-secondary: #111827; --fg-primary: #f0f4f8; --fg-muted: #6b7a90; --accent-start: #00d4aa; --accent-mid: #0099cc; --accent-end: #0055aa; --card-bg: rgba(17, 24, 39, 0.7); --border-color: rgba(255, 255, 255, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans SC', 'Outfit', sans-serif; background: var(--bg-primary); color: var(--fg-primary); min-height: 100vh; overflow-x: hidden; } /* 背景装饰 */ .bg-pattern { position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 170, 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0, 85, 170, 0.12), transparent), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); z-index: -2; } .grid-overlay { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; z-index: -1; } /* 浮动光斑 */ .floating-orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 20s ease-in-out infinite; z-index: -1; } .orb-1 { width: 400px; height: 400px; background: var(--accent-start); top: -100px; left: -100px; animation-delay: 0s; } .orb-2 { width: 300px; height: 300px; background: var(--accent-mid); bottom: -50px; right: -50px; animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } /* 标题样式 */ .page-title { font-family: 'Outfit', sans-serif; font-weight: 900; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--fg-primary) 0%, var(--accent-start) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 漏斗容器 */ .funnel-container { position:...

AI 评审点评

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

【CLAUDE】该实现完整满足了五层漏斗图的核心需求：梯形结构准确、颜色渐变符合规范、数据标注完整清晰、布局居中对称。代码采用现代化的视觉设计，引入了深色主题、玻璃态效果、动态交互等增强元素，整体呈现专业且具有设计感。唯一可优化点是实现较为复杂（引入外部字体库、Tailwind CDN、大量装饰性动画），对于基础漏斗图需求而言略显冗余，但不影响功能完整性和视觉效果的优秀表现。 【GEMINI】模型交付了一个高质量的单页应用，不仅满足了基础的梯形漏斗展示和颜色渐变要求，还额外增加了现代化的 UI 装饰（如网格背景、光晕效果）和丰富的交互动效。代码结构清晰，通过 JS 动态生成 DOM 提高了可维护性。唯一的不足是百分比标注的水平方位与需求描述相反（出现在了左侧而非右侧），但整体表现依然非常优秀。 【KIMI】整体上，该代码实现了一个五层业务转化漏斗图页面，结构还原度较高，视觉设计美观，数据标注完整。代码结构清晰，有适当注释，符合题目要求。

进阶难度评测结果

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

模型生成产物

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

这是一个很棒的数据可视化需求！我来为你打造一个精致、有层次感的交互式漏斗图页面。 ```html 业务转化漏斗分析 :root { --bg-primary: #0a0f1a; --bg-secondary: #111827; --fg-primary: #f1f5f9; --fg-muted: #94a3b8; --accent: #38bdf8; --card-bg: rgba(30, 41, 59, 0.7); --border-color: rgba(148, 163, 184, 0.15); /* 漏斗颜色 - 蓝色系由浅入深 */ --funnel-1: #e0f2fe; --funnel-2: #7dd3fc; --funnel-3: #38bdf8; --funnel-4: #0ea5e9; --funnel-5: #0369a1; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg-primary); color: var(--fg-primary); min-height: 100vh; overflow-x: hidden; } .display-font { font-family: 'Space Grotesk', sans-serif; } /* 背景装饰 */ .bg-pattern { position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14, 165, 233, 0.1), transparent), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); z-index: -2; } .grid-overlay { position: fixed; inset: 0; background-image: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); background-size: 60px 60px; z-index: -1; } /* 漏斗容器 */ .funnel-container { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px; } /* 单个漏斗层 */ .funnel-layer { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center top; } .funnel-layer:hover { transform: scale(1.02); z-index: 10; } .funnel-shape { position: relative; display: flex; align-items: center; justify-content: center; clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%); backdrop-filter: blur(4px); transition: all 0.4s ease; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .funnel-layer:hover .funnel-shape { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 30px currentColor,...

AI 评审点评

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

【CLAUDE】这是一个高质量的漏斗可视化实现。代码完整实现了五层梯形漏斗结构，蓝色系渐变自然，数据标注位置合理对称。交互体验流畅，悬停高亮和 Tooltip 功能完善，信息展示完整准确。视觉设计采用现代科技风格，层次分明。代码结构清晰，使用 CSS 变量管理主题色，动画细节丰富（箭头脉冲、入场动画、悬停效果）。唯一可优化点是减少外部依赖（Tailwind CDN 和 Google Fonts），但不影响核心功能实现。整体完成度高，符合专业数据可视化标准。 【GEMINI】这是一个非常优秀的代码实现。模型不仅准确完成了所有功能性需求，还在视觉审美和交互细节上做了大量加分工作（如动态背景网格、入场动效、平滑的 Tooltip 切换等）。代码结构清晰，通过数据驱动的方式生成漏斗层级，易于维护。整体表现体现了极高的前端开发水平和产品设计意识。 【KIMI】该漏斗图页面在结构还原、视觉设计、交互功能和信息完整性方面都表现出色，基本满足了题目要求。漏斗结构正确，蓝色系渐变美观，交互功能流畅，信息标注完整。整体界面现代、美观，视觉层次清晰，用户体验良好。

相关链接

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

加载中...
100%