qwen3.6-plus-preview 在「业务转化漏斗流程图页」的评测结果

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

基本信息

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```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: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #e2e8f0; overflow: hidden; } /* ========== 页面标题 ========== */ .page-title { font-size: 28px; font-weight: 700; letter-spacing: 4px; margin-bottom: 12px; background: linear-gradient(90deg, #60a5fa, #a78bfa, #60a5fa); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; } .page-subtitle { font-size: 14px; color: #64748b; letter-spacing: 2px; margin-bottom: 50px; } @keyframes shimmer { to { background-position: 200% center; } } /* ========== 漏斗容器 ========== */ .funnel-container { position: relative; width: 700px; display: flex; flex-direction: column; align-items: center; } /* ========== 漏斗层级通用样式 ========== */ .funnel-layer { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; opacity: 0; animation: fadeInUp 0.6s ease forwards; } .funnel-layer:hover { transform: scale(1.03); filter: brightness(1.15); z-index: 10; } /* 梯形背景 */ .funnel-layer .trapezoid { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; clip-path: polygon( var(--top-left) 0%, var(--top-right) 0%, var(--bottom-right) 100%, var(--bottom-left) 100% ); transition: clip-path 0.3s ease; } /* 层级内部文字 */ .layer-label { position: relative; z-index: 2; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); pointer-events: none; } /* 层级内部数值 */ .layer-value { position: relative; z-index: 2; font-size: 13px; font-weight: 400; opacity: 0.85; margin-left:...

AI 评审点评

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

【GEMINI】这是一份高质量的单页应用实现。模型不仅精确执行了用户的所有指令，还展现了深厚的前端功底。通过巧妙使用 clip-path 解决了梯形绘制的难点，并利用交互动效和深色主题设计提升了整体的专业度。代码结构严谨，注释充分，是一个非常理想的生成结果。

进阶难度评测结果

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

模型生成产物

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

```html 业务转化漏斗分析 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); min-height: 100vh; color: #e2e8f0; overflow-x: hidden; } .container { max-width: 1100px; margin: 0 auto; padding: 40px 20px; } /* Header */ .header { text-align: center; margin-bottom: 50px; position: relative; } .header h1 { font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #60a5fa, #a78bfa, #60a5fa); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s ease-in-out infinite; letter-spacing: 2px; } .header .subtitle { font-size: 15px; color: #64748b; margin-top: 10px; letter-spacing: 1px; } .header::after { content: ''; display: block; width: 80px; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); margin: 16px auto 0; border-radius: 2px; } @keyframes shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } } /* Funnel Area */ .funnel-wrapper { display: flex; align-items: center; justify-content: center; gap: 0; position: relative; padding: 20px 0; } .labels-left { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 160px; flex-shrink: 0; } .labels-right { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 160px; flex-shrink: 0; } .funnel-center { display: flex; flex-direction: column; align-items: center; position: relative; } /* Funnel Layer */ .funnel-layer-wrapper { display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .funnel-layer { position: relative; height: 72px; display: flex; align-items: center; justify-content: center; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); clip-path:...

AI 评审点评

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

【GEMINI】这是一个非常优秀的前端实现。模型不仅完全满足了所有功能和视觉要求，还在此基础上进行了审美升华，提供了一个具备生产环境质感的单页应用。代码结构清晰，通过 CSS 变量控制梯形比例，展示了深厚的前端功底。

困难难度评测结果

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

模型生成产物

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

```html 业务转化漏斗分析 :root { --bg: #f0f4f8; --card-bg: #ffffff; --text: #1a202c; --text-secondary: #718096; --border: #e2e8f0; --shadow: 0 4px 24px rgba(0,0,0,0.08); --radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; } /* ===== Theme Colors ===== */ .theme-blue { --c0: #dbeafe; --c1: #93c5fd; --c2: #60a5fa; --c3: #3b82f6; --c4: #1d4ed8; --c0-hover: #bfdbfe; --c1-hover: #60a5fa; --c2-hover: #3b82f6; --c3-hover: #2563eb; --c4-hover: #1e40af; --accent: #3b82f6; } .theme-orange { --c0: #ffedd5; --c1: #fdba74; --c2: #fb923c; --c3: #f97316; --c4: #c2410c; --c0-hover: #fed7aa; --c1-hover: #fb923c; --c2-hover: #f97316; --c3-hover: #ea580c; --c4-hover: #9a3412; --accent: #f97316; } .theme-green { --c0: #dcfce7; --c1: #86efac; --c2: #4ade80; --c3: #22c55e; --c4: #15803d; --c0-hover: #bbf7d0; --c1-hover: #4ade80; --c2-hover: #22c55e; --c3-hover: #16a34a; --c4-hover: #166534; --accent: #22c55e; } /* ===== Header ===== */ .header { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,0.04); } .header h1 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .header h1 .icon { font-size: 24px; } .header-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .theme-switcher { display: flex; gap: 6px; align-items: center; } .theme-switcher span { font-size: 13px; color: var(--text-secondary); margin-right: 4px; } .theme-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all 0.2s; position: relative; } .theme-btn:hover { transform:...

AI 评审点评

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

【GEMINI】这是一个非常优秀且专业的实现。模型不仅完美达成了所有功能和视觉要求，还在代码结构上实现了数据与视图的清晰分离（Data Layer / View Layer），易于维护。UI 设计美观，交互细节（如 Tooltip 的边缘检测、JSON 导出模态框）处理得非常成熟，是一份高质量的单页应用代码。

相关链接

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

加载中...
100%