doubao-seed-2-0-mini 在「电商促销页」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-0-mini
  • 用例名称：电商促销页
  • 测试类型：网页生成
  • 评测维度：落地页

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建电商活动页面。 输出要求： 1. 所有代码（HTML、CSS、JavaScript）必须合并在单个 HTML 文件中，可直接在浏览器运行，无需任何外部依赖。 2. 使用语义化 HTML 标签（header、section、footer 等）组织页面结构，层次清晰。 3. 使用 CSS Flexbox 或 Grid 实现布局，页面在桌面端（≥768px）和移动端（<768px）均需正常显示。 4. JavaScript 逻辑简洁直接，优先使用原生 DOM 操作实现倒计时、点击事件等基础交互。 5. 视觉风格简洁美观，配色以红色/橙色系为主，符合双11促销氛围，不追求复杂动效。 6. 直接输出完整 HTML 代码，不附加任何解释说明。

用户提示词（User Prompt）

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

请生成一个「双11 狂欢购物节」电商促销活动页面，所有代码写在单个 HTML 文件中，可直接在浏览器运行。 ## 页面结构要求 ### 1. 活动横幅（Banner） - 显示活动主题：「双11 狂欢购物节」 - 包含倒计时模块，精确到秒（时:分:秒），目标时间设为距当前时间 3 天后 - 红色/橙色渐变背景，视觉突出 ### 2. 优惠券领取区 - 展示 3 张优惠券： - 满100减20 - 满300减50 - 满500减100 - 每张优惠券有「立即领取」按钮 - 点击后按钮文字变为「已领取」，并禁用按钮，防止重复点击 - 点击时有简单的视觉反馈（如按钮颜色变化） ### 3. 限时秒杀区 - 展示 4 个商品卡片，每张卡片包含： - 商品名称（自拟，如「无线蓝牙耳机」） - 用色块或占位符代替商品图片 - 原价（划线显示）与现价（红色突出显示） - 库存进度条（显示已售百分比，如「已售 70%」） - 独立倒计时（精确到秒） - 4 个卡片使用 Grid 或 Flex 横向排列，移动端换行 ### 4. 爆款商品区 - 商品网格布局：桌面端 2 列 × 4 行，共 8 个商品 - 每个商品卡片包含： - 用色块或占位符代替商品图片 - 商品名称 - 价格 - 至少一个标签（如「热销」」新品」「限量」） - 移动端调整为 2 列布局 ### 5. 活动规则（折叠面板） - 点击标题可展开/收起规则内容 - 默认收起状态 - 包含 3～5 条示例规则文字 ### 6. 分享按钮 - 展示微信、微博两个分享按钮（可用文字+emoji 图标代替 SVG） - 点击后弹出 alert 提示「分享成功」 ### 7. 返回顶部按钮 - 默认隐藏 - 页面向下滚动超过 300px 时显示 - 点击后平滑滚动回顶部 ## 技术要求 - 使用语义化 HTML 标签 - CSS 使用 Flexbox/Grid 实现响应式布局，媒体查询断点设为 768px - JavaScript 使用原生 DOM，实现倒计时（setInterval）、优惠券领取状态管理、折叠面板、滚动监听 - 配色以红色（#e63946）、橙色（#f4a261）为主色调，背景白色或浅灰

任务要求

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

  1. 【结构完整性】页面包含全部 7 个指定模块（横幅、优惠券、秒杀、爆款商品、活动规则、分享按钮、返回顶部），且各模块内容符合规格描述。
  2. 【倒计时逻辑】横幅倒计时与秒杀区倒计时均使用 setInterval 正确实现，能实时更新显示，不出现 NaN 或负数等异常。
  3. 【优惠券交互】点击「立即领取」后按钮状态正确切换为」已领取」并禁用，不可重复触发，且三张券状态相互独立。
  4. 【折叠面板交互】活动规则面板默认收起，点击标题后正确切换展开/收起状态，逻辑无误。
  5. 【响应式布局】页面在桌面端（≥768px）和移动端（<768px）均布局正常，爆款商品区在两种尺寸下均呈现 2 列网格，秒杀卡片在移动端正确换行。
  6. 【视觉规范性】整体配色符合促销氛围（红/橙主色调），各模块有明确的视觉分区，商品图片缺失时使用色块占位，页面无明显错位或溢出。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 双11狂欢购物节 * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", sans-serif; } body { background-color: #f8f9fa; color: #333; } /* 活动横幅 */ .banner { background: linear-gradient(90deg, #e63946, #f4a261); color: white; padding: 2rem 1rem; text-align: center; } .banner h1 { font-size: 2rem; margin-bottom: 1rem; } .countdown { font-size: 1.5rem; font-weight: bold; } /* 优惠券区域 */ .coupon-section { padding: 2rem 1rem; max-width: 1200px; margin: 0 auto; } .coupon-container { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .coupon-card { background: white; padding: 1.5rem; border-radius: 8px; border-left: 5px solid #e63946; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } .coupon-info h3 { color: #e63946; margin-bottom: 0.5rem; } .coupon-btn { padding: 0.5rem 1.5rem; border: none; border-radius: 4px; background: #e63946; color: white; cursor: pointer; transition: all 0.3s; } .coupon-btn:disabled { background: #ccc; cursor: not-allowed; } /* 限时秒杀区 */ .seckill-section { padding: 2rem 1rem; max-width: 1200px; margin: 0 auto; } .seckill-section h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; color: #e63946; } .seckill-container { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .seckill-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1rem; } .product-img { width: 100%; height: 180px; background: #f4a261; border-radius: 4px; margin-bottom: 1rem; } .product-name { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem; } .product-price { margin: 0.5rem 0; } .original-price { text-decoration: line-through; color: #999; margin-right: 0.5rem; } .current-price { color: #e63946; font-size: 1.2rem; font-weight: bold; } .stock-progress { width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden;...

AI 评审点评

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

【CLAUDE】该输出因被截断而严重不完整，仅输出了约60%的HTML/CSS结构，JavaScript逻辑和后3个功能模块完全缺失。已完成部分的视觉设计和CSS质量尚可，配色符合双11促销氛围，响应式布局思路正确。但由于核心交互功能（倒计时、优惠券领取、折叠面板、返回顶部）全部未实现，页面实际上无法正常运行，整体评分偏低。 【GEMINI】模型生成的页面在视觉布局和 HTML/CSS 结构上表现良好，符合设计要求。但由于输出长度限制，代码在关键的 JavaScript 逻辑部分被截断，导致页面无法实现任何交互功能，且 HTML 标签未闭合，属于未完成的交付物。 【KIMI】该候选输出在视觉设计和基础布局方面表现良好，配色符合促销氛围，响应式结构正确。但功能实现存在关键缺陷：秒杀区倒计时逻辑完全缺失，优惠券状态切换不完整，且代码末尾截断导致多个模块的交互逻辑无法验证。建议补充完整的JavaScript实现，特别是倒计时setInterval、优惠券状态管理和折叠面板交互逻辑，以确保页面功能完整可用。

进阶难度评测结果

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

模型生成产物

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

```html 双11狂欢购物节 * { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", "Microsoft Yahei", sans-serif; } :root { --primary: #FF4444; --secondary: #FFD700; --accent: #FF6B35; --dark: #333; --light: #f8f9fa; } body { color: var(--dark); line-height: 1.6; overflow-x: hidden; } /* 全局动画类 */ .fade-in-up { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .fade-in-up.active { opacity: 1; transform: translateY(0); } /* 翻牌动画 */ .flip-card { position: relative; width: 60px; height: 80px; perspective: 1000px; } .flip-inner { position: absolute; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .flip-card.flip .flip-inner { transform: rotateX(180deg); } .flip-front, .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .flip-back { transform: rotateX(180deg); } /* 按钮抖动动画 */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .shake { animation: shake 0.5s ease-in-out; } /* 撒花动画 */ .confetti { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: confettiFall 1s forwards; z-index: 9999; } @keyframes confettiFall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(calc((Math.random() - 0.5) * 100px), 100px) rotate(360deg); opacity: 0; } } /* Toast提示 */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(0, 0, 0, 0.8); color: white; padding: 0.8rem 1.5rem; border-radius: 4px; opacity: 0; transition: all 0.3s ease; z-index: 9999; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /*...

AI 评审点评

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

【CLAUDE】候选输出严重不完整，代码在 CSS 中途截断，JavaScript 部分完全缺失，导致所有核心交互功能（倒计时、轮播、优惠券领取、库存更新、折叠面板、懒加载等）均无法运行。已输出的 HTML 结构和 CSS 样式具备一定的框架基础，色调设计符合红金系要求，但存在 confettiFall 动画中 CSS calc 误用 Math.random() 的明显技术错误。整体而言，该输出无法作为可独立运行的 HTML 页面，与任务要求差距极大。 【GEMINI】模型生成的代码在视觉设计和技术选型上表现良好，符合电商落地页的专业要求。遗憾的是，输出在代码中途被截断，导致核心的 JavaScript 交互逻辑、秒杀倒计时功能及部分组件（如折叠面板、返回顶部）的实现代码缺失，无法直接运行使用。建议在生成长代码时注意 Token 限制，确保输出的完整性。 【KIMI】该候选输出因被截断导致无法完整评估，但从已有代码可见开发者具备基本的前端开发能力，能够实现较为规范的 HTML 结构和 CSS 样式。主要问题包括：1）输出不完整，核心 JavaScript 逻辑缺失；2）存在 CSS 语法错误（Math.random 不能在 CSS 中使用）；3）部分高级功能（防抖、多倒计时管理）的实现无法验证。建议完整输出代码并修复 CSS 动画中的动态值问题，使用 CSS 变量或预定义的关键帧替代随机计算。

困难难度评测结果

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

模型生成产物

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

```html 双11狂欢购物节 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background-color: #1a0a00; color: #fff; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .section { min-height: 100vh; padding: 80px 0; display: none; } .section.active { display: block; } /* 导航栏 */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.8); z-index: 999; padding: 1rem 0; } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 2rem; padding: 0 20px; flex-wrap: wrap; } .nav-link { color: #fff; text-decoration: none; font-size: 1.1rem; transition: color 0.3s; } .nav-link.active { color: #FFD700; border-bottom: 2px solid #FFD700; } /* Hero区域 */ .hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } #particleCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; } .hero-title { font-size: 3.5rem; font-weight: 900; color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.5); margin-bottom: 2rem; transform: perspective(800px) rotateX(-10deg); animation: titleFlip 1.5s ease-out forwards; } @keyframes titleFlip { from { transform: perspective(800px) rotateX(-90deg); opacity: 0; } to { transform: perspective(800px) rotateX(0deg); opacity: 1; } } .countdown { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; } .flip-card { width: 80px; height: 100px; position: relative; perspective: 1000px; } .flip-card-inner { position: absolute; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .flip-card.flip .flip-card-inner { transform: rotateX(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: #CC0000; border-radius:...

AI 评审点评

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

【CLAUDE】该候选输出为严重截断的不完整代码，HTML/CSS部分约完成60-70%，但JavaScript核心逻辑几乎完全缺失。页面骨架和视觉样式设计思路正确，主色调、布局结构、CSS动画定义均符合要求，但由于代码被截断，Canvas粒子系统、Web Audio API音效、Hash路由、localStorage/sessionStorage持久化、库存动态模拟、IntersectionObserver等所有JS驱动的核心功能均无法运行。这是一个「有设计无实现」的半成品，无法作为可独立运行的HTML文件使用，综合评分极低。 【GEMINI】该模型未能完成任务要求，输出的 HTML 代码在关键逻辑部分被截断，导致无法运行。缺失了绝大部分核心功能（如 Web Audio API 音效、视差滚动、路由管理、秒杀逻辑等），无法达到 Hard 级别的技术要求。 【KIMI】该候选输出为严重截断的不完整代码，在coupon-card的HTML结构处中断，导致约40-50%的核心JavaScript逻辑完全缺失。从可评估的部分来看，开发者具备CSS 3D变换和基础页面结构的能力，但Canvas粒子系统、Web Audio API音效合成、IntersectionObserver懒加载等关键技术特性均未在可见代码中完整实现。由于截断位置恰好位于技术实现的核心区域（优惠券领取按钮事件绑定之前），无法验证localStorage持久化、音效触发、粒子动画等Hard级别关键功能。建议要求补全完整代码后重新评估，当前状态不符合可运行单文件应用的要求。

相关链接

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

加载中...
100%