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

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

基本信息

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

系统提示词（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 文件内，无外部依赖，可直接在浏览器运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

我为你设计了一个温暖、专业的心理咨询师匹配平台落地页。整体采用米白底色 + 暖绿主色 + 淡蓝辅色的柔和配色，搭配大量留白、圆角卡片与浮动装饰，营造安全、被接纳的氛围。 ```html 心语陪伴 · 在线心理咨询师匹配平台 /* === 设计令牌 === */ :root { --primary: #6BAE8A; /* 温暖绿 - 主色 */ --primary-dark: #4F9670; --primary-light: #E8F2EC; --secondary: #7BB8D4; /* 淡蓝 - 辅色 */ --secondary-light: #E4EEF5; --accent: #E8B86A; /* 暖橙 - 点缀 */ --bg: #FAF8F5; /* 米白背景 */ --bg-alt: #F3EFE7; --card: #FFFFFF; --text: #2D3A36; --text-muted: #6B7570; --text-light: #9AA39E; --border: #E8E2D9; --shadow-sm: 0 2px 12px rgba(45, 58, 54, 0.04); --shadow: 0 8px 30px rgba(45, 58, 54, 0.06); --shadow-lg: 0 20px 60px rgba(45, 58, 54, 0.1); --shadow-primary: 0 12px 40px rgba(107, 174, 138, 0.25); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* === 导航栏 === */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 248, 245, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(232, 226, 217, 0.6); transition: box-shadow 0.3s; } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; } .logo-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); position: relative; overflow: hidden; flex-shrink: 0; } .logo-mark::before { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); top: 8px; left: 8px; opacity: 0.95; } .logo-mark::after { content: ''; position: absolute; width: 7px;...

AI 评审点评

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

【CLAUDE】这是一份接近商业级水准的心理咨询平台落地页实现。在视觉设计上，精准把握了行业调性，温暖渐变配色、呼吸感动画、具象化的对话场景卡片设计令人印象深刻，远超普通落地页模板。功能完整度方面，7个模块一一落实，咨询师卡片信息维度丰富（含状态标签、价格）、Toast交互替代alert的创意升级体现了工程师对用户体验的精细思考。代码质量方面，CSS变量体系、模块注释、响应式断点处理均体现了专业的前端工程素养。页脚紧急心理援助热线以绿色高亮卡片突出显示，彰显人文关怀的专业责任感。综合评分极高，是任务类型内的优秀示范。 【GEMINI】这是一份极其优秀的交付结果。模型不仅准确理解了所有业务需求和设计规范，还展现了深厚的前端功底和 UX 设计意识。页面美观大方，交互流畅，文案专业且富有温度，完全可以直接作为生产环境的落地页原型使用。 【KIMI】该落地页是一份高质量的心理咨询平台前端实现，在视觉情感化设计、功能完整度和代码规范性三方面均表现优秀。设计层面精准把握了心理健康行业的「温暖安全」调性，通过色彩、动效、文案的三重配合，有效降低了用户的心理防御；功能层面7大模块信息充实，咨询师卡片和服务流程的细节处理超出基础要求；代码层面单文件零依赖，语义化标签和现代化CSS布局运用规范。整体是一份可直接用于生产环境或作为行业参考的完整作品。

进阶难度评测结果

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

模型生成产物

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

我将为你打造一个兼具专业性与人文关怀的心理咨询平台落地页。整体采用柔和蓝绿与温暖米白的配色，融入浮动卡片、智能匹配可视化等动态元素，让页面既有信任感又不失温度。 ```html 心晴 MindHaven — 专业心理咨询师智能匹配平台 /* ============ 设计令牌 ============ */ :root { --primary: #4A9B8E; --primary-dark: #3A7A6F; --primary-light: #E8F2F0; --primary-soft: #D4E8E3; --bg: #FAF7F2; --bg-alt: #F2EDE4; --bg-warm: #F5EFE6; --purple: #B8A9C9; --purple-mid: #9A87B0; --purple-light: #EDE7F2; --purple-soft: #D8CDE3; --text: #2D3A38; --text-mid: #4A5754; --text-light: #6B7570; --border: #E5DDD0; --border-soft: #EDE6D9; --white: #FFFFFF; --warning: #C97B5E; --warning-light: #F5E3DC; --shadow-sm: 0 2px 8px rgba(74, 155, 142, 0.06); --shadow: 0 4px 20px rgba(74, 155, 142, 0.08); --shadow-md: 0 8px 30px rgba(45, 58, 56, 0.08); --shadow-hover: 0 16px 40px rgba(74, 155, 142, 0.18); --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } 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; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } /* ============ 通用容器 ============ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .section { padding: 96px 0; } .section-head { text-align: center; margin-bottom: 56px; } .section-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--primary-light); color: var(--primary-dark); border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 20px; } .section-title { font-size: 38px; font-weight: 700; color: var(--text); margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.3; } .section-subtitle { font-size: 17px; color:...

AI 评审点评

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

【CLAUDE】这是一份完成度极高的心理咨询平台落地页实现。视觉设计精良，配色方案严格遵循行业调性，智能匹配可视化的 Hero 区设计具有较强的产品感。功能模块全面覆盖需求规格，特别是评估问卷的分级结果反馈与伦理导向（严重级别优先引导危机热线）体现了对行业特殊性的深刻理解。代码结构清晰，CSS 变量系统设计规范，JS 模块化注释完备。主要改进空间在于：移动端导航缺少汉堡菜单替代方案、:has() 伪类存在兼容性风险、咨询师详情页仅有 Toast 反馈而未展开完整信息。综合来看，这是一份接近生产级别的高质量交付物。 【GEMINI】这是一个极高水准的落地页设计。AI 不仅完成了所有功能性的技术要求（如 JS 筛选、问卷逻辑、轮播图），更在行业理解力上表现卓越，配色方案、文案调性以及危机干预热线的布置都非常专业。代码纯净，无需任何外部依赖即可完美运行，是医疗健康类产品设计的典范。 【KIMI】该作品是一份极为出色的心理咨询平台落地页实现，在视觉调性、功能完整度和代码质量三个维度均达到优秀水平。设计者深刻理解心理咨询行业的特殊性——将'安全感''隐私保护''非评判态度'融入每个细节：从配色到文案，从严重级别结果优先引导热线而非转化，到隐私承诺的具体技术细节。交互层面，筛选-评估-匹配-预约的链路闭环清晰，动画效果适度不喧宾夺主。作为单一HTML文件，其工程化程度（CSS变量系统、模块化JS、完整响应式）令人印象深刻，可直接作为生产级落地页模板使用。

困难难度评测结果

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

模型生成产物

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

我将为「心晴 MindClear」打造一个温暖、专业且功能完整的心理健康服务平台落地页。设计上采用柔和的中性色调，注重人文关怀，所有交互功能都有真实的 JavaScript 逻辑驱动。 ```html 心晴 MindClear — 你不必独自面对 /* ============================================ 设计系统：温暖中性色系 + 柔和阴影圆角 平衡专业性与亲和力，传递安全感与信任 ============================================ */ :root { --color-bg: #F8F5F0; --color-bg-alt: #F0EBE3; --color-primary: #7EC8C8; --color-primary-dark: #5BA8A8; --color-primary-light: #B5DEDE; --color-secondary: #9B8EC4; --color-secondary-dark: #7B6EA4; --color-secondary-light: #C9BFE0; --color-text: #2D2A28; --color-text-light: #6B6560; --color-text-muted: #9B938A; --color-card: #FFFFFF; --color-border: #E8E2D8; --color-accent: #E89B7B; --color-urgent: #D97757; --color-online: #6BBF7E; --color-busy: #E8C547; --color-offline: #B8B0A8; --shadow-xs: 0 2px 8px rgba(45, 42, 40, 0.04); --shadow-sm: 0 4px 16px rgba(45, 42, 40, 0.06); --shadow-md: 0 8px 30px rgba(45, 42, 40, 0.1); --shadow-lg: 0 16px 50px rgba(45, 42, 40, 0.15); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 999px; --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ============================================ 导航栏：固定顶部 + 毛玻璃效果 ============================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(248, 245, 240, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(232, 226, 216, 0.6); transition: var(--transition); } .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; }...

AI 评审点评

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

【CLAUDE】这是一份高质量的Hard级别落地页实现，整体完成度优秀。视觉风格精准契合心理健康平台调性，温暖色系、圆角设计、人文关怀文案三者协同构建了良好的信任感；8项核心功能基本完整，AI三阶段匹配动效、多语言全局替换、逐题自测问卷、状态实时模拟均有真实JS逻辑驱动；代码注释详尽，CSS变量系统规范，数据与渲染分离架构清晰。主要不足在于：移动端咨询师横向滑动因HTML结构未完全对应CSS声明而存在实现缺陷；多语言切换缺乏过渡动效；部分SVG ID在多实例场景下存在潜在冲突风险；自测工具在语言切换时题目状态未重置。综合而言，该候选输出在功能广度和设计质量上均超过及格线较多，达到良好水准。 【GEMINI】这是一个教科书级别的 Hard 难度落地页实现。候选模型不仅在技术层面完整覆盖了所有复杂的功能要求（如 AI 匹配、多语言驱动、实时状态模拟），更在 UI/UX 设计上展现了深厚的功底，精准捕捉了心理健康应用所需的温暖与专业感。代码编写规范，响应式适配在移动端处理得尤为出色，是一个极高质量的单文件 Web 应用示例。 【KIMI】该实现是一份高质量的心理健康服务平台落地页，在视觉调性、功能完整度和代码质量三方面均表现优秀。设计温暖专业，文案体现同理心；8项核心功能全部真实实现而非静态占位；响应式适配覆盖三断点且细节到位。主要改进空间：自测工具可增加显式导航按钮、套餐对比可支持点击锁定状态、语言切换可采用更高效的DOM更新策略。

相关链接

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

加载中...
100%