qwen3.8-27b 在「毛玻璃质感智能家居发布页」的评测结果

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

基本信息

  • 模型名称：qwen3.8-27b
  • 用例名称：毛玻璃质感智能家居发布页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

请制作一个智能家居新品发布的 PPT 首页风格静态页面，采用毛玻璃（Glassmorphism）设计风格。 视觉要求： - 页面背景为彩色渐变光晕（至少包含两种柔和色彩，如蓝紫色系） - 页面中央放置一个毛玻璃质感卡片容器，需具备： - 半透明白色背景（rgba） - 高斯模糊背景（backdrop-filter: blur） - 细腻的白色半透明边框 - 柔和的阴影投影 - 卡片内展示： - 产品主标题（如「智·家 2025」） - 副标题（如「重新定义智能生活」） 页面整体居中布局，全屏展示。

任务要求

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

  1. 页面背景呈现彩色渐变光晕效果
  2. 中央卡片具备可见的毛玻璃半透明模糊效果（backdrop-filter）
  3. 卡片有白色半透明边框和投影
  4. 包含主标题与副标题文字内容
  5. 页面全屏居中布局，整体视觉协调

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

一个以「发布会大屏」为概念的玻璃质感首页：蓝紫双色光晕在深色底上缓慢漂移，中央毛玻璃卡片随鼠标轻微 3D 倾斜、表面有跟随光斑，标题带字符解码动画，四周漂浮着智能家居遥测小卡片，底部是 PPT 页码与品类跑马灯。已适配移动端与 `prefers-reduced-motion`。 ```html 智·家 2025 — 新品发布会 /* ============ 基础与变量 ============ */ :root{ --bg-0:#060a18; --ink:#eef2ff; --ink-dim:rgba(226,232,255,.62); --ink-faint:rgba(226,232,255,.38); --glass-border:rgba(255,255,255,.22); --blue:#5b7cfa; --purple:#9d5cff; --cyan:#45d8e8; --pink:#f472b6; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ min-height:100dvh; display:flex;flex-direction:column; overflow:hidden; background:var(--bg-0); color:var(--ink); font-family:'Noto Sans SC',sans-serif; -webkit-font-smoothing:antialiased; } /* ============ 背景层：渐变光晕 + 网格 + 噪点 ============ */ .bg{ position:fixed;inset:0;z-index:0;overflow:hidden; background:radial-gradient(120% 130% at 50% 0%, #0d1332 0%, #060a18 55%, #04060f 100%); } .orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform} .orb-a{ /* 蓝 */ width:58vmax;height:58vmax;left:-14vmax;top:-20vmax;opacity:.6; background:radial-gradient(circle at 35% 35%, rgba(91,124,250,.85), rgba(91,124,250,0) 65%); animation:drift-a 22s ease-in-out infinite alternate; } .orb-b{ /* 紫 */ width:62vmax;height:62vmax;right:-16vmax;bottom:-24vmax;opacity:.55; background:radial-gradient(circle at 60% 60%, rgba(157,92,255,.8), rgba(157,92,255,0) 65%); animation:drift-b 26s ease-in-out infinite alternate; } .orb-c{ /* 青色点缀 */ width:34vmax;height:34vmax;left:52%;top:6%;opacity:.35; background:radial-gradient(circle, rgba(69,216,232,.55), transparent 65%); animation:drift-c 18s ease-in-out infinite alternate; } /* 细网格，中心亮、边缘淡出 */ .grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%); mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%,...

AI 评审点评

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

【CLAUDE】这是一份远超基础要求的高质量实现。毛玻璃核心技术栈（backdrop-filter、rgba、描边、多层阴影）全部正确且精细，背景光晕采用三色多层动态系统构建极具层次感的视觉空间，内容排版在满足标题/副标题要求的基础上融入了完整的发布会大屏叙事语言。鼠标视差、3D 倾斜、字符解码、跑马灯等交互细节显著提升了作品的完成度与专业度，整体可直接作为高端产品发布会展示页使用。 【GEMINI】这是一份极其优秀的网页设计与代码实现。模型不仅完全满足了所有提示词要求，还在视觉动效、交互细节（如 3D 倾斜、鼠标光斑跟随、视差漂浮）以及现代 CSS 属性的运用上展现了极高的专业水准。代码结构清晰，响应式适配完善，并贴心地考虑了降低动态偏好（prefers-reduced-motion），堪称典范。 【KIMI】该实现远超基础要求，展现了专业级的前端视觉效果实现能力。毛玻璃效果在 backdrop-filter 基础上通过多层渐变背景、动态光斑、高光细线等细节将玻璃质感推向极致；背景光晕通过三色动态漂移、网格纹理和噪点叠加营造出高端发布会氛围；排版上字体搭配考究，信息层级清晰，动画丰富但不喧宾夺主。prefers-reduced-motion 的适配体现了对可访问性的考虑。整体是一件完成度极高的视觉作品，可作为 Glassmorphism 设计典范。

进阶难度评测结果

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

模型生成产物

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

一个以「AURA ONE 全屋智能中枢」为主题的沉浸式发布首页：深色底 + 多色漂浮光晕 + 噪点质感，主卡片、特性胶囊、日期块均为毛玻璃，附带鼠标视差、卡片 3D 微倾、粒子星尘与实时倒计时。 ```html AURA ONE · 全屋智能中枢 — 新品发布 /* ============ 基础 ============ */ :root{ --bg:#05070d; --ink:#eaf2ff; --muted:rgba(214,228,255,.6); --blue:#4d7cff; --purple:#9a5cff; --cyan:#2fd8ff; --cyan-soft:#7fe7ff; --glass:rgba(255,255,255,.07); --glass-brd:rgba(255,255,255,.16); --font-display:"Space Grotesk","Noto Sans SC",sans-serif; --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ font-family:var(--font-body); color:var(--ink); background: radial-gradient(130% 120% at 50% 0%, #0a1024 0%, var(--bg) 58%); overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:rgba(47,216,255,.35);color:#fff} button{font-family:inherit} @property --ang{syntax:'';initial-value:0deg;inherits:false} /* ============ 背景光晕 ============ */ .orbs{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} .orb{position:absolute;will-change:transform} .orb-core{width:100%;height:100%;border-radius:50%;filter:blur(72px);mix-blend-mode:screen} .orb-blue {width:56vw;height:56vw;top:-20vw;left:-14vw} .orb-blue .orb-core{ background:radial-gradient(circle at 38% 38%, #4d7cff 0%, rgba(77,124,255,.55) 38%, transparent 68%); opacity:.62; animation:drift-a 26s ease-in-out infinite alternate, breathe 9s ease-in-out infinite; } .orb-purple{width:50vw;height:50vw;top:6vh;right:-16vw} .orb-purple .orb-core{ background:radial-gradient(circle at 60% 40%, #9a5cff 0%, rgba(154,92,255,.5) 40%, transparent 70%); opacity:.5; animation:drift-b 32s ease-in-out infinite alternate, breathe 12s ease-in-out infinite 2s; } .orb-cyan{width:46vw;height:46vw;bottom:-18vw;left:4vw} .orb-cyan .orb-core{ background:radial-gradient(circle at 45% 55%, #2fd8ff 0%, rgba(47,216,255,.45) 42%, transparent 70%); opacity:.5; animation:drift-c 29s ease-in-out infinite alternate,...

AI 评审点评

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

【CLAUDE】该生成结果在三个维度上均表现出色，远超及格线。毛玻璃体系构建严谨，层级秩序清晰，blur 值、透明度、边框、阴影均精心调校；动效设计丰富且克制，背景光晕、入场动画、交互反馈、视差效果形成完整的动效语言；内容布局完整还原 PPT 首页风格，四角信息分布合理，整体呈现高端工业设计美学。代码质量高，CSS 变量、@property、@media 降级均有体现，是一份接近满分的优秀实现。 【GEMINI】本次生成结果质量极高，视觉效果非常惊艳。模型不仅完美达成了所有硬性指标（毛玻璃参数、多光斑动画、特定布局），还超预期地加入了 3D 视差、Canvas 星尘、流光描边、倒计时等高级动效，展现了极强的前端开发与视觉设计能力，堪称优秀范本。 【KIMI】该实现展现了极高的前端视觉工程水准，将Glassmorphism美学推向极致。不仅完全满足所有硬性指标，更在光晕系统、质感层次、动效编排、交互反馈等方面做出大量超预期设计，如conic-gradient流光描边、星尘粒子、3D视差微倾、标题遮罩揭示等，整体呈现出接近高端工业设计发布会级别的视觉品质。代码结构清晰，CSS变量系统成熟，prefers-reduced-motion与响应式处理体现专业素养，是毛玻璃效果实现的标杆级案例。

困难难度评测结果

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

模型生成产物

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

一个完整的沉浸式新品发布首页，包含多层光晕视差、3D 倾斜主卡、实时倒计时与全套动效系统。直接保存为 `.html` 即可运行： ```html LUMINA HOME · Series X 2025 — 智能，触手可及 /* ========================================================== 0. 设计变量 ========================================================== */ :root{ --bg: #0a0a1a; --ink: #eef1ff; --muted: rgba(226,232,255,.55); --faint: rgba(226,232,255,.32); --blue: #5b8cff; --purple: #9d6bff; --cyan: #4fe3ff; --rose: #f0a8a0; --glass: rgba(255,255,255,.08); --glass-brd: rgba(255,255,255,.2); --f-display: 'Space Grotesk','Noto Sans SC',sans-serif; --f-body: 'Noto Sans SC',sans-serif; --f-mono: 'JetBrains Mono',monospace; --ease-out: cubic-bezier(.22,1,.36,1); } *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; } body{ background: radial-gradient(120% 90% at 50% 0%, #10122b 0%, var(--bg) 55%, #070712 100%); color:var(--ink); font-family:var(--f-body); overflow:hidden; -webkit-font-smoothing:antialiased; } ::selection{ background:rgba(91,140,255,.4); color:#fff; } a{ text-decoration:none; color:inherit; } button{ font-family:inherit; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; } /* ========================================================== 1. 背景系统：网格 / 光晕 / 粒子 / 噪点 ========================================================== */ .bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } /* 细网格，中心径向淡出 */ .bg-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%); } /* 光晕：外层 wrap 承接 JS 视差位移，内层 halo 负责 keyframes 漂浮+呼吸 */ .halo-wrap{ position:absolute; inset:0; will-change:transform; } .halo{ position:absolute; border-radius:50%; will-change:transform; } .halo-1{ /* 蓝 · 左上 */...

AI 评审点评

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

【KIMI】该候选输出展现了顶级的前端工程水准，将 Glassmorphism 设计语言执行到了极致。技术亮点在于双层光晕架构（CSS 动画与 JS 视差解耦）、单 rAF 循环驱动多系统（视差+倾斜+眩光）、以及大量活性细节（scramble 解码、粒子系统、扫光按钮）的有机融合。代码层面 CSS 变量体系规范、注释清晰、响应式与可访问性考虑周全（prefers-reduced-motion、aria 属性）。视觉效果达到甚至超越了高端品牌发布会 PPT 的工业设计标准，是一部完整的沉浸式交互作品而非简单页面。

相关链接

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

加载中...
100%