qwen3.5-omni-plus 在「全渠道联系方式信息页」的评测结果

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

基本信息

  • 模型名称：qwen3.5-omni-plus
  • 用例名称：全渠道联系方式信息页
  • 测试类型：网页生成
  • 评测维度：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.0 分（满分 100 分），已通过

基础难度评测结果

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

模型生成产物

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

这是一个符合你要求的全渠道联系方式页面。 作为一个资深前端开发者，我采用了以下最佳实践： 1. **语义化 HTML5**：使用 ``, ``, `` 等标签增强可读性。 2. **Flexbox 布局**：用于实现响应式的居中布局和底部对齐。 3. **CSS 变量**：方便统一管理主题颜色。 4. **SVG 图标**：直接内联 SVG 代码，无需引入外部字体库或图片资源，加载速度快且清晰度高。 5. **响应式设计**：在移动端会自动调整布局（右侧信息栏会移至二维码下方），保证手机端的阅读体验。 你可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。 ```html 联系我们 - 全渠道支持 /* --- CSS 变量定义 (方便维护主题色) --- */ :root { --primary-color: #2c3e50; /* 主标题颜色 */ --accent-color: #3498db; /* 强调色/链接色 */ --bg-color: #f4f7f6; /* 背景色 */ --card-bg: #ffffff; /* 卡片背景 */ --text-secondary: #7f8c8d; /* 次要文字颜色 */ --border-radius: 12px; /* 圆角 */ --shadow: 0 10px 25px rgba(0,0,0,0.05); /* 柔和阴影 */ /* 品牌色 */ --wechat-color: #07c160; --weibo-color: #e6162d; --linkedin-color: #0077b5; } /* --- 全局重置 --- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--primary-color); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } /* --- 主容器卡片 --- */ .contact-card { background: var(--card-bg); width: 100%; max-width: 900px; border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: row; /* 默认横向排列 */ min-height: 500px; } /* --- 左侧区域：二维码 --- */ .qr-section { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); border-right: 1px solid #eee; } .qr-image-wrapper { position: relative; padding: 15px; background: white; border-radius: var(--border-radius); box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 20px; } .qr-image { width: 220px; height: 220px; display: block; object-fit: contain; } .qr-caption { font-size: 1rem; color: var(--text-secondary); text-align: center; margin-top: 10px; } .qr-highlight { color: var(--accent-color); font-weight: bold; } /* --- 右侧区域：联系信息 --- */...

AI 评审点评

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

【CLAUDE】代码实现质量较高，视觉设计专业，内容完整，但核心问题在于布局结构与需求不完全匹配。需求要求二维码居中、社交媒体在页面底部，而实际采用了左右分栏的布局方案，导致二维码偏左且社交媒体仅在右侧区域底部而非全局底部。若调整为上中下三段式布局（顶部或中上为二维码居中、右侧浮动联系信息、底部横向社交媒体栏）会更符合需求描述。

进阶难度评测结果

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

模型生成产物

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

这是一个为您定制的单页 HTML 应用。它完全符合您的布局要求，采用了现代、专业的商务风格设计，非常适合在会议大屏展示或打印成传单。 ### 设计亮点： 1. **响应式三栏布局**：完美适配宽屏投影和 A4 纸张打印。 2. **视觉层级清晰**：左侧品牌、中间核心（二维码）、右侧联系信息，底部社交矩阵。 3. **打印优化**：内置 `@media print` 样式，确保打印时背景色、边框和布局与屏幕显示一致，不会出现分页截断。 4. **无外部依赖**：所有图标使用内联 SVG，无需联网加载字体或图片，保证在任何环境下都能稳定显示。 您可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。 ```html 联系我们 | Contact Us /* --- 全局变量与重置 --- */ :root { --primary-color: #0f172a; /*以此深蓝为主色调，显得专业稳重*/ --accent-color: #3b82f6; /* 亮蓝作为点缀 */ --text-main: #334155; --text-light: #64748b; --bg-color: #f8fafc; --card-bg: #ffffff; --border-color: #e2e8f0; /* 社交媒体品牌色 */ --wechat-color: #07C160; --weibo-color: #E6162D; --linkedin-color: #0A66C2; --douyin-color: #000000; /* 抖音通常用黑白或霓虹渐变，这里用深色代表 */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } /* --- 主容器 (模拟 A4 或 幻灯片比例) --- */ .container { width: 100%; max-width: 1200px; /* 适合宽屏展示 */ background: var(--card-bg); border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* --- 顶部装饰条 --- */ .top-bar { height: 8px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); width: 100%; } /* --- 主体内容区 (三栏布局) --- */ .main-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding: 60px 40px; align-items: center; flex: 1; } /* 左栏：品牌 */ .brand-section { text-align: left; border-right: 1px solid var(--border-color); padding-right: 40px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .logo-placeholder { width: 80px; height: 80px; background: var(--primary-color); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center;...

AI 评审点评

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

【CLAUDE】这是一个高质量的全渠道联系方式展示页面，完全满足会议展览场景需求。代码结构清晰，采用现代化的 CSS 布局技术，所有内容完整呈现且无外部依赖。三栏布局精准实现，底部社交媒体栏信息齐全且有良好的视觉区分。配色专业统一，二维码区域装饰得当。特别值得称赞的是打印优化和响应式设计，确保在不同场景下都能良好展示。唯一可改进之处是部分社交平台图标可以更贴近官方设计，但这不影响整体的专业性和实用性。

困难难度评测结果

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

模型生成产物

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

这是一个为您定制的专业级全渠道联系方式展示页面。 **设计亮点：** 1. **响应式布局**：完美适配 16:9 投影、A4 打印（自动分页优化）及移动端竖屏查看。 2. **纯 CSS 二维码水印**：无需图片处理，利用 CSS `mask` 或伪元素实现二维码中心叠加 Logo 效果。 3. **商务配色**：采用深海蓝（专业）、纯白（背景）与活力橙（强调色）的经典组合。 4. **打印优化**：内置 `@media print`，确保打印时去除阴影、调整字体大小并隐藏不必要的装饰，节省墨水且清晰易读。 您可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。 ```html 联系我们 | Contact Us /* --- 全局变量与重置 --- */ :root { --primary-color: #0f172a; /* 深海蓝 - 商务主色 */ --accent-color: #f59e0b; /* 琥珀橙 - 强调色 */ --bg-color: #f8fafc; /* 浅灰蓝 - 背景 */ --card-bg: #ffffff; /* 纯白 - 卡片 */ --text-main: #334155; /* 深灰 - 正文 */ --text-light: #64748b; /* 中灰 - 辅助文字 */ --border-radius: 12px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); --font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } /* --- 主容器 (模拟 A4/幻灯片比例) --- */ .container { width: 100%; max-width: 1200px; /* 适合宽屏投影 */ background: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* --- 顶部区域 --- */ header { text-align: center; padding: 30px 40px 20px; border-bottom: 1px solid #e2e8f0; position: relative; } /* 品牌色条带 */ header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%); } .company-name-cn { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); letter-spacing: 2px; margin-bottom: 5px; } .company-name-en { font-size: 1.2rem; font-weight: 500; color: var(--text-light); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 15px; } .slogan { font-size: 1rem; color:...

AI 评审点评

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

【CLAUDE】这是一个高质量的专业级联系方式展示页面实现。代码结构清晰，使用现代 CSS（Grid、Flexbox、CSS 变量）实现精准布局，所有必需元素齐全且严格对齐。视觉设计专业，配色克制，商务风格一致性强。交互动效优雅流畅，打印优化与响应式适配完善，完全符合展览、会议等正式场合的使用需求。主要改进空间：二维码与 Logo 使用了占位符，实际部署时需替换为真实资源。整体完成度高，可直接用于生产环境。

相关链接

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

加载中...
100%