doubao-seed-2-0-pro 在「全渠道联系方式信息页」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-0-pro
  • 用例名称：全渠道联系方式信息页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个全渠道联系方式信息页面。 功能要求： 1. 页面底部横向排列社交媒体图标及账号名称，包含微信、微博、LinkedIn 三个平台 2. 页面中心位置展示一个二维码图片（可用占位图代替），二维码下方标注说明文字 3. 页面右侧区域显示公司地址和联系电话 4. 整体布局整齐，内容清晰易读

任务要求

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

  1. 底部包含微信、微博、LinkedIn 三个社交媒体图标及账号名称
  2. 中心区域展示二维码（可用占位图）及说明文字
  3. 右侧展示公司地址和联系电话
  4. 整体布局整齐，内容清晰
  5. 代码在单个 HTML 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 联系我们 - 全渠道联系方式 /* 全局样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f5f7fa; color: #333; line-height: 1.6; } /* 主容器 */ .container { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 5%; max-width: 1200px; margin: 0 auto; } /* 页面标题 */ .page-title { text-align: center; color: #165DFF; font-size: 2.2rem; margin-bottom: 2rem; font-weight: 600; } /* 主内容区 */ .main-content { display: flex; align-items: center; justify-content: center; gap: 4rem; flex-wrap: wrap; margin-bottom: 3rem; } /* 二维码区域 */ .qrcode-section { background-color: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); text-align: center; } .qrcode-img { width: 280px; height: 280px; border-radius: 8px; margin-bottom: 1rem; border: 1px solid #eee; } .qrcode-desc { font-size: 1.1rem; color: #666; font-weight: 500; } /* 联系信息区域 */ .contact-info-section { background-color: #fff; padding: 2rem 3rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); min-width: 300px; } .contact-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 1.15rem; } .contact-item:last-child { margin-bottom: 0; } .contact-item i { font-size: 1.5rem; color: #165DFF; width: 2rem; text-align: center; } /* 社交媒体区域 */ .social-section { background-color: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; } .social-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; color: #333; text-decoration: none; } .social-item:hover { color: #165DFF; transform: translateY(-3px); } .social-item i { font-size: 2rem; } .social-item span { font-size: 0.95rem; font-weight: 500; } /* 微信二维码弹窗 */ .modal {...

AI 评审点评

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

【CLAUDE】该候选输出整体质量较高，完整实现了全渠道联系方式页面的核心功能需求。代码结构清晰，注释完善，CSS和JS均内联在单个HTML文件中。布局采用Flex方案，响应式设计考虑周全。内容涵盖三个社交平台图标与账号、占位二维码及说明文字、公司地址和联系电话，并额外增加了微信弹窗二维码交互功能。视觉设计专业整洁，商务风格统一。主要不足是「右侧区域」的布局实现与需求描述略有差异（居中并排而非固定右侧），以及依赖外部CDN图标库存在可用性风险。 【GEMINI】该模型出色地完成了任务，代码结构清晰，功能实现完整，布局逻辑完全符合要求。不仅满足了基础的排版需求，还通过增加交互式弹窗和响应式设计提升了页面的实用性和专业度。 【KIMI】该生成结果是一份高质量的全渠道联系方式页面实现。整体布局合理，采用现代Flex响应式设计；内容完整覆盖所有功能要求，并额外提供了邮箱和工作时间等实用信息；视觉设计专业整洁，交互细节（微信弹窗、hover动效）考虑周到。 minor不足在于二维码位置并非绝对页面中心，以及部分账号名称为通用描述而非具体名称，但不影响整体实用性。

进阶难度评测结果

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

模型生成产物

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

下面是一个符合要求的全渠道联系方式展示页面，采用专业商务配色，信息清晰醒目，适合投影展示或打印，所有内容可根据实际需求轻松修改： ```html 联系我们 | 企业全渠道联系方式 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif; } :root { --primary: #165DFF; /* 主色调可自定义 */ --border: #e2e8f0; --wechat: #07C160; --weibo: #E6162D; --linkedin: #0A66C2; --tiktok: #000000; } body { background: #ffffff; color: #1e293b; max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; } /* 顶部三栏布局 */ .top-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 3px solid var(--border); align-items: center; } /* 左侧品牌区域 */ .brand-area { text-align: center; } .company-logo { width: 130px; height: 130px; margin: 0 auto 1.5rem; background: var(--primary); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.2rem; font-weight: 700; } .company-name { font-size: 2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.6rem; } .company-slogan { font-size: 1.1rem; color: #64748b; } /* 中间二维码区域 */ .qrcode-area { text-align: center; } .qrcode-box { width: 290px; height: 290px; margin: 0 auto 1.2rem; border: 4px solid var(--primary); border-radius: 18px; padding: 1.2rem; background: #fff; box-shadow: 0 8px 24px rgba(22, 93, 255, 0.12); position: relative; } #qrcode { width: 100%; height: 100%; } .qrcode-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 55px; height: 55px; background: #fff; border: 3px solid var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-size: 0.9rem; } .qrcode-tip { font-size: 1.3rem; font-weight: 600; color: var(--primary); } /* 右侧联系信息区域 */ .contact-area { padding-left: 2.5rem; border-left: 3px solid var(--border); } .contact-item { display: flex; align-items: flex-start; margin-bottom: 1.8rem; font-size: 1.2rem; line-height: 1.7; }...

AI 评审点评

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

【CLAUDE】该生成结果整体质量较高，完整实现了三栏布局与底部社交媒体栏的核心需求，内容覆盖全面，代码结构清晰规范。动态二维码生成、响应式设计和打印适配等细节处理体现了较强的工程素养。主要不足在于社交平台图标使用emoji替代，缺乏品牌识别度，以及底部社交区与主内容区的视觉分隔略显不足。整体而言是一个实用、专业的展示页面，适合会议展览场合使用。 【GEMINI】这是一份高质量的前端代码实现。模型不仅严格遵循了所有的布局和内容指令，还主动引入了 qrcode.js 库来确保二维码的真实生成，并考虑到了打印适配和响应式设计。视觉风格专业且统一，代码结构清晰，易于二次开发。 【KIMI】该生成结果是一份高质量的全渠道联系方式页面，完整实现了三栏布局与底部社交媒体栏的结构要求，内容要素齐全，视觉设计专业现代。代码质量优秀，使用CSS变量便于主题定制，包含打印适配和移动端响应式处理。主要改进空间在于：社交媒体图标建议替换为SVG格式以提升专业度，二维码水印可使用企业Logo图形替代文字，微博图标可选择更具品牌辨识度的设计。整体非常适合会议展览场景使用。

困难难度评测结果

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

模型生成产物

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

### 全渠道联系方式展示页面 以下是符合正式展览/会议场景使用的联系方式单页应用，支持拍照、扫码、打印多场景使用，所有资源内联可直接部署使用： ```html 联系我们 - 企业官方信息页 * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #165DFF; --gray-100: #F5F7FA; --gray-200: #E5E6EB; --gray-600: #4E5969; --gray-800: #1D2129; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--gray-800); min-height: 100vh; display: flex; flex-direction: column; background: #fff; } /* 顶部品牌条 */ .brand-bar { height: 8px; background: var(--primary); width: 100%; } /* 头部区域 */ header { padding: 2rem 1rem; text-align: center; } .company-name { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; } .company-name-en { font-size: 1.2rem; color: var(--gray-600); font-weight: 400; } .slogan { font-size: 1.1rem; color: var(--gray-600); margin-top: 0.5rem; } /* 主内容区域 */ main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; align-items: stretch; } /* 通用卡片样式 */ .card { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 左栏样式 */ .logo-placeholder { width: 180px; height: 180px; border: 2px dashed var(--gray-200); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gray-600); margin-bottom: 1.5rem; font-size: 0.9rem; } .company-desc { font-size: 1rem; color: var(--gray-600); text-align: center; line-height: 1.8; } /* 中栏二维码样式 */ .qr-container { position: relative; width: 240px; height: 240px; margin-bottom: 1.5rem; border-radius: 8px; overflow: hidden; } .qr-code { width: 100%; height: 100%; object-fit: cover; } .qr-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: #fff; padding: 2px; border-radius: 6px; display:...

AI 评审点评

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

【CLAUDE】该生成结果整体质量中等偏上，结构框架完整，商务风格定位准确，CSS技术运用（flexbox/grid/CSS变量/媒体查询）较为熟练。核心功能基本覆盖，但存在一个较严重问题：代码在微博SVG图标处被截断，导致后续LinkedIn、抖音、Twitter/X的图标及HTML结构不完整，影响实际可用性。视觉设计整体专业但缺乏精致感，社交图标未使用品牌色是一个明显遗漏。打印优化和悬停动效实现到位。如果代码完整性问题得到修复，整体评分会有明显提升。 【GEMINI】这是一份高质量的前端代码实现。模型准确理解了「全渠道联系方式」的业务场景，生成的页面布局严谨、视觉风格专业且商务。代码结构清晰，充分利用了现代 CSS 特性，特别是在打印优化和响应式适配方面表现突出，完全符合展览、会议等正式场合的使用需求。 【KIMI】该生成结果整体呈现专业商务风格，配色控制严格，卡片阴影与圆角处理精致，二维码水印效果实现巧妙，打印优化较为完善。主要问题在于代码截断导致社交平台仅完整实现 2/5，严重影响内容完整性；三栏布局的响应式策略与「严格三栏」要求存在偏差，社交栏的均匀排列在宽屏下可能因 auto-fit 而失效。若补全缺失的三个社交平台并优化布局为固定三栏（min-width 限制而非 auto-fit），将显著提升完成度。现有代码作为演示框架合格，但作为可直接部署的正式场合页面需补充完整内容。

相关链接

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

加载中...
100%