MiniCPM-V-4.7-35B-A3B 在「业务转化漏斗流程图页」的评测结果

基本信息

• 模型名称：MiniCPM-V-4.7-35B-A3B
• 用例名称：业务转化漏斗流程图页
• 测试类型：网页生成
• 评测维度：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. 整体布局居中对称

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个为您设计的五层业务转化漏斗图页面。 我使用了 HTML 和 CSS 来构建这个图形。为了确保视觉上的平衡和美观，我采用了 Flexbox 布局进行居中，并使用 CSS 的 `clip-path` 属性来绘制精确的梯形，同时利用 CSS 变量和渐变来实现颜色的深浅过渡。 ```html 业务转化漏斗图 :root { /* 定义颜色色系 (蓝色系，由浅入深) */ --color-layer-1: #a8d5ff; --color-layer-2: #5eb3ff; --color-layer-3: #2a9df4; --color-layer-4: #1a73e8; --color-layer-5: #0d47a1; /* 漏斗基础尺寸 */ --max-width: 600px; --layer-height: 80px; --gap: 10px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .funnel-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; padding: 20px; } .funnel-title { font-size: 24px; color: #333; margin-bottom: 30px; font-weight: 600; } .funnel-wrapper { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; } .layer { position: relative; height: var(--layer-height); margin-bottom: var(--gap); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; } .layer:hover { transform: scale(1.02); box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 10; } /* 梯形形状绘制 */ /* 使用 clip-path 创建梯形，上宽下窄 */ .layer-1 { width: 100%; max-width: var(--max-width); background-color: var(--color-layer-1); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } .layer-2 { width: 85%; max-width: calc(var(--max-width) * 0.85); background-color: var(--color-layer-2); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } .layer-3 { width: 65%; max-width: calc(var(--max-width) * 0.65); background-color: var(--color-layer-3); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } .layer-4 { width: 45%; max-width: calc(var(--max-width) * 0.45); background-color: var(--color-layer-4); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } .layer-5 { width:...

AI 评审点评

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

【CLAUDE】整体是一份结构清晰、注释到位、思路说明充分的实现：五层梯形、宽度递减、同色系由浅入深的渐变、层内名称与百分比数据均无遗漏，还额外提供了 hover 交互与响应式适配，基础完成度合格。主要短板集中在两点：一是把「宽度递减」交给了容器宽度、把「梯形收缩」交给了固定比例的 clip-path，两套尺寸互不联动，造成相邻层斜边无法接续、漏斗不连续；二是百分比标签放在被 clip-path 裁剪的父元素内并溢出到盒外，实际渲染时会被裁掉，使得右侧转化率标注很可能不可见——这正是本任务的核心要求之一。建议改为一个统一的 SVG 或单个元素绘制整体漏斗轮廓（按 100/60/30/15/8 的真实比例计算上下边宽），并将百分比标签移出被裁剪的容器、或改用 SVG 文本/外部绝对定位层承载。综合来看属于「代码意图正确、渲染细节有硬伤」的水平。 【GEMINI】模型很好地理解了业务转化漏斗的需求，设计了规范的单页应用，颜色阶梯渐变与居中对称布局均符合要求。然而代码实现上存在前端典型问题：将绝对定位溢出标注放置在被 clip-path 裁剪的父容器内，导致右侧百分比数据在 PC 端被裁切丢失，拉低了视觉和交互的最终呈现效果。 【KIMI】该代码实现了基本的漏斗图功能，五层结构、颜色渐变和数据标注均达到要求。但核心问题在于clip-path的固定比例导致漏斗层间无法形成平滑连续的漏斗形态，更像是独立梯形的堆叠而非标准漏斗。此外，右侧标签的绝对定位方案在可用性上存在隐患，响应式处理也改变了原始设计要求。代码结构清晰，注释适当，但在视觉精确度和布局鲁棒性方面有待提升。

进阶难度评测结果

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

模型生成产物

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

这是一个完整的单页 HTML 应用，包含了 CSS 样式和 JavaScript 交互逻辑。你可以直接保存为 `.html` 文件并在浏览器中打开。 ```html 业务转化漏斗分析 :root { --bg-color: #f4f7f9; --text-color: #333; --tooltip-bg: rgba(0, 0, 0, 0.8); } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } h1 { color: #2c3e50; margin-bottom: 40px; font-weight: 600; } /* 漏斗容器 */ .funnel-container { position: relative; width: 600px; display: flex; flex-direction: column; align-items: center; } /* 漏斗层基础样式 */ .funnel-layer { position: relative; margin: 10px 0; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .funnel-layer:hover { transform: scale(1.02); filter: brightness(1.1); z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } /* 梯形形状实现 */ .trapezoid { width: 100%; height: 60px; clip-path: polygon( calc(50% - var(--width-half)) 0%, calc(50% + var(--width-half)) 0%, calc(50% + var(--width-half-full)) 100%, calc(50% - var(--width-half-full)) 100% ); display: flex; justify-content: center; align-items: center; } /* 颜色渐变 - 蓝色系由浅入深 */ .layer-1 { --width-half: 200px; --width-half-full: 220px; background-color: #a8d5ff; } .layer-2 { --width-half: 170px; --width-half-full: 190px; background-color: #5eb3ff; } .layer-3 { --width-half: 120px; --width-half-full: 140px; background-color: #2a9df4; } .layer-4 { --width-half: 80px; --width-half-full: 95px; background-color: #1a73e8; } .layer-5 { --width-half: 40px; --width-half-full: 50px; background-color: #0d47a1; } /* 左侧人数标注 */ .label-left { position: absolute; left: -140px; text-align: right; width: 120px; font-size: 14px; color: #555; display: flex; flex-direction: column; justify-content: center; height: 60px; } .label-left span { font-weight: bold; color: #333; } /* 右侧转化率标注 */...

AI 评审点评

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

【KIMI】该实现作为一个基础漏斗图页面，满足了核心功能需求：五层梯形结构、蓝色渐变、数据标注、悬停交互和总转化率展示。但在技术实现层面存在多处可优化点：clip-path梯形与事件区域的匹配问题、绝对定位布局的脆弱性、tooltip定位的精确度、以及最后一层转化率标注的逻辑合理性。代码质量中等，无外部依赖，内联实现符合要求，整体可作为可用原型，但距离生产级代码仍有差距。建议在梯形形状的事件精确性、响应式适配和tooltip边界处理方面进行优化。 【CLAUDE】这是一份可用度较高的实现：五层漏斗、四支向下箭头、浅到深的蓝色渐变、跟随光标的提示框以及底部总转化率都落实到位，0.22% 由 JS 实时算出而非硬编码，代码无外部依赖，还抽了 CSS 变量便于调整宽度，说明文字也把取舍讲清楚了。主要扣分集中在两点：一是单层梯形方向做反，下底比上底一边宽 20px，每层呈向外张开的倒梯形，与漏斗语义相悖；二是左右标注用固定偏移，层变窄后与图形脱节，同时悬停阴影按 600px 矩形盒绘制，破坏梯形轮廓。另外交付内容里 HTML 标签全部被转义成实体形式，若这是原始输出的真实状态，代码无法在浏览器中渲染，本次评分是按转义属序列化产物、源码本身可运行来评估的。改进方向：修正 clip-path 的上下宽度关系，让标注跟随各层实际宽度定位或改为数值随层浮动，把高亮施加到梯形元素本身，并补上窄屏适配。 【GEMINI】该方案高质量地完成了单页五层业务漏斗应用的开发。代码结构清晰规范，视觉风格现代优雅，左右双侧标注对称平衡，交互动效平滑流畅。唯一不足在于单个梯形多边形的顶点计算略有偏差，导致单层形态呈上窄下宽，但整体漏斗视觉与功能仍表现优异。

困难难度评测结果

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

模型生成产物

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

这是一个功能完善的、单文件实现的业务转化漏斗图分析页面。它包含了所有要求的视觉、交互和数据功能。 ```html 业务转化漏斗分析系统 :root { --primary-color: #3b82f6; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-secondary: #6b7280; --warning-color: #ef4444; --transition-speed: 0.3s; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } /* Header & Controls */ header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; background: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } h1 { font-size: 1.5rem; color: var(--text-main); } .controls { display: flex; gap: 15px; align-items: center; } button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s; } .btn-theme { background: #e5e7eb; color: var(--text-main); } .btn-theme.active { background: var(--primary-color); color: white; } .btn-export { background: var(--primary-color); color: white; } .btn-export:hover { opacity: 0.9; } /* Main Layout */ .main-content { display: grid; grid-template-columns: 1fr 300px; gap: 30px; margin-bottom: 30px; } @media (max-width: 900px) { .main-content { grid-template-columns: 1fr; } } /* Funnel Area */ .funnel-container { position: relative; background: var(--card-bg); padding: 40px 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .funnel-wrapper { position: relative; width: 100%; max-width: 600px; margin: 0 auto; } .funnel-layer { position: relative; margin: 10px 0; cursor: pointer; transition: all var(--transition-speed) ease; opacity: 0; transform: translateY(-20px); animation: fadeInUp 0.5s forwards; } .funnel-layer:nth-child(1) {...

AI 评审点评

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

【CLAUDE】整体是一个可直接运行、结构清晰（数据与视图分离、SVG 重绘驱动）的单文件实现，主题切换、双侧数据标注、红色警示、竖向占比条、悬停详情卡、实时编辑、JSON 导出、汇总面板等绝大多数功能点真实可用，完成度中上。主要失分集中在「动画」这一权重最高的方向上：流动箭头只在 CSS 里定义、JS 从未渲染出节点；入场动画的错峰 delay 挂在了未使用的 .funnel-layer 上，实际五层同时淡入；聚焦模式只做了描边与降灰，未实现要求的放大居中。这些都属于写了样式却没接上视图的死实现，加上总转化率标签口径与计算不一致，导致高权重维度明显拉低。若补上箭头的 DOM 生成、把 delay 转移到 .funnel-path、为聚焦层加真正的 SVG transform 缩放，并修正汇总口径，整体质量会大幅提升。 【GEMINI】候选实现完成了大部分业务需求，代码结构清晰，数据与视图解耦良好，实时编辑联动与主题切换等交互功能表现优异。主要不足在于动画与视觉细节的还原：遗漏了流动箭头的 DOM 渲染，入场动画因类名不对应缺失层级延迟，聚焦模式未实现真正的放大居中，总转化率计算取值与界面文案存在细微偏差。 【KIMI】该实现整体质量较高，作为单文件HTML应用，结构清晰，CSS与JavaScript内联，数据与视图分离做得较好。核心功能如主题切换、数据编辑实时更新、JSON导出等均完整可用。主要扣分点在于：动态流动箭头动画缺失（代码有定义但未实际渲染）、聚焦模式的'放大居中'效果未达预期、以及最大流失层显示文案的语义准确性。若补充箭头元素的渲染逻辑、优化聚焦模式的视觉表现，并修正文案表述，将更接近完美实现。

相关链接

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

• 查看所有模型在此用例的表现：「业务转化漏斗流程图页」
• 查看该模型的所有评测结果：MiniCPM-V-4.7-35B-A3B
• 浏览同维度的其他用例：「AI 生成单页 PPT」
• 返回排行榜首页