GLM-5.1 在「太空旅游预订平台落地页」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：太空旅游预订平台落地页
  • 测试类型：网页生成
  • 评测维度：落地页

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于视觉设计精良的营销落地页开发。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须整合在单个 HTML 文件中，可通过浏览器直接打开运行，无需任何本地服务器。 2. 允许通过可靠 CDN（如 cdnjs、unpkg、jsdelivr）引入 FontAwesome 等图标库，但核心布局与样式须使用原生 CSS 实现。 3. 页面必须包含完整的 <head> 元信息、<style> 内联样式块和必要的 <script> 逻辑，结构清晰、注释适当。 4. 视觉风格须贴合太空科技主题：深色背景（深蓝/黑色系）、高亮强调色（蓝紫/青色系）、现代无衬线字体。 5. 直接输出完整可运行的 HTML 代码，不要添加任何解释性文字或 Markdown 说明。

用户提示词（User Prompt）

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

# 太空旅游预订平台落地页（基础版） ## 任务描述 为一家名为 「AstroVoyage」 的商业太空旅游公司，设计并实现一个静态落地页， 激发用户的太空探索欲望，并引导用户提交预订咨询。 ## 技术约束 - 所有代码（HTML / CSS / JavaScript）必须在 **单个 HTML 文件** 中完成 - 可通过 CDN 引入 FontAwesome 图标库（用于图标展示） - 核心布局使用原生 CSS Flexbox 或 Grid 实现 - 页面须在现代桌面浏览器中正常渲染 ## 页面必须包含以下四个模块 ### 1. 英雄区（Hero Section） - 全屏或大尺寸头图区域，使用 CSS 渐变或伪元素模拟深空星空背景 - 包含公司名称、一句醒目的 Slogan（如 「Your Journey Beyond the Stars」） - 至少一个 CTA 按钮（如「立即预订」），点击后平滑滚动至预订表单区域 - 使用 CSS 动画实现至少一种视觉效果（如星点闪烁、文字渐入、或背景缓动） ### 2. 公司介绍与安全认证 - 简短的公司使命/介绍文字（2-3 句话） - 以卡片或图标列表形式展示至少 3 项安全认证/资质（如 NASA 合作认证、ISO 安全标准、零事故记录），每项包含图标和说明文字 - 使用 Flexbox 或 Grid 实现多列布局 ### 3. 太空旅行套餐展示 - 展示至少 3 个套餐卡片（如：亚轨道体验、空间站之旅、月球观光） - 每张卡片须包含：套餐名称、价格、3-5 条特性描述、一个「了解更多」按钮 - 卡片须有悬停（hover）交互效果（如边框高亮、阴影变化或轻微上移） - 可视化区分推荐套餐（如添加「热门推荐」标签） ### 4. 预订咨询表单 - 包含以下字段：姓名（文本）、邮箱（email 类型）、电话（tel 类型）、 意向套餐（下拉选择，选项对应第3模块的套餐）、出发时间偏好（date 类型）、 备注信息（textarea） - 所有必填字段须有 HTML5 原生验证（required 属性）及视觉标识（如星号） - 提交按钮点击后，使用 JavaScript 弹出确认提示（alert 或自定义模态框）， 显示「感谢您的咨询，我们将在 24 小时内与您联系！」 ## 设计规范 - 主色调：深空黑（#0a0a1a）或深蓝（#050b1f）作为背景 - 强调色：电光蓝（#00d4ff）或星云紫（#7b2fff） - 字体：优先使用 Google Fonts 的 Orbitron（标题）+ Exo 2（正文）， 或通过 CDN 引入，降级方案为系统无衬线字体 - 各模块间须有明显的视觉分隔（如分割线、背景色变化或间距）

任务要求

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

  1. 页面包含全部四个必要模块（Hero、公司介绍与安全认证、套餐展示、预订表单），且每个模块内容完整，无明显缺失项。
  2. Hero 区域实现至少一种 CSS 动画效果（如 @keyframes 定义的星点闪烁、文字渐入或背景漂移），动画须可见且流畅。
  3. 套餐卡片（至少3张）具有可感知的 hover 交互效果，且至少一张卡片有「推荐」或「热门」视觉标识。
  4. 预订表单包含不少于5个输入字段（含 email、tel、select、date 类型），所有必填字段设置 required 属性，提交后触发 JavaScript 反馈提示。
  5. 整体配色符合深空科技主题（深色背景 + 高亮强调色），页面在 1280px 宽度桌面浏览器下布局整齐、无明显错位。
  6. 代码结构清晰：HTML 语义化标签（header/section/footer 等）正确使用，CSS 在 <style> 块中组织有序，无明显语法错误。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html AstroVoyage — Your Journey Beyond the Stars /* ========== CSS 变量 / 设计令牌 ========== */ :root { --bg-deep: #050b1f; --bg-card: rgba(12, 20, 50, 0.7); --bg-card-hover: rgba(18, 30, 70, 0.85); --fg: #e8ecf4; --fg-muted: #8a94ab; --accent-cyan: #00d4ff; --accent-purple: #7b2fff; --accent-gradient: linear-gradient(135deg, #00d4ff, #7b2fff); --border: rgba(0, 212, 255, 0.15); --border-hover: rgba(0, 212, 255, 0.5); --card-radius: 16px; --font-display: 'Orbitron', sans-serif; --font-body: 'Exo 2', sans-serif; } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--fg); line-height: 1.7; overflow-x: hidden; } /* ========== 通用工具类 ========== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: #fff; } .section-desc { font-size: 1.05rem; color: var(--fg-muted); max-width: 640px; line-height: 1.8; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--accent-gradient); border: none; border-radius: 50px; cursor: pointer; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s, filter 0.3s; box-shadow: 0 4px 24px rgba(0, 212, 255, 0.25); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition:...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的太空旅游落地页实现，在视觉设计、功能完整性和代码质量三方面均表现优异。视觉层面深度契合太空科技主题，多层星空动画、渐变配色、精致 UI 组件营造出强烈的沉浸感；功能层面不仅满足全部基础要求（四模块完整、动画流畅、交互响应、表单验证），还额外实现了自定义模态框、Canvas 动态星点、滚动渐入等增强特性；代码层面结构清晰、语义化标签规范、CSS 变量管理有序、JavaScript 逻辑分离良好，具备良好的可维护性。唯一可优化空间在于部分动画参数微调和代码复用度提升，但瑕不掩瑜，整体已达到商业项目交付标准。 【GEMINI】这是一个教科书级别的落地页实现。模型不仅精准地执行了所有技术约束和内容要求，还在视觉表现力上展现了极高的水平。代码结构清晰，交互逻辑自然，完全符合商业太空旅游公司吸引高端用户的定位，是一个高质量的可交付成果。 【KIMI】该候选输出是一份高质量的太空旅游落地页实现，在视觉表现、功能完整性和代码组织三个维度均达到优秀水平。设计层面充分展现了太空科技主题的美学张力，动画效果丰富而不杂乱；功能层面不仅满足所有硬性要求，还额外提供了套餐联动预选、Canvas动态星空、滚动渐入等增强体验；代码层面结构清晰、语义规范、可维护性强。整体可作为商业级落地页参考实现， minor改进空间在于JavaScript可进一步模块化以及部分交互细节的持续优化。

进阶难度评测结果

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

模型生成产物

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

```html AstroVoyage — 太空旅游预订平台 /* ========== CSS 变量与全局重置 ========== */ :root { --bg-deep: #0a0a1a; --bg-card: #0e0e28; --bg-card-alt: #12123a; --accent-cyan: #00d4ff; --accent-gold: #ffd700; --accent-purple: #8b5cf6; --accent-purple-deep: #5b21b6; --text-primary: #e8e8ff; --text-secondary: #8888aa; --text-muted: #555577; --border-glow: rgba(0, 212, 255, 0.15); --border-glow-strong: rgba(0, 212, 255, 0.4); --shadow-cyan: rgba(0, 212, 255, 0.15); --shadow-gold: rgba(255, 215, 0, 0.15); --font-display: 'Orbitron', monospace; --font-body: 'Exo 2', sans-serif; --radius: 12px; --radius-sm: 8px; --transition: 0.3s ease; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul { list-style: none; } img { max-width: 100%; display: block; } /* ========== 通用工具类 ========== */ .section-container { max-width: 1200px; margin: 0 auto; padding: 100px 24px; } .section-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .section-label::before { content: ''; width: 30px; height: 1px; background: var(--accent-cyan); } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--text-primary); margin-bottom: 16px; line-height: 1.2; } .section-desc { font-size: 1.05rem; color: var(--text-secondary); max-width: 600px; line-height: 1.7; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; color: var(--bg-deep); background: linear-gradient(135deg, var(--accent-cyan), #00a8cc); border:...

AI 评审点评

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

【CLAUDE】这是一个高质量的商业太空旅游落地页实现，完整满足所有功能要求且执行水准优秀。视觉设计高度契合太空科技主题，深空配色、星空粒子动效、UI 组件细节处理均达到专业水准，沉浸感强烈。功能实现全面且逻辑严谨，7 个核心模块均真实可用：星空粒子动态生成、套餐卡片交互、训练时间线滚动动画、安全数据计数、VIP 轮播、发射倒计时、表单验证，所有交互细节（如翻牌动效、进度条填充、自动播放暂停）均有完整实现。响应式布局适配质量高，移动端和平板端均有针对性优化，无横向溢出问题。代码组织清晰，CSS 和 JavaScript 结构合理，注释充分，易于维护。唯一可优化空间在于部分代码的进一步模块化和样式复用，但瑕不掩瑜，整体已达到商业项目交付标准。 【GEMINI】这是一份极高质量的交付件。它不仅完全满足了所有功能性要求，还在视觉表现力上超出了预期。代码组织严谨，JavaScript 交互逻辑（如倒计时翻牌、视口观察器、轮播逻辑）编写得非常专业，没有使用任何占位符。响应式适配考虑周全，是一个可以直接用于演示的商业级落地页原型。 【KIMI】这是一个高质量的商业太空旅游落地页实现，在单个HTML文件中完整呈现了7个核心功能模块，视觉效果震撼，交互逻辑严谨，响应式适配周全。深空主题贯穿始终，从星空粒子背景到星云光晕、从配色方案到字体选择都保持了高度一致性。JavaScript实现采用了现代API（IntersectionObserver、requestAnimationFrame），性能考虑到位。整体达到生产环境可用水准， minor改进空间在于更精细的动画冲突处理和电话验证增强。

困难难度评测结果

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

模型生成产物

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

```html 星际远航 | ASTRAL VOYAGE — 商业太空旅游 { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } /* ---------- CSS 变量 ---------- */ :root { --bg: #0a0a1a; --bg-deep: #050510; --fg: #e8e8f0; --fg-muted: #8888aa; --accent-purple: #6b21a8; --accent-purple-light: #9333ea; --accent-blue: #0ea5e9; --accent-blue-light: #38bdf8; --accent-gold: #f59e0b; --accent-gold-light: #fbbf24; --card: rgba(15, 15, 35, 0.85); --card-border: rgba(107, 33, 168, 0.3); --glass: rgba(10, 10, 26, 0.7); --radius: 12px; --radius-lg: 20px; --font-display: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- 基础重置 ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--fg); overflow-x: hidden; line-height: 1.6; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font-body); border: none; outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } ::selection { background: var(--accent-purple); color: #fff; } img { max-width: 100%; display: block; } /* ---------- 通用工具类 ---------- */ .section-container { max-width: 1280px; margin: 0 auto; padding: 100px 24px; } .section-label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; margin-bottom: 16px; background: linear-gradient(135deg, var(--fg) 0%, var(--accent-blue-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;...

AI 评审点评

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

【CLAUDE】这是一个高质量的商业太空旅游落地页实现，完整满足所有功能要求。Three.js WebGL 场景渲染精美，包含 6000+ 粒子星云、程序化地球模型、轨道运行的空间站，鼠标视差和滚动交互流畅，3D 初始化代码注释详尽。套餐定制器、实时数据仪表盘、训练时间线、NFT 护照、VR 预约弹窗等 8 个核心模块功能完整且逻辑正确，JavaScript 驱动的动态效果（价格滚动动画、倒计时、轮播、粒子爆炸）实现精良。视觉设计专业，深空配色方案一致，科技感 UI 组件精致，CSS 动画和 GSAP ScrollTrigger 效果流畅。响应式适配覆盖移动端/平板/桌面三个断点，布局合理，支持键盘导航和无障碍访问。代码结构清晰，HTML/CSS/JS 分块注释，变量命名语义化，所有外部依赖通过 CDN 引入，可直接在浏览器运行。小瑕疵包括部分边界情况处理不足（如表单验证仅检查非空）和极小屏幕下的细微布局问题，但不影响整体优秀表现。这是一个功能完备、视觉精美、技术实现扎实的高端落地页作品。 【GEMINI】这是一份极高水准的交付结果。作者展现了深厚的前端功底，在不依赖外部图片资源的情况下，利用程序化技术（Canvas 绘图、Three.js 几何体、Shader）构建了一个视觉丰富且交互复杂的落地页。所有业务功能模块（定制器、数据盘、NFT、VR 预约）均不仅停留在 UI 层面，而是具备了完整的逻辑闭环。代码结构清晰，注释专业，完全符合资深全栈前端工程师的定位。 【KIMI】该实现是一份高质量的商业太空旅游落地页，完整覆盖了所有8个功能模块要求。Three.js场景不仅满足基础要求，还通过自定义着色器实现了超越预期的视觉效果；各JavaScript驱动功能逻辑严谨，交互体验流畅；视觉设计高度统一，响应式适配考虑周全。代码结构清晰，注释规范，降级策略（如clipboard复制降级）体现了工程化思维。主要提升空间在于：增强WebGL场景的降级策略说明、完善ARIA状态管理以进一步提升无障碍访问体验。

相关链接

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

加载中...
100%