doubao-seed-2-0-code 在「全渠道联系方式信息页」的评测结果
这是该 AI 模型在此测试用例上的详细评测结果。
基本信息
- 模型名称：doubao-seed-2-0-code
- 用例名称：全渠道联系方式信息页
- 测试类型：网页生成
- 评测维度：AI 生成单页 PPT
系统提示词（System Prompt）
这是给 AI 模型的背景设定和角色指令：
你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释
用户提示词（User Prompt）
这是用户给 AI 模型的具体任务要求：
创建一个全渠道联系方式信息页面。 功能要求： 1. 页面底部横向排列社交媒体图标及账号名称，包含微信、微博、LinkedIn 三个平台 2. 页面中心位置展示一个二维码图片（可用占位图代替），二维码下方标注说明文字 3. 页面右侧区域显示公司地址和联系电话 4. 整体布局整齐，内容清晰易读
任务要求
AI 模型需要满足以下要求：
- 底部包含微信、微博、LinkedIn 三个社交媒体图标及账号名称
- 中心区域展示二维码（可用占位图）及说明文字
- 右侧展示公司地址和联系电话
- 整体布局整齐，内容清晰
- 代码在单个 HTML 文件中
评测结果
综合得分
该模型在此用例的得分为：88.5 分（满分 100 分），已通过
基础难度评测结果
- 得分：88.5 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
联系我们 - 全渠道联系方式 tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', accent: '#F59E0B', dark: '#1F2937', light: '#F9FAFB' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } @layer utilities { .content-auto { content-visibility: auto; } .social-icon { @apply transition-all duration-300 hover:scale-110 hover:-translate-y-1; } .card-hover { @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1; } } 联系我们 我们期待与您建立联系 扫码关注我们的微信公众号 联系信息 公司地址 北京市朝阳区建国路88号现代商务大厦25层 联系电话 +86 10 8888 8888工作时间: 周一至周五 9:00-18:00 关注我们 @我们的微信公众号 @我们的官方微博 关注我们的LinkedIn © 2025 公司名称. 保留所有权利. // 添加滚动动画 document.addEventListener('DOMContentLoaded', function() { // 页面加载完成后的动画效果 const mainContent = document.querySelector('main'); mainContent.style.opacity = '0'; mainContent.style.transform = 'translateY(20px)'; setTimeout(() => { mainContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; mainContent.style.opacity = '1'; mainContent.style.transform = 'translateY(0)'; }, 100); // 社交媒体图标添加点击效果 const socialIcons = document.querySelectorAll('.social-icon'); socialIcons.forEach(icon => { icon.addEventListener('click', function(e) { e.preventDefault(); this.classList.add('animate-pulse'); setTimeout(() => { this.classList.remove('animate-pulse'); }, 600); // 在实际项目中，这里可以添加跳转逻辑 console.log('社交平台链接被点击'); }); }); });
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果整体质量较高，功能要求基本全部实现，代码结构清晰，使用 Tailwind CSS 和 Font Awesome 构建了一个视觉美观的联系页面。三个社交媒体平台图标与账号名称完整，底部排列整齐；联系信息（地址+电话）展示清晰；二维码区域有占位图和说明文字。主要不足在于：布局上二维码并非严格居中（与联系信息并排），而是左右平分主区域，与需求「页面中心位置」略有差异；占位图使用随机照片而非二维码样式图片，视觉上稍显不符。总体而言是一个完成度较高、视觉效果良好的实现。 【GEMINI】这是一份高质量的交付结果。模型不仅准确地实现了所有功能性要求，还在视觉美化和响应式布局上做了额外优化，使用了 Font Awesome 图标库和 Tailwind CSS，使得生成的页面既美观又实用，完全符合前端工程师的专业水准。 【KIMI】该生成结果整体质量较高，内容完整性和视觉清晰度表现优秀，但布局结构存在关键偏差——联系信息与二维码的位置关系与提示词要求相反（应为二维码居中、联系信息在右，实际为联系信息在左、二维码在右）。建议修正order属性或调整flex布局方向以符合原始需求。代码结构清晰，注释适当，交互效果丰富，适合作为企业联系页面使用。
进阶难度评测结果
- 得分：87.9 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
联系我们 - 全渠道联系方式 tailwind.config = { theme: { extend: { colors: { primary: '#165DFF', secondary: '#36D399', accent: '#FB923C', neutral: '#F1F5F9', dark: '#1E293B', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, }, } } @layer utilities { .content-auto { content-visibility: auto; } .qr-watermark { position: relative; } .qr-watermark::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; background-image: url('https://picsum.photos/id/28/200'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.2; z-index: -1; } .social-icon { transition: transform 0.3s ease, box-shadow 0.3s ease; } .social-icon:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .gradient-bg { background: linear-gradient(135deg, #165DFF 0%, #0A2463 100%); } } 联系我们 扫描二维码或通过以下方式与我们取得联系 未来科技有限公司 创新科技，引领未来 www.futuretech.com 扫码关注 关注我们的官方公众号 联系信息 公司地址 北京市海淀区中关村科技园区创新大厦A座18层 联系电话 400-888-8888 010-12345678 电子邮箱 contact@futuretech.com 关注我们的社交媒体 微信 FutureTech_Official 微博 @未来科技官方 LinkedIn Future Tech 抖音 @未来科技 © 2024 未来科技有限公司 版权所有 // 添加一些简单的交互效果 document.addEventListener('DOMContentLoaded', () => { // 平滑滚动效果 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // 为卡片添加进入动画 const cards = document.querySelectorAll('.social-icon, .grid > div'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-fadeIn'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); cards.forEach(card => { observer.observe(card); }); });
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果整体质量较好，三栏布局结构清晰，四个社交平台信息完整且有品牌色区分，配色统一专业，具备良好的视觉现代感。主要不足在于：二维码 Logo 水印因 z-index 设置错误未能正确显示；抖音图标使用音乐符号替代，辨识度不足；页面整体较长，对投影展示场景的适配性有待提升。代码质量较高，使用 Tailwind CSS 和 Font Awesome 实现了响应式设计和交互动效，工程规范性良好。 【GEMINI】这是一个非常优秀的前端实现。模型不仅严格遵守了所有的布局和内容指令，还通过 Tailwind CSS 和 Font Awesome 提升了页面的专业感。代码结构清晰，视觉效果出众，完全满足「适合投影展示或打印」的用户需求。 【KIMI】该生成结果整体质量较高，完整实现了三栏布局与底部社交媒体栏的结构要求，内容齐全，视觉设计专业现代，配色统一且适合会议展览场合展示。主要改进点在于二维码水印的实现方式需要更清晰可见，以及抖音图标的品牌识别度可以更强。代码结构清晰，使用了Tailwind CSS和Font Awesome，响应式设计良好。
困难难度评测结果
- 得分：78.9 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
联系我们 - 专业联系方式展示 tailwind.config = { theme: { extend: { colors: { primary: '#0F3460', secondary: '#533483', accent: '#E94560', neutral: '#F5F5F5', dark: '#1A1A2E', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, }, } } @layer utilities { .content-auto { content-visibility: auto; } .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .qr-container { position: relative; display: inline-block; } .qr-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24%; height: 24%; background-color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .social-icon { transition: transform 0.2s ease, color 0.2s ease; } .social-icon:hover { transform: scale(1.2); } } 创新科技有限公司 Innovation Technology Co., Ltd. 创新引领未来 · 科技改变生活 IT LOGO 公司简介 创新科技有限公司成立于2010年，是一家专注于人工智能与物联网解决方案的高科技企业。 我们致力于为企业提供智能化转型服务，通过技术创新驱动商业价值提升。 扫码关注我们 {Array.from({ length: 64 }).map((_, i) => ( 0.5 ? 'bg-dark' : 'bg-white'} rounded-sm`}> ))} IT 扫码关注官方账号 获取最新产品资讯与行业动态 联系我们 公司地址 北京市海淀区中关村科技园区 创新大厦A座18层 联系电话 +86 10 8888 8888 +86 138 8888 8888 官方邮箱 contact@innovationtech.com support@innovationtech.com 微信 @创新科技 微博 @创新科技官方 LinkedIn Innovation Tech 抖音 @创新科技 Twitter/X @InnovationTech © 2025 创新科技有限公司 版权所有 页面更新日期：2025年8月15日 @media print { /* 隐藏不必要的元素，调整颜色以适应打印 */ body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .card-hover:hover { transform: none !important; box-shadow: none !important; } .social-icon:hover { transform: none !important; } footer { background-color: #0F3460 !important; } /* 确保二维码和图标能够打印 */ .qr-logo, .bg-primary\/10 { background-color: #f0f0f0 !important; } }
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果整体框架设计合理，商务风格配色专业，布局结构基本符合需求。但存在一个严重的技术错误：二维码图案部分使用了React/JSX语法（Array.from + .map + className），在纯HTML文件中完全无法执行，导致页面核心功能——二维码展示区域——实际上无法渲染，只显示空白背景。这对于一个以「扫码获取信息」为核心功能的展览页面来说是致命缺陷。此外，页面依赖外部CDN（Tailwind CSS、Font Awesome），在展览等可能无网络的场合存在风险。如果修复JSX语法问题（改用纯CSS/SVG或canvas生成二维码占位图），并将样式内联，整体质量将显著提升。 【GEMINI】这是一份高质量的前端代码实现，视觉风格非常契合「正式展览」的业务场景。页面布局严谨，CSS 运用熟练，打印优化和交互细节处理得当。美中不足的是在 HTML 静态模板中混入了部分 JavaScript 逻辑代码（二维码占位部分），导致该区块在无编译环境下无法直接呈现图案，但整体逻辑和设计水平极高。 【KIMI】该生成结果整体结构完整，视觉设计专业，配色方案和商务风格符合正式场合需求。但存在关键缺陷：二维码区域错误使用React JSX语法导致无法渲染，严重影响核心功能；部分社交图标（抖音、Twitter/X）使用替代图标而非品牌标准标识，影响品牌一致性。打印优化和响应式适配基本达标，但细节处理（如A4边距、投影比例适配）有待完善。建议修复二维码实现方式（使用Canvas或SVG生成真实二维码），并更新社交图标为品牌标准版本。
相关链接
您可以通过以下链接查看更多相关内容：
