GLM-5.1 在「复古80年代蒸汽波艺术展PPT首页」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：复古80年代蒸汽波艺术展PPT首页
  • 测试类型：网页生成
  • 评测维度：单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

请创建一个80年代复古蒸汽波风格的艺术展 PPT 首页。 视觉要求： - 使用粉色、紫色、青蓝色的渐变背景（蒸汽波配色） - 页面中央展示艺术展标题「VAPOR WAVE ART EXPO 1984」 - 加入像素风格的装饰元素（如像素边框、像素星星或像素网格） - 使用等宽字体或像素字体营造复古感 内容要求： - 展示艺术展名称、副标题（如「A Retro Digital Experience」） - 展示展览日期和地点信息 - 整体排版简洁，体现怀旧感

任务要求

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

  1. 背景使用粉紫青蓝蒸汽波渐变配色
  2. 页面包含艺术展标题、副标题、日期地点等基本信息
  3. 有像素风格装饰元素（边框、星星或网格等）
  4. 使用等宽或像素风格字体
  5. 整体视觉具有明显的80年代复古怀旧感

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整的蒸汽波风格艺术展首页，融合了经典80年代视觉元素——条纹太阳、透视网格、CRT扫描线、像素星星和Glitch故障效果。 ```html VAPOR WAVE ART EXPO 1984 /* ===== 设计令牌 ===== */ :root { --hot-pink: #ff71ce; --electric-purple: #b967ff; --cyan-blue: #01cdfe; --deep-purple: #0d0221; --neon-green: #05ffa1; --warm-yellow: #fffb96; --dark-bg: #0a0015; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--dark-bg); overflow: hidden; width: 100vw; height: 100vh; font-family: 'VT323', monospace; cursor: crosshair; } /* ===== 场景容器 ===== */ .scene { position: relative; width: 100%; height: 100%; animation: sceneIn 2.5s ease-out; } @keyframes sceneIn { 0% { opacity: 0; filter: brightness(3) saturate(0); } 30% { opacity: 1; filter: brightness(1.5) saturate(0.5); } 100% { opacity: 1; filter: brightness(1) saturate(1); } } /* ===== 渐变天空 ===== */ .sky { position: absolute; inset: 0; background: linear-gradient( 180deg, #06000f 0%, #12002a 12%, #2a0055 25%, #5c1a99 37%, #b967ff 47%, #ff71ce 56%, #ffa0c8 61%, #01cdfe 70%, #0188b0 82%, #06000f 100% ); } /* ===== 蒸汽波太阳 ===== */ .sun { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: clamp(140px, 22vw, 280px); height: clamp(140px, 22vw, 280px); border-radius: 50%; background: linear-gradient( 180deg, #fffb96 0%, #ffdd57 18%, #ffaa33 35%, #ff7744 50%, #ff5588 65%, #ff71ce 80%, #b967ff 100% ); z-index: 2; overflow: hidden; } /* 太阳水平条纹（经典蒸汽波元素） */ .sun::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0px, transparent 10px, var(--deep-purple) 10px, var(--deep-purple) 14px ); mask-image: linear-gradient(180deg, transparent 25%, black 45%); -webkit-mask-image: linear-gradient(180deg, transparent 25%, black 45%); } /* 太阳外围光晕 */ .sun-glow { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: clamp(200px, 34vw, 400px); height: clamp(200px, 34vw, 400px); border-radius: 50%; background: radial-gradient( circle, rgba(255, 251, 150, 0.25) 0%, rgba(255, 113,...

AI 评审点评

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

【CLAUDE】这是一份质量极高的蒸汽波风格艺术展首页实现。作品在视觉风格还原上表现卓越，几乎涵盖了所有经典80年代蒸汽波视觉元素，7层视觉层次构建了完整的场景纵深感。内容信息完整，代码结构规范、注释清晰、可维护性强。交互细节（视差、Glitch点击效果、实时时钟）进一步提升了作品的完成度。唯一的小瑕疵是引入了未实际使用的Tailwind CDN，属于轻微的代码冗余。整体而言，这是一个超出基础要求的优秀实现。 【GEMINI】这是一份非常优秀的生成结果。模型不仅准确理解了‘蒸汽波’和‘80年代复古’的核心视觉元素，还通过复杂且优雅的CSS和Canvas技术将其具象化。页面动态效果丰富（网格滚动、文字故障、扫描线、视差位移），交互细节到位（点击触发全屏故障闪烁），代码组织规范，是一个高质量的单页Web应用示例。 【KIMI】该页面设计高度还原了80年代复古蒸汽波风格，配色、字体和装饰元素都符合要求，内容也较为完整。代码结构清晰，但部分细节有待优化。整体而言，这是一个高质量的复古蒸汽波风格页面设计。

进阶难度评测结果

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

模型生成产物

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

```html 数字黄昏 — 蒸汽波艺术展 /* ===== 设计令牌 ===== */ :root { --pink: #ff6ec7; --hot-pink: #ff2d95; --purple: #b967ff; --deep-purple: #7b2ff7; --cyan: #01cdfe; --deep-blue: #0a0a2e; --neon-green: #05ffa1; --yellow: #ffe66d; --orange: #ff9a56; } /* ===== 重置 ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: hidden; background: var(--deep-blue); font-family: 'VT323', 'Courier New', monospace; color: #fff; } /* ===== 开机画面 ===== */ .boot-screen { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; font-family: 'VT323', monospace; color: var(--cyan); font-size: 22px; text-shadow: 0 0 10px var(--cyan); transition: opacity 0.6s ease-out; } .boot-screen.fade-out { opacity: 0; pointer-events: none; } .boot-line { opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; } .boot-line.visible { opacity: 1; transform: translateY(0); } .boot-cursor { display: inline-block; width: 10px; height: 18px; background: var(--cyan); animation: cursorBlink 0.6s step-end infinite; vertical-align: middle; margin-left: 4px; } /* ===== 背景渐变 ===== */ .bg-gradient { position: fixed; inset: 0; background: linear-gradient( 180deg, #0d0221 0%, #1a0533 8%, #2d1b69 18%, #7b2ff7 32%, #b967ff 44%, #ff6ec7 56%, #ff9a56 66%, #ffe66d 74%, #0a0a2e 75%, #06061a 100% ); z-index: 0; animation: bgHue 12s ease-in-out infinite alternate; } @keyframes bgHue { 0% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(8deg) brightness(1.04); } 100% { filter: hue-rotate(-6deg) brightness(0.96); } } /* ===== 星星 ===== */ .stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle var(--dur) ease-in-out infinite; animation-delay: var(--delay); } @keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(1);...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的80年代蒸汽波风格艺术展首页。视觉还原度出色，包含条纹太阳、3D网格地板、扫描线、CRT暗角等标志性元素，配色和霓虹效果精准；动态效果丰富且契合主题，从开机序列到打字机效果、从视差交互到按钮反馈均表现优秀；展览信息完整，排版兼具怀旧感与艺术张力；代码质量高，结构清晰、性能良好、无障碍支持完善。整体呈现出强烈的视觉冲击力与浓郁的复古未来主义氛围，完全符合蒸汽波美学要求。 【GEMINI】这是一份令人惊艳的生成结果。模型不仅完美执行了所有需求指令，还在蒸汽波风格的艺术深度上进行了大量高质量的自主发挥（如开机画面、视差效果和CRT滤镜）。代码实现专业，视觉表现极具张力，完全符合“视觉冲击力与艺术感”的要求。 【KIMI】该作品是蒸汽波风格还原的标杆级实现，在视觉氛围营造、动态效果设计和复古UI元素融合方面表现出色。多层渐变背景、条纹太阳、3D透视网格与扫描线/CRT暗角的叠加构建了完整的蒸汽波视觉体系，开机画面与打字机效果显著增强了叙事沉浸感。代码实现规范且具备一定可访问性考虑。主要提升空间在于：可加入更具辨识度的蒸汽波符号元素（如棕榈树、希腊雕像、故障艺术glitch效果），优化中文排版可读性，以及采用更现代的JavaScript语法。整体而言，这是一个视觉冲击力强、完成度高的复古蒸汽波艺术展首页。

困难难度评测结果

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

模型生成产物

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

```html VAPOR WAVE ART EXPO /* ===== 设计令牌 ===== */ :root { --pink: #ff71ce; --purple: #b967ff; --deep-blue: #01cdfe; --cyan: #05ffa1; --hot-pink: #ff2d95; --sunset-orange: #ff9e00; --bg-dark: #0a0015; --win-bg: #c0c0c0; --win-light: #dfdfdf; --win-dark: #808080; --win-darker: #404040; --titlebar: #000080; } /* ===== 重置与基础 ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: var(--bg-dark); font-family: 'VT323', monospace; color: #fff; width: 100vw; height: 100vh; cursor: url("data:image/svg+xml,") 8 8, crosshair; } /* ===== 加载屏幕 ===== */ #loading-screen { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .load-header { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--deep-blue); margin-bottom: 8px; letter-spacing: 3px; text-shadow: 0 0 8px var(--deep-blue); } .load-sub { font-family: 'VT323', monospace; font-size: 16px; color: var(--pink); margin-bottom: 28px; opacity: 0.8; } /* 像素进度条容器 */ .load-bar-wrap { width: 420px; max-width: 85vw; height: 28px; border: 3px solid; border-color: var(--win-light) var(--win-darker) var(--win-darker) var(--win-light); background: #000; padding: 3px; } .load-bar-inner { width: 100%; height: 100%; border: 2px solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); background: #000; overflow: hidden; } .load-bar-fill { height: 100%; width: 0%; background: repeating-linear-gradient( 90deg, var(--deep-blue) 0px, var(--deep-blue) 6px, var(--pink) 6px, var(--pink) 12px, var(--cyan) 12px, var(--cyan) 18px ); transition: width 0.08s linear; image-rendering: pixelated; } .load-percent { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--cyan); margin-top: 14px;...

AI 评审点评

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

【CLAUDE】这是一个高质量的 80 年代复古蒸汽波风格作品，完美还原了蒸汽波美学的核心元素：粉紫青配色、透视网格、落日、CRT 效果、像素 UI。技术实现专业，动效丰富流畅，Glitch 效果、打字机动画、鼠标视差等细节到位。代码结构清晰，模块化设计优秀，注释完整。展览信息完整，排版层次分明，整体达到专业展览级别的视觉呈现标准。唯一可优化之处是部分视觉元素（如网格颜色、对话框发光效果）可以更鲜艳夸张以进一步增强视觉冲击力。

相关链接

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

加载中...
100%