kimi-k2.7-code 在「全渠道联系方式信息页」的评测结果

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

基本信息

  • 模型名称：kimi-k2.7-code
  • 用例名称：全渠道联系方式信息页
  • 测试类型：网页生成
  • 评测维度：单页 PPT

系统提示词（System Prompt）

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

你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

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

创建一个全渠道联系方式信息页面。 功能要求： 1. 页面底部横向排列社交媒体图标及账号名称，包含微信、微博、LinkedIn 三个平台 2. 页面中心位置展示一个二维码图片（可用占位图代替），二维码下方标注说明文字 3. 页面右侧区域显示公司地址和联系电话 4. 整体布局整齐，内容清晰易读

任务要求

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

  1. 底部包含微信、微博、LinkedIn 三个社交媒体图标及账号名称
  2. 中心区域展示二维码（可用占位图）及说明文字
  3. 右侧展示公司地址和联系电话
  4. 整体布局整齐，内容清晰
  5. 代码在单个 HTML 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 全渠道联系方式 | Omni-Channel Contact /* 全局字体设置 */ body { font-family: 'Noto Sans SC', sans-serif; } /* 自定义背景：柔和的科技感渐变 */ .bg-tech-gradient { background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); } /* 卡片毛玻璃效果 */ .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); } /* 二维码容器的悬停动画 */ .qr-hover-effect { transition: transform 0.3s ease, box-shadow 0.3s ease; } .qr-hover-effect:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* 社交图标的悬停动画 */ .social-item { transition: all 0.3s ease; } .social-item:hover { transform: translateY(-3px); background-color: rgba(59, 130, 246, 0.05); } .social-icon { transition: transform 0.3s ease; } .social-item:hover .social-icon { transform: scale(1.1); } /* 复制成功提示的动画 */ .toast { visibility: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(20px); } .toast.show { visibility: visible; opacity: 1; transform: translateY(0); } /* 微信绿、微博红、LinkedIn蓝 */ .text-wechat { color: #07C160; } .text-weibo { color: #E6162D; } .text-linkedin { color: #0A66C2; } .bg-wechat-light { background-color: rgba(7, 193, 96, 0.1); } .bg-weibo-light { background-color: rgba(230, 22, 45, 0.1); } .bg-linkedin-light { background-color: rgba(10, 102, 194, 0.1); } 联系我们 全渠道服务，随时随地与您相连 关于我们 我们致力于通过整合线上线下全渠道资源，为客户提供最便捷、最高效的沟通体验。无论您通过哪种方式联系，我们都将竭诚为您服务。 微信扫码关注 点击刷新示例 扫描二维码关注官方公众号 获取最新资讯与专属客服支持 联系方式 公司地址 北京市朝阳区科技园区 创新大道88号未来中心A座18层 联系电话 400-123-4567 工作日 9:00 - 18:00 电子邮箱 contact@example.com 微信公众号 WeChat_Official 官方微博 @WeiboOfficial LinkedIn Example Inc. © 2023 Example Inc. 保留所有权利。 已复制到剪贴板 /** * 复制文本到剪贴板并显示提示 * @param {string} text - 要复制的文本 * @param {string} label - 文本类型标签 */ function copyText(text, label) { // 使用现代 Clipboard API if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(() => { showToast(`${label}已复制：${text}`); }).catch(err...

AI 评审点评

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

【CLAUDE】该生成结果质量较高，完整实现了全渠道联系方式页面的核心功能需求。布局结构合理，三大核心区域（社交媒体底栏、中心二维码、右侧联系信息）均按要求实现。内容完整，社交媒体图标使用品牌SVG和专属颜色，二维码使用API占位图并附说明文字，联系信息详尽。视觉设计专业，毛玻璃卡片+渐变背景的组合现代感强，整洁易读。额外实现了点击复制功能和Toast提示，提升了实用性。代码结构清晰，注释完善，符合前端工程师的专业标准。 【GEMINI】这是一个非常优秀的前端实现。模型不仅完全满足了所有功能要求，还通过使用 Tailwind CSS 提供了高质量的视觉设计和交互体验。代码结构清晰，注释到位，是一个标准的单页 HTML 应用示例。 【KIMI】该输出是一份高质量的全渠道联系方式页面实现，完全满足所有功能要求，并在视觉设计和交互体验上超出预期。布局采用响应式网格系统，三栏结构清晰合理；内容完整且包含实用的增值信息；视觉风格现代专业，品牌色彩运用恰当，交互反馈完善。 minor不足在于依赖外部CDN而非完全内联，以及左侧公司简介区域虽增强视觉效果但非必需。整体而言，这是一个可直接投入使用的优秀实现。

相关链接

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

加载中...
100%