GLM-5.1 在「在线心理咨询师匹配平台落地页」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：在线心理咨询师匹配平台落地页
  • 测试类型：网页生成
  • 评测维度：落地页

系统提示词（System Prompt）

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

你是一名资深的前端开发工程师，同时具备 UI/UX 设计经验，擅长为心理健康、医疗健康等人文关怀类行业设计温暖、专业的落地页。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须整合在单个 HTML 文件中，可直接在浏览器运行，不依赖任何外部资源。 2. 图片一律使用带有描述性 alt 文字的占位图（如 https://placehold.co/宽x高 或 CSS 色块模拟），禁止引用外部图片链接。 3. 配色方案须符合心理咨询行业调性，推荐使用米白、暖绿（#6BAE8A 附近）、淡蓝（#A8C8E8 附近）等温暖舒适色调，避免高饱和度刺激色。 4. 使用语义化 HTML5 标签（header、nav、section、article、footer 等），CSS 布局优先使用 Flexbox 或 Grid。 5. 文案须体现同理心与人文关怀，语气温和、专业，让用户感到被理解和信任。 6. 代码结构清晰，CSS 与 JS 分别置于 <style> 和 <script> 标签内，关键模块添加注释说明。

用户提示词（User Prompt）

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

请设计一个在线心理咨询师匹配平台的落地页，所有代码写在单个 HTML 文件中，可直接在浏览器运行。 ## 页面内容要求 ### 1. 导航栏 - 包含平台 Logo（文字或图形均可）和主导航链接（如：首页、咨询师、服务流程、联系我们） - 右上角放置「立即预约」按钮，使用主题色突出显示 ### 2. 英雄区（Hero Section） - 一句有温度的主标语（如「每一步，都有人陪你走」） - 简短副标题介绍平台核心价值（专业、安全、私密） - 一个醒目的 CTA 按钮（「开始匹配咨询师」） - 背景使用温暖的渐变色或浅色图形装饰 ### 3. 平台介绍 - 用 3 个图标卡片展示平台核心优势（例如：专业认证、隐私保护、灵活预约） - 每张卡片包含图标（可用 emoji 或 Unicode 符号）、标题和简短说明 ### 4. 咨询师团队展示 - 展示至少 3 位咨询师卡片 - 每张卡片包含：头像占位图、姓名、职称/资质（如「国家二级心理咨询师」）、擅长领域标签（如焦虑、抑郁、婚姻）、简短个人介绍（1-2句）、「查看详情」按钮 - 卡片布局使用 Flexbox 或 Grid 横向排列 ### 5. 服务流程说明 - 用步骤图（横向或纵向均可）展示 4 个服务步骤：填写需求 → 智能匹配 → 预约确认 → 开始咨询 - 每步骤包含序号、标题和简短说明 ### 6. 预约入口 - 一个简单的预约表单或醒目的预约按钮区域 - 包含鼓励性文案（如「迈出第一步，改变从今天开始」） - 点击预约按钮后，用 JavaScript 弹出简单提示（alert 或页面内提示框），告知用户「预约请求已提交，咨询师将在24小时内与您联系」 ### 7. 页脚 - 包含版权信息、隐私政策链接（文字链接即可）、紧急心理援助热线（如：北京心理危机研究与干预中心 010-82951332） ## 设计规范 - 主色调：温暖绿（推荐 #6BAE8A）或淡蓝（推荐 #7BB8D4），搭配米白背景（#FAF8F5） - 字体：使用系统默认中文字体栈 - 圆角卡片、柔和阴影，整体风格温暖亲切 - 页面宽度最大 1200px，内容居中显示

任务要求

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

  1. 页面包含导航栏、Hero 区、平台介绍（≥3个优势卡片）、咨询师展示（≥3位，含头像占位、姓名、资质、擅长领域）、服务流程（≥4步骤）、预约入口、页脚共 7 个完整模块
  2. 配色方案符合心理咨询行业调性，使用温暖舒适色调（暖绿/淡蓝/米白系），无高饱和度刺激色，整体视觉风格统一
  3. 使用语义化 HTML5 标签（至少包含 header、section、footer），CSS 布局使用 Flexbox 或 Grid 实现多列排列
  4. 预约按钮具备 JavaScript 交互反馈（点击后显示 alert 或页内提示信息）
  5. 文案具有人文关怀和同理心，语气温和专业，页脚包含紧急心理援助热线信息
  6. 所有代码在单个 HTML 文件内，无外部依赖，可直接在浏览器运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 心语桥 — 在线心理咨询师匹配平台 /* ========== CSS 变量 ========== */ :root { --bg: #FAF8F5; --fg: #2D3436; --muted: #636E72; --accent: #6BAE8A; --accent-dark: #549470; --accent-light: #E8F5ED; --blue: #A8C8E8; --blue-light: #E3F0FA; --card: #FFFFFF; --border: #E8E4DF; --shadow: 0 4px 24px rgba(45, 52, 54, 0.06); --shadow-hover: 0 8px 32px rgba(45, 52, 54, 0.12); --radius: 16px; --radius-sm: 10px; --max-w: 1200px; --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); background: var(--bg); color: var(--fg); line-height: 1.7; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } /* ========== 容器 ========== */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } /* ========== 导航栏 ========== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(250, 248, 245, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: box-shadow 0.3s ease, background 0.3s ease; } .navbar.scrolled { background: rgba(250, 248, 245, 0.96); box-shadow: 0 2px 20px rgba(45, 52, 54, 0.08); } .navbar .container { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 700; color: var(--accent-dark); letter-spacing: -0.5px; } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent), #8FC9A6); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .logo-icon svg { width: 20px; height: 20px; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-size: 0.95rem; color: var(--muted); transition: color 0.25s ease;...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的心理咨询平台落地页实现。候选输出在视觉设计、功能完整性和代码质量三个维度均表现优异。配色方案精准契合心理咨询行业的温暖、安全、专业调性，文案充满人文关怀和同理心。7 个核心模块全部实现且信息充实，预约交互采用自定义 Toast 提示而非简单 alert，体验更佳。代码采用语义化 HTML5 标签和现代 CSS 布局方式，结构清晰、注释完善、响应式设计到位，完全符合单文件无依赖的要求。整体设计既有专业的视觉呈现，又有细腻的交互细节，是一个可直接用于生产环境的高质量落地页方案。 【GEMINI】这是一个极其优秀的落地页设计。模型不仅精准执行了所有指令要求，还在 UI 美化、交互体验和代码规范上表现出了资深开发者的水平。页面调性把握极其准确，文案温和且专业，技术实现上无外部依赖且支持响应式，是一个可以直接投入使用的落地页原型。 【KIMI】这是一个高质量的心理咨询平台落地页实现，在视觉调性、功能完整度和代码质量三个维度均表现优异。设计充分理解并转化了心理咨询行业「温暖、安全、专业」的核心需求，通过细腻的配色、柔和的动效和富有同理心的文案构建了可信的品牌形象。技术实现上，单文件架构清晰，语义化HTML与现代CSS特性运用得当，交互细节考虑周全（加载状态、错误提示、无障碍支持）。整体达到可直接用于演示或进一步开发的水准，仅在表单信息完整性和部分极端场景下的布局适配上有微幅提升空间。

进阶难度评测结果

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

模型生成产物

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

```html 心语桥 - 专业心理咨询师智能匹配平台 /* ========== 全局变量与重置 ========== */ :root { --primary: #4A9B8E; --primary-light: #6BB5A8; --primary-dark: #3A7D72; --primary-bg: #E8F5F1; --bg: #FAF7F2; --bg-alt: #F0EBE3; --card: #FFFFFF; --text: #2D3436; --text-light: #636E72; --text-muted: #9CA3AF; --accent: #8B7BA8; --accent-light: #B0A3C9; --accent-bg: #F0ECF5; --border: #E8E2D9; --danger: #D35D4A; --danger-bg: #FDF0ED; --shadow-sm: 0 1px 4px rgba(74,155,142,0.06); --shadow: 0 2px 12px rgba(74,155,142,0.08); --shadow-lg: 0 8px 32px rgba(74,155,142,0.12); --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --transition: 0.3s ease; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; font-family: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ========== 导航栏 ========== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(250,247,242,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: var(--transition); } .navbar.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .navbar-logo { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: var(--primary-dark); } .navbar-logo svg { flex-shrink: 0; } .navbar-links { display: flex; align-items: center; gap: 32px; list-style: none; } .navbar-links a { font-size: 0.9375rem; color: var(--text-light); transition: color var(--transition);...

AI 评审点评

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

【CLAUDE】这是一个高质量的心理咨询师匹配平台落地页实现。视觉设计精准把握行业调性，配色温暖专业、文案富有同理心、交互细节用心（紧急求助脉冲动画、Toast 通知、滚动渐入）。功能完整度极高：咨询师三维度实时筛选、5 题评估问卷含验证与分档结果反馈、用户案例轮播交互流畅、隐私声明与紧急求助通道多处呈现。代码质量优秀：单文件结构清晰、语义化命名、响应式适配完善、无障碍支持到位、完全离线可运行。主要改进空间：咨询师详情功能可补充弹窗或模态框、部分 JS 逻辑可更动态化、移动端菜单交互可优化。整体而言，该作品在功能实现、用户体验、代码规范三方面均达到优秀水平，充分满足任务要求。 【GEMINI】这是一个近乎完美的落地页实现。模型不仅严格执行了所有技术指标（单文件、无外部引用、JS 筛选、问卷验证等），还在 UI 设计和行业调性把握上表现卓越。代码组织专业，交互细节（如 Toast 通知、脉冲动画、滚动定位）处理得非常到位，是一个高质量的 AI 生成范本。 【KIMI】该实现是一份高质量的心理咨询平台落地页，在视觉专业性、功能完整度和代码工程化方面均达到优秀水准。配色与文案精准把握了心理咨询行业的'温暖而不轻佻、专业而不冰冷'的调性，紧急求助的多层级曝光设计体现了对危机干预场景的深刻理解。核心功能如三维度筛选、问卷验证与分级反馈、轮播交互均实现稳健，且通过Toast、滚动动画等细节提升了用户体验。主要改进空间在于：修复价格筛选的边界条件漏洞、增加问卷重测入口、优化移动端触摸交互支持，以及解决HTML转义字符带来的源码可读性问题。整体而言，该作品可直接作为生产环境的基础版本投入使用。

困难难度评测结果

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

模型生成产物

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

```html 心晴 MindClear — 心理健康服务平台 /* ==================== 基础变量与重置 ==================== */ :root { --bg: #F8F5F0; --bg-card: #FFFFFF; --bg-dark: #2D2A26; --mint: #7EC8C8; --mint-light: #B5E8E8; --mint-dark: #5AA8A8; --purple: #9B8EC4; --purple-light: #C8BFE4; --purple-dark: #7B6EA4; --warm: #E8A87C; --warm-light: #F2D4BC; --coral: #E88C8C; --fg: #2D2A26; --fg2: #6B6560; --fg3: #9B9590; --fg-inv: #F8F5F0; --border: #E8E2DA; --shadow-s: 0 2px 8px rgba(45,42,38,0.06); --shadow-m: 0 4px 20px rgba(45,42,38,0.1); --shadow-l: 0 8px 40px rgba(45,42,38,0.14); --r: 16px; --r-sm: 8px; --tr: 0.3s ease; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.7;overflow-x:hidden} a{text-decoration:none;color:inherit} button{font-family:inherit;cursor:pointer;border:none;background:none} ul{list-style:none} img,svg{display:block;max-width:100%} /* ==================== 通用工具类 ==================== */ .container{max-width:1200px;margin:0 auto;padding:0 24px} .section-pad{padding:100px 0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border-radius:50px;font-size:1rem;font-weight:600;transition:var(--tr);position:relative;overflow:hidden} .btn-mint{background:var(--mint);color:#fff} .btn-mint:hover{background:var(--mint-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(126,200,200,0.4)} .btn-purple{background:var(--purple);color:#fff} .btn-purple:hover{background:var(--purple-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(155,142,196,0.4)} .btn-outline{border:2px solid var(--mint);color:var(--mint);background:transparent} .btn-outline:hover{background:var(--mint);color:#fff;transform:translateY(-2px)} .btn-warm{background:var(--warm);color:#fff}...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的 Hard 级别心理健康服务平台落地页实现。代码严格遵循单HTML文件约束，所有图片使用SVG内联，无外部依赖。视觉设计温暖专业，色彩体系与文案充分体现心理健康行业的同理心与人文关怀。8项核心功能全部实现且交互逻辑真实可用：AI匹配动效三阶段渐进式设计优雅，多语言切换覆盖全面，心理自测逐题展示配合个性化结果输出，咨询师在线状态实时模拟，响应式布局在三个断点下均表现出色。代码组织清晰，CSS模块化命名规范，JavaScript逻辑严谨，注释完整。主要改进空间：移动端横向滑动可增加视觉提示，部分长函数可拆分优化可读性，硬编码数据可抽离为配置便于扩展。整体而言，该实现在功能完备性、视觉设计、代码质量三方面均达到优秀水平，完全满足 Hard 级别要求并展现出对心理健康行业特殊性的深刻理解。

相关链接

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

加载中...
100%