kimi-k2.7-code 在「复古80年代蒸汽波艺术展PPT首页」的评测结果

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

基本信息

  • 模型名称：kimi-k2.7-code
  • 用例名称：复古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.5 分（满分 100 分），已通过

基础难度评测结果

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

模型生成产物

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

```html Vapor Wave Art Expo 1984 /* ===================== 变量与基础设置 ===================== */ :root { --neon-cyan: #00f0ff; --neon-pink: #ff00ff; --neon-purple: #bc13fe; --deep-purple: #1a0033; --sun-yellow: #ffcc00; --text-shadow-cyan: 0 0 4px var(--neon-cyan), 0 0 12px var(--neon-cyan); --text-shadow-pink: 0 0 4px var(--neon-pink), 0 0 12px var(--neon-pink); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: #000; font-family: 'VT323', monospace; color: #fff; } /* ===================== 蒸汽波渐变背景 ===================== */ .scene { position: relative; width: 100%; height: 100%; background: linear-gradient( 180deg, #160033 0%, #3e005c 30%, #90007f 60%, #ff4ecb 85%, #00e5ff 100% ); display: flex; flex-direction: column; align-items: center; justify-content: center; /* 像素网格背景覆盖 */ background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 32px 32px; } /* ===================== 远景太阳 ===================== */ .retro-sun { position: absolute; top: 18%; left: 50%; width: 280px; height: 280px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient( 180deg, var(--sun-yellow) 0%, #ff5e00 60%, #ff0080 100% ); /* 用 repeating-linear-gradient 制造太阳的横向条纹 */ -webkit-mask-image: repeating-linear-gradient( to bottom, black 0px, black 14px, transparent 14px, transparent 22px ); mask-image: repeating-linear-gradient( to bottom, black 0px, black 14px, transparent 14px, transparent 22px ); box-shadow: 0 0 40px rgba(255, 0, 128, 0.6); z-index: 1; animation: sun-pulse 4s ease-in-out infinite alternate; } @keyframes sun-pulse { from { transform: translateX(-50%) scale(1); filter: brightness(1); } to { transform: translateX(-50%) scale(1.05); filter: brightness(1.15); } } /* ===================== 地面透视网格 ===================== */ .grid-floor { position: absolute; bottom: 0; left: -50%; width: 200%; height:...

AI 评审点评

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

【CLAUDE】这是一份高质量的80年代复古蒸汽波风格PPT首页实现。代码在视觉风格还原上表现出色，包含了蒸汽波美学的几乎所有标志性元素：条纹太阳、透视网格地面、霓虹配色、CRT扫描线与暗角、像素字体、故障效果等。内容信息完整，代码结构规范，注释清晰，具有良好的可维护性和可读性。整体达到了专业级别的复古风格还原效果。 【GEMINI】这是一份非常出色的生成结果。模型不仅完全满足了用户的所有视觉和内容要求，还通过添加‘复古太阳’、‘透视网格’、‘扫描线’以及‘Glitch 动画’等蒸汽波核心视觉符号，超预期地还原了 80 年代的复古美学。代码实现优雅且功能完备，是一个高质量的单页应用示例。 【KIMI】该作品是蒸汽波风格前端实现的优秀范例，在视觉还原度上几乎无可挑剔，经典元素（太阳、网格、扫描线、霓虹发光、像素边框）的融合自然且富有动态层次。代码组织有序，注释充分，展现了专业的前端开发能力。 minor的改进空间在于响应式细节和可访问性考量，但作为艺术展示型单页应用已远超基础要求。

进阶难度评测结果

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

模型生成产物

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

```html NEON DREAMS 艺术展 :root { --neon-pink: #ff00ff; --neon-cyan: #00ffff; --deep-purple: #2e004f; --dark-blue: #050014; --grid-pink: rgba(255, 0, 255, 0.4); } body { margin: 0; overflow: hidden; background-color: var(--dark-blue); font-family: 'VT323', monospace; color: #fff; } /* 1. 蒸汽波渐变背景 - 缓慢移动 */ .vapor-bg { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle at 50% 0%, #ffd1ff 0%, #ff00ff 25%, #7b00ff 50%, #1a005e 75%, #050014 100%); animation: bgShift 15s ease-in-out infinite alternate; z-index: -3; } @keyframes bgShift { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.1) translate(-2%, 2%); } } /* 2. 扫描线与 CRT 效果 */ .crt-overlay { position: fixed; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 3px, 3px 100%; pointer-events: none; z-index: 50; animation: flicker 0.15s infinite; } .crt-overlay::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%); background-size: 100% 4px; z-index: 2; pointer-events: none; } @keyframes flicker { 0% { opacity: 0.97; } 50% { opacity: 1; } 100% { opacity: 0.98; } } /* 3. 透视网格地板 */ .grid-floor { position: absolute; bottom: -30%; left: -50%; width: 200%; height: 80%; background-image: linear-gradient(var(--grid-pink) 2px, transparent 2px), linear-gradient(90deg, var(--grid-pink) 2px, transparent 2px); background-size: 80px 80px; transform: perspective(500px) rotateX(60deg); transform-origin: 50% 100%; animation: gridMove 2s linear infinite; z-index: -2; box-shadow: 0 0 100px rgba(255, 0, 255, 0.5); } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 80px; } } /* 4. 漂浮几何装饰 */ .floating-geo { position: absolute; z-index: -1; opacity: 0.6;...

AI 评审点评

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

【CLAUDE】该作品是一个高质量的80年代蒸汽波风格艺术展首页实现，在视觉风格、动态效果、内容完整性和代码质量四个维度均表现优秀。特别亮眼的是：透视网格地板的滚动动画、霓虹闪烁效果的真实感模拟、CRT扫描线叠加以及蒸汽波条纹太阳等经典元素的综合运用，使整体氛围极为浓郁。打字机效果与鼠标视差的加入进一步提升了交互体验。代码组织规范，可读性强。整体而言是一个完成度极高、艺术张力突出的蒸汽波风格页面。 【GEMINI】这是一份极高水准的生成结果。模型不仅完全满足了所有功能性要求，还在视觉表现力上进行了深度挖掘，成功捕捉了蒸汽波风格的精髓（如CRT滤镜、网格地板、80年代太阳等）。代码实现优雅，动态交互丰富，是一个非常优秀的单页应用示例。 【KIMI】该作品是蒸汽波风格还原的标杆级实现，在视觉氛围营造上几乎无可挑剔：渐变背景、CRT扫描线、透视网格、霓虹文字、像素UI五大核心元素完整且精致。动态效果丰富且契合主题，打字机与霓虹闪烁尤其出彩。信息架构清晰，代码规范可维护。若能在动态独特性（如VHS扭曲、更强烈的glitch）和无障碍适配方面提升，将接近满分。

困难难度评测结果

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

模型生成产物

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

```html VAPOR WAVE ART EXPO 1984 · RELOADED /* ================================ 1. CSS 变量与全局重置 ================================ */ :root { --neon-pink: #ff00ff; --neon-cyan: #00ffff; --deep-purple: #240046; --dark-blue: #10002b; --crt-bg: #050011; --window-gray: #c0c0c0; --window-dark: #808080; --window-light: #ffffff; --window-black: #000000; --font-pixel: 'Press Start 2P', cursive; --font-mono: 'VT323', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* 防止选中文字破坏沉浸感 */ } html, body { width: 100%; height: 100%; overflow: hidden; background-color: var(--crt-bg); font-family: var(--font-pixel); color: #fff; } /* ================================ 2. 背景层：动态渐变 + 太阳 ================================ */ .bg-layer { position: absolute; inset: 0; z-index: 1; /* 粉色 → 紫色 → 深蓝 → 青色 的宽渐变，通过动画移动位置实现流动 */ background: linear-gradient( 125deg, #ff00ff 0%, #7b2cbf 20%, #240046 45%, #10002b 65%, #00ffff 85%, #ff00ff 100% ); background-size: 400% 400%; animation: gradientFlow 20s ease infinite; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 蒸汽波标志性落日 */ .retro-sun { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); width: 280px; height: 280px; border-radius: 50%; background: linear-gradient( to bottom, #ffd700 0%, #ff6b35 30%, #ff006e 60%, #8338ec 85%, transparent 85% ); z-index: 2; box-shadow: 0 0 40px rgba(255, 0, 110, 0.5); /* 太阳上的横向切割线 */ -webkit-mask-image: repeating-linear-gradient( to bottom, black 0px, black 12px, transparent 12px, transparent 18px ); mask-image: repeating-linear-gradient( to bottom, black 0px, black 12px, transparent 12px, transparent 18px ); opacity: 0.85; } /* ================================ 3. 透视网格地板 (CSS 3D) ================================ */ .grid-container { position: absolute; inset: 0; z-index: 3; perspective: 400px; /* 透视距离 */ overflow: hidden; pointer-events: none; /* 不阻挡鼠标事件 */ }...

AI 评审点评

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

【CLAUDE】这是一个高质量的80年代复古蒸汽波风格单页HTML应用，几乎完整实现了所有需求点。视觉系统层次丰富（背景→太阳→网格→内容→CRT效果→装饰），蒸汽波美学还原度高。代码架构清晰，模块化注释规范，超出要求地加入了Web Audio合成器和鼠标视差效果。主要改进空间在于：漂浮粒子动画多样性、hover动画性能优化、以及进一步强化像素艺术细节（如更精细的软盘图标SVG实现）。整体达到专业展览级别的视觉呈现标准。 【GEMINI】这是一份教科书级别的视觉前端代码生成。模型不仅完美执行了所有复杂的技术要求（如3D透视、CRT滤镜、Glitch特效），还展现了深厚的蒸汽波艺术理解力，通过加入鼠标视差和合成器音效将‘专业展览级别’的要求从视觉扩展到了多感官体验。代码规范，注释清晰，是高质量生成结果的典范。 【KIMI】该作品是蒸汽波风格前端实现的标杆级案例，在视觉还原深度、动效丰富度与代码工程化之间取得了极佳平衡。作者不仅完整实现了全部13项功能需求，还主动增加了音频合成器、鼠标视差、CTA闪烁彩蛋等超出预期的体验细节。CSS 3D透视网格与多层CRT效果的叠加展现了扎实的前端技术功底，而Win3.1风格对话框的立体边框处理、故障艺术的双通道错位实现则体现了对复古美学的深刻理解。 minor issues包括HTML实体编码的潜在运行问题、以及部分transform属性的冲突覆盖，但瑕不掩瑜，整体达到专业展览级别的视觉呈现标准。

相关链接

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

加载中...
100%