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

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：复古80年代蒸汽波艺术展PPT首页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 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年代复古蒸汽波风格，配色、字体和装饰元素都符合要求，内容也较为完整。代码结构清晰，但部分细节有待优化。整体而言，这是一个高质量的复古蒸汽波风格页面设计。

进阶难度评测结果

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

模型生成产物

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

```html VOID DREAM 虚空之梦 — 蒸汽波艺术展 /* ===== 设计令牌 ===== */ :root { --pink: #ff71ce; --hot-pink: #ff2d95; --purple: #b967ff; --deep-purple: #6b2fa0; --deep-blue: #0a0a2e; --cyan: #01cdfe; --neon-green: #05ffa1; --warm-yellow: #fffb96; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'VT323', monospace; background: var(--deep-blue); color: #fff; } /* ===== 背景渐变层 ===== */ .bg-layer { position: fixed; inset: 0; background: linear-gradient(180deg, #0a0a2e 0%, #1a0a3e 12%, #3d1a6e 28%, #6b2fa0 40%, #b967ff 52%, #ff71ce 65%, #ff9ecf 78%, #ffcad4 90%, #ffe0e8 100% ); animation: bgPulse 10s ease-in-out infinite alternate; z-index: 0; } @keyframes bgPulse { 0% { filter: hue-rotate(0deg) saturate(1); } 50% { filter: hue-rotate(-12deg) saturate(1.15); } 100% { filter: hue-rotate(8deg) saturate(1.05); } } /* ===== 蒸汽波落日 ===== */ .sunset { position: fixed; bottom: 32%; left: 50%; transform: translateX(-50%); width: clamp(200px, 28vw, 340px); height: clamp(200px, 28vw, 340px); border-radius: 50%; background: linear-gradient(180deg, #fffb96 0%, #ffcc00 18%, #ff9a00 38%, #ff2d95 62%, #b967ff 82%, #6b2fa0 100% ); box-shadow: 0 0 80px rgba(255,154,0,0.5), 0 0 160px rgba(255,45,149,0.35), 0 0 240px rgba(185,103,255,0.25); z-index: 1; animation: sunsetGlow 5s ease-in-out infinite; } /* 落日横条纹——蒸汽波经典 */ .sunset::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0px, transparent 10px, rgba(10,10,46,0.25) 10px, rgba(10,10,46,0.25) 14px ); } @keyframes sunsetGlow { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } } /* ===== 透视网格地板 ===== */ .grid-floor { position: fixed; bottom: 0; left: 0; width: 100%; height: 40%; perspective: 400px; overflow: hidden; z-index: 2; } .grid-surface { position: absolute; top: 0; left: -60%; width: 220%; height: 300%; background:...

AI 评审点评

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

【GEMINI】这是一个极其优秀的作品，精准捕捉并还原了蒸汽波（Vaporwave）美学的核心元素。代码不仅在视觉艺术上具有冲击力，在交互细节、性能考虑以及代码规范性上也表现出了专业水平。通过模拟老式操作系统窗口来承载核心信息，既符合主题又保证了信息的可读性。 【KIMI】整体而言，这个设计在视觉风格还原度、动态效果质量、内容完整性与排版以及代码质量方面都表现出色，高度符合80年代复古蒸汽波风格的特点，展现了高水平的前端开发和创意视觉设计能力。

相关链接

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

加载中...
100%