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

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

基本信息

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

基础难度评测结果

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

模型生成产物

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

```html 衡宇科技 · 全渠道联络中心 | HengYu Omni-Channel Desk /* ========================================================================== 0. 设计变量 —— 深色"总机台"底色 + 暖纸色面板 + 信号橙强调 ========================================================================== */ :root{ --ink:#0E1114; --ink-2:#141A1F; --ink-3:#1C242A; --paper:#F2EDE3; --paper-2:#E4DDCE; --line:rgba(242,237,227,.14); --line-dark:rgba(14,17,20,.16); --signal:#FF5B22; --jade:#3ECBB0; --brass:#D8A93C; --muted:#8E9AA4; --f-display:'Fraunces','Noto Serif SC',serif; --f-serif:'Noto Serif SC',serif; --f-body:'Noto Sans SC',system-ui,-apple-system,sans-serif; --f-mono:'IBM Plex Mono','Noto Sans SC',ui-monospace,monospace; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--paper); font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} h1,h2,h3{margin:0;font-family:var(--f-serif);font-weight:900;line-height:1.12;letter-spacing:.01em} p{margin:0} ul,ol,dl,dd{margin:0;padding:0;list-style:none} .mono{font-family:var(--f-mono);font-weight:400;letter-spacing:.06em} .wrap{max-width:1260px;margin:0 auto;padding:0 30px} /* 胶片颗粒噪点 */ .grain{ position:fixed;inset:-120px;z-index:900;pointer-events:none;opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 6s steps(6) infinite; } @keyframes grainShift{ 0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(9px,-12px)}...

AI 评审点评

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

【CLAUDE】候选输出是一个工程质量极高的全渠道联系页面，不仅完整覆盖了所有功能需求（底部横向社交图标、中心二维码+说明文字、右侧地址电话），还额外实现了实时北京时间与办公状态灯、Canvas 伪码生成与 PNG 下载、vCard 下载、预约回电表单校验、响应速度动画条、Toast 反馈等丰富交互。代码结构清晰，注释规范，响应式设计完善，可访问性（aria 属性、prefers-reduced-motion）处理得当。主要建议：面向「信息页」场景可适当简化动效密度，提升在浅色/打印场景下的可读性。 【GEMINI】这是一份令人惊叹的高水准前端代码实现。模型不仅完美达成了所有基础功能与布局要求，还在视觉设计、交互体验、功能完整性（如 Canvas 动态二维码生成、vCard 导出、表单校验、一键复制等）上做到了极致，展现了极强的专业前端开发与 UI 设计能力。 【KIMI】该实现远超基础要求，展现了专业级前端工程能力。在功能完备性上，不仅满足所有指定需求，还扩展了实时状态、表单交互、动态二维码生成等高级功能。布局采用经典三栏+底部社交栏结构，响应式设计周全。视觉风格统一且有辨识度，但深色主题+高密度信息对'拍照留存'这一实用场景的友好度略有折扣——二维码和电话等核心信息在复杂装饰中仍保持突出，整体属于优秀水平。

进阶难度评测结果

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

模型生成产物

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

# 全渠道联系方式 · 会展展示页 ```html 澜图科技 · 全渠道联系方式 | Full-Channel Contact Card /* ============================================================ 澜图科技 · 全渠道联络卡 设计基调：深海墨蓝 + 宣纸米白 + 铜金刻度（印刷厂 / 展会视觉） 全部尺寸以 cqi（卡片宽度百分比）驱动 → 任意投影分辨率等比缩放 ============================================================ */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%;margin:0} body{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:var(--stage);color:var(--card-ink); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } /* ---------- 主题变量 ---------- */ :root{ --stage:#07131C; --stage-2:#0E2233; --card-bg:#F6F1E7; --card-ink:#0C1E2C; --muted:#5D6E7A; --line:rgba(12,30,44,.17); --accent:#B0802F; --accent-lt:#D9A94A; --accent2:#1E7F7A; --band-bg:#0C1E2C; --band-ink:#F3EDE1; --band-line:rgba(243,237,225,.16); --band-muted:#93A6B2; --qr-ink:#0A1A26; --wechat:#07C160; --weibo:#E6162D; --linkedin:#0A66C2; --douyin:#FE2C55; --douyin2:#25F4EE; --shadow:0 46px 100px -28px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.07); } [data-theme="noir"]{ --stage:#03090E; --card-bg:#0B1B27; --card-ink:#F3EDE1; --muted:#93A8B4; --line:rgba(243,237,225,.16); --accent:#D9A94A; --accent-lt:#F0CE86; --accent2:#3FB0A5; --band-bg:#081420; --band-ink:#F3EDE1; --band-line:rgba(243,237,225,.14); --shadow:0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(217,169,74,.28); } [data-theme="light"]{ --stage:#E7E2D6; --card-bg:#FFFFFF; --card-ink:#12222D; --muted:#6C7C87; --line:rgba(18,34,45,.14); --accent:#0F6E6A; --accent-lt:#1E9E96; --accent2:#B0802F; --band-bg:#F1F4F6; --band-ink:#12222D; --band-line:rgba(18,34,45,.13); --band-muted:#6C7C87; --shadow:0 24px 60px -24px rgba(20,40,55,.35), 0 0 0 1px rgba(18,34,45,.1); } /* ---------- 背景层 ---------- */ .bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none} .bg__glow{ position:absolute;left:50%;top:44%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);...

AI 评审点评

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

【CLAUDE】这是一个极高质量的全渠道联系方式展示页面，完整实现了所有功能要求并大幅超越基本标准。三栏布局精确，底部社交栏视觉区分清晰，内置真实QR码生成器（含Reed-Solomon纠错算法），三套专业配色方案，丰富的会展专用交互功能（快门提示、自动指引、内容编辑器、一键复制、打印优化）。代码质量极高，CSS变量体系完善，响应式与无障碍访问均有考虑。唯一轻微不足是内容略显信息密集，在小屏幕投影时可能需要调整，但整体而言是一个接近满分的实现。 【GEMINI】该生成结果是一份殿堂级的前端实现。不仅完全满足并超越了所有的布局、内容和视觉要求，还通过内置真实的 QR 码生成器、多套主题切换、自动视线指引（Tour 模式）、快门拍照提示以及实时内容编辑器，将用户体验和实用性提升到了极致。代码结构清晰，响应式与打印样式考虑周全，是一份无可挑剔的杰出作品。 【KIMI】该作品是一份超出预期的专业级会展展示页实现。不仅完整满足了所有功能要求，还额外提供了真实QR编码器、实时内容编辑器、自动指引动画、快门提示、三套主题切换、一键复制、响应式适配和打印优化等高级功能。代码质量极高，CSS采用容器查询驱动缩放，JavaScript模块化组织，充分考虑了无障碍（aria标签）、减少动画偏好（prefers-reduced-motion）和打印场景。视觉风格兼具东方美学（宣纸质感、铜金刻度）与现代科技感，非常适合会议展览场景。 minor issues主要在于数据绑定的小瑕疵和个别元素的投影可读性优化空间。

困难难度评测结果

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

模型生成产物

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

# 沐川智能科技 · 全渠道联系方式信息页 ```html 沐川智能科技（苏州）有限公司 · 全渠道联系方式 | MUCHUAN INTELLIGENCE /* ============================================================ 0. 设计令牌 —— 主色仅三色：墨蓝 / 黄铜 / 象牙纸 ============================================================ */ :root{ --ink:#0E1A2B; --ink-2:#16283F; --ink-3:#2A3D57; --ink-soft:#546379; --paper:#F4F0E6; --paper-2:#FCFAF5; --paper-3:#EDE7D9; --line:#DAD1BE; --line-2:#C7BCA3; --brass:#A9793A; --brass-2:#C9A063; --brass-3:#EAD7B4; --white:#fff; --f-display:"Fraunces","Noto Serif SC",Georgia,"Songti SC","SimSun",serif; --f-body:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --r-s:4px; --r-m:8px; --r-l:16px; --shadow-card:0 1px 0 rgba(14,26,43,.05), 0 14px 34px -22px rgba(14,26,43,.4); --shadow-qr:0 2px 0 rgba(14,26,43,.05), 0 30px 60px -28px rgba(14,26,43,.55), 0 0 0 1px rgba(169,121,58,.28); --ease:cubic-bezier(.22,.68,.24,1); } *,*::before,*::after{box-sizing:border-box} html{font-size:clamp(14.5px,0.42vw + 12.6px,19px);-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--f-body); color:var(--ink); background: radial-gradient(1200px 620px at 82% -10%, rgba(201,160,99,.16), transparent 62%), radial-gradient(900px 520px at 8% 8%, rgba(14,26,43,.07), transparent 60%), var(--paper); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{margin:0;font-weight:inherit;line-height:1.15} p{margin:0} ul,ol,dl,dd{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img{display:block;max-width:100%} :focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* ============================================================ 1. 颗粒噪点 + 裁切标记（印刷感） ============================================================ */ .grain{ position:fixed;inset:-40%;pointer-events:none;z-index:60;opacity:.42;...

AI 评审点评

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

【CLAUDE】这是一份极高质量的全渠道联系方式信息页实现，在满足所有核心功能要求的基础上，展现了远超预期的工程深度。最突出的亮点是内联实现了完整的 QR 编码器（含 RS 纠错、掩码罚分择优、BCH 校验），输出矢量 SVG 保证打印无锯齿；三色设计令牌体系严格执行；印刷感细节（颗粒噪点、裁切标记、印章装饰）与商务专业性完美融合。页面内容超出了原始需求范围（增加了展会日程、方案矩阵、现场掠影等区块），但这些额外内容质量同样出色，并不影响核心功能的完整性。打印优化、无障碍访问（aria 标签、focus-visible）、性能优化（IntersectionObserver 懒加载动效）等工程细节均处理得当，整体达到可直接用于正式展会场合的生产级水准。 【GEMINI】这是一份殿堂级的优秀前端页面实现。模型不仅以极高的标准完成了所有基础的排版、内容和视觉要求，还在技术实现上展现了极高的专业度（如纯手写 SVG 二维码生成器、多模式切换、详尽的打印与投影适配）。整体设计商务、高级、实用，完全达到了生产环境的专业级标准。 【KIMI】该输出是一份远超基础要求的专业级前端实现，展现了极高的技术完成度与设计品味。核心优势在于：真实QR编码器内联实现（非占位图）、三色严格的配色体系、精细的印刷质感营造、以及三层动效抑制机制（prefers-reduced-motion/拍照模式/print媒体查询）。然而，作为'单页HTML应用'，其内容体量显著膨胀——额外增加的展会日程、方案矩阵、现场掠影三个板块使页面从'信息展示页'演变为'微型官网'，虽丰富了场景价值，但与任务要求的聚焦性存在偏差。社交平台的'三行垂直排列'实现为flex-direction:column下的三元素堆叠，视觉上成立但严格性稍欠。整体而言，这是一份'过度实现'的高质量作品，功能完备性接近满分，但在需求贴合度上因内容膨胀而略有折损。

相关链接

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

加载中...
100%