qwen3-coder-plus 在「三维产品性能对比表格页」的评测结果

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

基本信息

  • 模型名称：qwen3-coder-plus
  • 用例名称：三维产品性能对比表格页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个产品套餐对比表格页面。 功能要求： - 展示「基础版」、「专业版」、「旗舰版」三个套餐列 - 纵向对比以下指标：价格、存储空间、支持人数、技术支持、数据备份 - 使用 ✓ 图标表示支持，✗ 图标表示不支持 - 三个套餐表头使用不同的背景颜色加以区分 - 界面简洁清晰

任务要求

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

  1. 包含「基础版」、「专业版」、「旗舰版」三列套餐
  2. 纵向展示价格、存储空间、支持人数等对比指标
  3. 使用 ✓ 和 ✗ 图标进行视觉区分
  4. 三个套餐表头有明显的色彩区分
  5. 整体布局清晰，信息可读

评测结果

综合得分

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

基础难度评测结果

  • 得分：0.8 分
  • 通过状态：未通过

模型生成产物

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

系统报错（阶段=模型生成; 模块=app.services.inference.call_text_model; provider=dashscope; model=qwen3-coder-plus）：[app.services.inference.call_text_model][provider=dashscope][model=qwen3-coder-plus] 流式调用超时: 超过 120.0s 没有收到新数据

AI 评审点评

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

【CLAUDE】本次评测中，模型因流式调用超时（超过120秒未收到新数据）导致完全未能生成任何有效输出。候选输出仅为系统错误信息，不包含任何HTML结构、样式或功能实现，所有评分维度均为0分。这属于模型服务层面的故障，而非生成质量问题，但按评分标准仍须给予零分处理。 【GEMINI】本次评测中，模型因流式调用超时导致生成失败，未输出任何有效内容。根据评测标准，所有维度均无法完成，故均评为 0 分。 【KIMI】该候选输出为完全的生成失败案例。模型在推理过程中发生流式调用超时错误，未产生任何符合任务要求的有效内容。所有评分维度均得 0 分，属于严重的服务可用性问题，需重新调用或检查模型服务状态。

进阶难度评测结果

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

模型生成产物

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

```html 产品套餐对比 - 选择最适合您的方案 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; line-height: 1.6; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; padding: 20px; } h1 { font-size: 2.5rem; color: #2c3e50; margin-bottom: 10px; } .subtitle { font-size: 1.2rem; color: #7f8c8d; max-width: 600px; margin: 0 auto; } .pricing-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } @media (max-width: 900px) { .pricing-table { grid-template-columns: 1fr; } .package-card { max-width: 500px; margin: 0 auto; } } .package-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; } .package-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .package-header { padding: 30px 20px; text-align: center; color: white; position: relative; } .package-header.basic { background: linear-gradient(135deg, #3498db, #2980b9); } .package-header.professional { background: linear-gradient(135deg, #e74c3c, #c0392b); /* 推荐标识 */ } .package-header.enterprise { background: linear-gradient(135deg, #2ecc71, #27ae60); } .recommended-badge { position: absolute; top: 15px; right: -30px; background: #f39c12; color: white; padding: 5px 25px; transform: rotate(45deg); font-size: 0.8rem; font-weight: bold; } .package-name { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; } .price { font-size: 2.5rem; font-weight: bold; margin: 15px 0; } .price-period { font-size: 1rem; opacity: 0.9; } .package-features { padding: 20px; } .feature-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; } .feature-label { flex: 1; font-weight: 500; color: #555; } .feature-value {...

AI 评审点评

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

【CLAUDE】该实现采用卡片式布局而非传统横向对比表格，导致核心的「多方案产品对比」功能大打折扣——各指标行无法真正横向对齐，用户难以直观比较同一指标在不同套餐间的差异。功能上仅展示6项指标（不足8项），推荐角标因CSS overflow被裁切，技术支持方式未体现差异化内容。交互上悬停效果实现思路正确但执行不够精准，「整列高亮」的语义在卡片布局下难以完整实现。视觉上有基本的现代感，但「专业版」突出效果不足，整体与专业产品对比页面的标准仍有差距。 【GEMINI】模型高质量地完成了任务，生成的代码结构清晰、可维护性强。不仅完美契合了所有功能需求，还在视觉设计和交互细节上表现出色，是一个可以直接投入使用的优秀前端组件。 【KIMI】该实现是一个美观现代的产品定价页面，基本满足了功能需求，但在「表格」形态的还原度、「专业版」视觉权重的突出策略以及悬停交互的逻辑上存在可优化空间。建议将「专业版」改用更具冲击力的配色（如深紫、金色或更饱和的蓝色），将「旗舰版」调整为相对沉稳的色调；同时可考虑在传统表格布局与卡片布局之间寻找平衡，或增加行对齐的辅助线以增强对比性。

困难难度评测结果

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

模型生成产物

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

```html 产品套餐对比 - 专业版面 :root { --primary-color: #4f46e5; --secondary-color: #10b981; --accent-color: #f59e0b; --text-primary: #1f2937; --text-secondary: #6b7280; --border-color: #e5e7eb; --bg-white: #ffffff; --bg-gray: #f9fafb; --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-popular: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-gray); color: var(--text-primary); line-height: 1.6; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } /* 标题区域 */ .header { text-align: center; margin-bottom: 40px; padding: 20px; } .header h1 { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; } /* 计费方式切换 */ .billing-toggle { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; gap: 15px; } .toggle-label { font-weight: 600; color: var(--text-secondary); } .toggle-switch { position: relative; width: 60px; height: 30px; background-color: #cbd5e1; border-radius: 15px; cursor: pointer; transition: var(--transition); } .toggle-switch.active { background-color: var(--primary-color); } .toggle-slider { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background-color: white; border-radius: 50%; transition: var(--transition); } .toggle-switch.active .toggle-slider { transform: translateX(30px); } .toggle-text { display: flex; gap: 20px; font-weight: 600; } .toggle-option { cursor: pointer; color: var(--text-secondary); transition: var(--transition); } .toggle-option.active { color: var(--primary-color); } /* 对比表格 */ .comparison-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow-x: auto;...

AI 评审点评

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

【CLAUDE】该实现完成了产品套餐对比表格的基本框架，具备三套餐展示、月付/年付切换、分组指标、响应式布局等核心结构。但存在几个明显问题：价格切换缺乏平滑动画（仅display切换）、基础版价格切换JS逻辑未实现、列悬停高亮逻辑错误（全列高亮而非当前列）、✗图标颜色不符合规范（红色而非灰色）。视觉设计中规中矩，专业版突出效果较弱。整体代码结构清晰，但功能细节打磨不足，距离「产品级」水准还有一定差距。 【GEMINI】该模型生成了一个高质量的单页应用，代码结构清晰，CSS 运用熟练。视觉设计与功能实现均达到了很高的水准。主要扣分点在于 JavaScript 交互逻辑中「鼠标悬停某列时，该列整体高亮」的实现存在 Bug（导致所有列同时高亮），以及响应式布局在极小屏幕下的细节处理尚有提升空间。 【KIMI】该实现整体完成了产品套餐对比页面的核心功能，视觉设计较为专业，「专业版」的突出效果和分组视觉分隔处理得当。但存在若干关键缺陷：交互逻辑上列悬停高亮实现错误（全列高亮而非单列），价格切换动画缺失平滑过渡，✗图标颜色不符合需求，响应式布局的媒体查询存在冲突定义，基础版的价格结构与其他版本不一致可能导致功能异常。建议在修复交互逻辑错误、统一价格DOM结构、优化响应式断点设计后，可达到更高的产品级水准。

相关链接

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

加载中...
100%