grok-4.6 在「全渠道联系方式信息页」的评测结果

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

基本信息

  • 模型名称：grok-4.6
  • 用例名称：全渠道联系方式信息页
  • 测试类型：网页生成
  • 评测维度：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 联系我们 · 云启科技 /* ======================================== 基础重置与设计变量 ======================================== */ :root { --bg-start: #eef2f6; --bg-end: #d9e2ec; --surface: #ffffff; --ink: #1b2838; --ink-soft: #5a6a7a; --line: #e4ebf2; --accent: #1f6feb; --accent-deep: #1248a8; --wechat: #07c160; --weibo: #e6162d; --linkedin: #0a66c2; --shadow: 0 18px 50px rgba(27, 40, 56, 0.08); --radius: 20px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; color: var(--ink); background: radial-gradient(1200px 600px at 10% -10%, #ffffff 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, #d7e6ff 0%, transparent 50%), linear-gradient(160deg, var(--bg-start), var(--bg-end)); min-height: 100vh; display: flex; flex-direction: column; } /* ======================================== 页面骨架：顶栏 + 主内容 + 底栏 ======================================== */ .page { flex: 1; display: flex; flex-direction: column; max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px 28px 20px; } /* 顶栏 */ header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .brand { display: flex; align-items: center; gap: 14px; } .logo { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(145deg, #1f6feb, #0b3d91); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: 1px; box-shadow: 0 10px 24px rgba(31, 111, 235, 0.28); } .brand h1 { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; } .brand p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .header-tag { font-size: 13px; color: var(--accent-deep); background: #e8f1ff; border: 1px solid #cfe0ff; padding: 6px 12px; border-radius: 999px; } /* ======================================== 主区域：中心二维码 + 右侧联系信息 ======================================== */ .main { flex: 1; display: grid; grid-template-columns: 1fr...

AI 评审点评

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

【CLAUDE】这是一份高质量的全渠道联系方式页面实现。代码结构清晰，注释完整，CSS变量管理规范，完全满足功能需求的同时在视觉设计上有较高水准。三栏布局合理实现了页面各区域的定位要求，所有内容元素齐全，视觉设计专业整洁。微信无公开网页的交互处理（点击显示账号提示）和二维码加载失败的容错处理体现了工程质量意识。唯一轻微不足是左侧intro区域占据了布局空间但属于额外补充内容，略微让页面显得元素更多，但整体不影响核心功能的正确呈现。 【GEMINI】这是一份极其优秀的单页 HTML 实现。不仅完全满足了所有功能与布局要求，而且在视觉设计、响应式适配以及交互细节（如复制功能、Toast 提示、二维码加载失败兜底等）上都展现出了极高的专业前端开发水平，堪称完美。 【KIMI】该输出是一份高质量的全渠道联系方式页面实现，严格满足所有功能要求并超出预期。布局采用三栏Grid精准对应题目空间描述，内容完整无遗漏，视觉设计专业且具备商业落地水准。额外增加的复制按钮、加载兜底、响应式适配、无障碍属性（aria-label）等细节体现了工程化思维，适合直接作为企业宣传物料使用。

进阶难度评测结果

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

模型生成产物

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

下面是一份可直接保存为 `.html` 打开的全渠道联系页：三栏主视觉 + 底部社交栏，配色按「墨海军 + 古董金 + 暖纸白」设计，适合投影、打印和现场拍照。二维码使用高容错生成并叠公司 Logo 水印；无网络时会自动切换为本地绘制样式，页面可单文件离线使用。 将内容保存为 `contact.html` 后，改顶部 `BRAND` 配置即可替换品牌、地址、社交账号与扫码链接。 ```html 观澜智联 · 全渠道联系方式 :root { --ink: #12263a; --ink-soft: #1b365d; --gold: #c4a35a; --gold-bright: #d4bc7a; --gold-deep: #8d6b2b; --cream: #f6f1e7; --paper: #fbf8f3; --line: #d9cdb8; --muted: #6b6255; --text: #1a2433; --wechat: #07c160; --weibo: #e6162d; --linkedin: #0a66c2; --douyin-a: #25f4ee; --douyin-b: #fe2c55; --shadow: 0 18px 50px rgba(18, 38, 58, 0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: #e8dfd0; color: var(--text); font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; display: grid; place-items: center; padding: clamp(10px, 1.6vw, 24px); } .stage { width: min(1600px, 100%); height: min(900px, calc(100vh - 20px)); background: radial-gradient(circle at 12% 18%, rgba(196, 163, 90, 0.08), transparent 28%), radial-gradient(circle at 88% 80%, rgba(27, 54, 93, 0.05), transparent 26%), var(--paper); border: 1px solid rgba(196, 163, 90, 0.45); box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; overflow: hidden; } .stage::before, .stage::after { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2; } .stage::before { border: 1px solid rgba(196, 163, 90, 0.35); } .stage::after { inset: 14px; border: 1px solid rgba(18, 38, 58, 0.08); } .ornament { position: absolute; width: 72px; height: 72px; z-index: 3; color: var(--gold); opacity: 0.85; } .ornament svg { width: 100%; height: 100%; display: block; } .ornament-tl { top: 18px; left: 18px; } .ornament-tr { top: 18px; right: 18px; transform: scaleX(-1); } .ornament-bl { bottom: 18px; left: 18px; transform: scaleY(-1); } .ornament-br { bottom: 18px; right: 18px; transform: scale(-1); } .sheet { flex: 1; display: flex;...

AI 评审点评

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

【CLAUDE】这是一份高质量的全渠道联系方式展示页面，完整实现了所有功能要求。三栏布局结构清晰，底部社交媒体栏设计精良，配色方案专业统一。代码质量优秀，使用CSS变量管理主题色，具备响应式设计和打印优化，二维码支持在线加载和离线降级两种模式，工程实用性强。整体视觉风格高端典雅，适合会议展览场合展示，是一份接近生产级别的交付物。 【GEMINI】这是一份极其优秀的网页设计与代码实现。不仅完全满足了所有布局、内容和视觉上的要求，还在视觉美感、排版细节、响应式适配以及代码健壮性（如二维码的Fallback机制）上做出了远超预期的专业发挥。整体设计典雅大气，非常符合会议、展览等线下大屏投影或打印展示的场景需求。 【KIMI】该输出是一份极为专业的前端代码实现，完全满足了会议/展览场景展示的所有要求。三栏布局结构清晰、对齐精准，内容完整无遗漏，视觉设计兼具品牌质感与平台辨识度。特别值得肯定的是：二维码的双保险渲染机制（在线CDN+离线回退）、可配置的BRAND对象、打印和响应式适配、以及精致的装饰细节（角花、渐变分隔线、多层边框）。整体代码质量高，用户体验考虑周全，非常适合投影展示和现场拍照留存。

困难难度评测结果

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

模型生成产物

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

```html 华曜集团 · 官方联系方式 | HUAYAO GROUP :root { --ink: #0D1B2A; --ink-soft: #243044; --gold: #B8956C; --gold-bright: #D4B896; --gold-dim: rgba(184, 149, 108, 0.28); --cream: #F3EEE6; --paper: #FBF8F3; --muted: #5A6270; --line: #D9D0C4; --white: #FFFFFF; --shadow: 0 8px 28px rgba(13, 27, 42, 0.08), 0 2px 8px rgba(13, 27, 42, 0.04); --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "PMingLiU", "Palatino Linotype", Palatino, Georgia, serif; --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; --display-en: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; } ::selection { background: rgba(184, 149, 108, 0.3); color: var(--ink); } .stage { min-height: 100vh; min-height: 100dvh; display: flex; align-items: stretch; justify-content: center; padding: clamp(10px, 1.6vw, 28px); } .sheet { width: min(1440px, 100%); min-height: calc(100vh - 2 * clamp(10px, 1.6vw, 28px)); min-height: calc(100dvh - 2 * clamp(10px, 1.6vw, 28px)); background: var(--paper); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 0 1px rgba(184, 149, 108, 0.35), var(--shadow); } .sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold-dim); pointer-events: none; z-index: 2; } /* ===== TOP ===== */ .brand-bar { height: 7px; background: var(--ink); flex-shrink: 0; position: relative; } .brand-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); } .header { text-align: center; padding: clamp(22px, 3.2vh, 40px) clamp(24px, 4vw, 56px) clamp(8px, 1.4vh,...

AI 评审点评

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

【CLAUDE】这是一份质量极高的专业级展览联系方式页面实现。代码架构清晰，CSS变量系统完善，三栏布局精准，视觉设计高度专业。特别亮点包括：自定义JavaScript二维码生成器（含完整QR码结构）、精心设计的三色商务配色体系、多层次的卡片装饰细节、以及完整的响应式+打印+无障碍支持。整体达到了「专业级」的设计标准，适合展览、会议等正式场合使用。主要不足是二维码为伪随机生成无法实际扫描，以及极小屏幕下社交栏布局略有瑕疵，但这些不影响整体高质量的评价。 【GEMINI】这是一份令人惊叹的高质量前端代码。模型不仅完美实现了所有基础需求，还在细节上展现了极高的专业素养，例如使用纯 JS 动态绘制高保真二维码、使用 CSS 变量进行精细的色彩与字体管理、提供完美的响应式重排以及极其专业的打印优化样式。整体设计典雅、结构严谨、交互克制，完全达到了生产级和专业展览演示的标准。 【KIMI】该作品是一份接近生产环境水准的专业级代码实现，展现了深厚的前端工程能力与审美素养。在严格遵循需求规格的同时，通过精致的色彩系统（藏青-金棕-米白）、考究的排版细节（letter-spacing/text-indent的精确控制）、多层嵌套的阴影边框技法，以及完整的响应式/打印/无障碍适配，将'展览会议信息页'的场景需求转化为具有品牌质感的数字物料。二维码采用算法生成而非真实编码是功能性层面的唯一明显短板，但不影响视觉呈现层面的高分评价。整体可作为企业级静态页面开发的参考范例。

相关链接

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

加载中...
100%