Claude Opus 4 7 在「旅行签证申请表单」的评测结果

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

基本信息

  • 模型名称：Claude Opus 4 7
  • 用例名称：旅行签证申请表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 HTML/CSS/JavaScript 表单设计与用户体验优化。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，包含内联 <style> 和 <script>，无需外部依赖，可直接在浏览器中运行。 2. 使用原生 JavaScript 实现表单验证逻辑，不依赖第三方库。 3. 表单布局需整洁美观，具备基础的视觉层次感，字段标签清晰，错误提示友好。 4. 验证规则须明确：护照号格式（字母+数字组合，6-9位）、日期逻辑（出生日期不得为未来日期、旅行结束日期不得早于开始日期）、必填项非空校验。 5. 代码结构清晰，关键逻辑处添加注释，便于阅读和理解。

用户提示词（User Prompt）

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

# 旅行签证申请表单（基础版） ## 任务描述 创建一个结构完整、样式整洁的旅行签证申请表单，所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器中独立运行，无需任何外部依赖。 ## 功能要求 ### 表单字段 表单需包含以下字段，并分组展示： **申请人基本信息** - 姓名（全名，必填，仅允许字母和空格） - 护照号（必填，格式：1-3位大写字母 + 6-9位数字，如 G12345678） - 出生日期（必填，不得为未来日期，申请人须年满18岁） **签证信息** - 目的地国家（下拉选择，至少包含：美国、英国、法国、日本、澳大利亚、加拿大） - 签证类型（单选：旅游签证 / 商务签证） **旅行日期** - 计划出发日期（必填，不得早于今天） - 计划返回日期（必填，不得早于出发日期） ### 表单验证 - 点击「提交申请」按钮时触发验证 - 每个字段验证失败时，在字段下方显示具体的红色错误提示文字 - 验证通过后，隐藏表单并显示一个包含申请摘要信息的成功提示页面 - 支持「重新申请」按钮，可返回空白表单 ### 样式要求 - 表单居中显示，最大宽度 600px，带有卡片式阴影效果 - 字段按分组用视觉分隔线或标题区分 - 提交按钮样式醒目，悬停时有交互反馈 - 错误状态下输入框边框变为红色

任务要求

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

  1. 表单包含全部7个必要字段（姓名、护照号、出生日期、目的地国家、签证类型、出发日期、返回日期），字段类型选用合理（input/select/radio）
  2. 护照号使用正则表达式验证格式（1-3位大写字母+6-9位数字），出生日期验证申请人年满18岁，日期字段验证逻辑正确（出发日期≥今天，返回日期≥出发日期）
  3. 所有必填项均有非空校验，验证失败时在对应字段下方显示具体错误提示文字，输入框边框变红
  4. 验证通过后隐藏表单，展示包含申请人姓名、护照号、目的地、签证类型、旅行日期的申请摘要成功页面
  5. 表单具备清晰的视觉分组、整洁的布局和基础的交互样式（按钮悬停效果、错误状态样式）

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 旅行签证申请表单 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 40px 20px; line-height: 1.6; } .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); padding: 40px; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } .subtitle { color: #666; margin-bottom: 30px; font-size: 14px; } .form-section { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid #e0e0e0; } .form-section:last-of-type { border-bottom: none; } .section-title { color: #667eea; font-size: 18px; font-weight: 600; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } label { display: block; color: #333; font-weight: 500; margin-bottom: 8px; font-size: 14px; } label .required { color: #e74c3c; margin-left: 2px; } input[type="text"], input[type="date"], select { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="date"]:focus, select:focus { outline: none; border-color: #667eea; } input.error, select.error { border-color: #e74c3c; } .error-message { color: #e74c3c; font-size: 13px; margin-top: 6px; display: none; } .error-message.show { display: block; } .radio-group { display: flex; gap: 20px; margin-top: 10px; } .radio-option { display: flex; align-items: center; gap: 8px; } input[type="radio"] { width: 18px; height: 18px; cursor: pointer; } .radio-option label { margin: 0; cursor: pointer; font-weight: 400; } .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .submit-btn:hover {...

AI 评审点评

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

【CLAUDE】该候选输出是一个高质量的旅行签证申请表单实现，完整覆盖了所有功能要求。验证逻辑严谨完整，包括精确的护照号正则、年龄计算、日期逻辑判断；表单结构语义化，字段完整，分组清晰；UI设计美观，交互反馈完善。代码整合在单个HTML文件中，无外部依赖，可直接在浏览器运行。整体达到生产级别的基础表单实现标准。 【GEMINI】这是一份高质量的作业，视觉设计和代码结构都非常专业。模型准确理解了复杂的业务规则（如护照号正则和年龄限制）。主要的瑕疵是单选框验证处存在一个小型的 DOM 引用错误，导致该特定字段触发验证失败时会产生 JS 报错。除此之外，整体表现非常优秀，完全符合单文件运行和原生 JS 实现的要求。 【KIMI】该表单系统功能完整，样式美观，代码规范。验证逻辑严谨，字段布局合理，用户体验良好。整体表现优秀，满足题目要求。

进阶难度评测结果

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

模型生成产物

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

```html 旅行签证申请系统 .drag-over { border-color: #3b82f6 !important; background-color: #eff6ff !important; } .file-preview { transition: all 0.3s ease; } .file-preview:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .progress-bar { transition: width 0.3s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-in { animation: slideIn 0.3s ease; } 签证申请系统 我的申请 (0) 我的申请记录 ✕ 基本信息 姓名 * 国籍 * 中国 美国 英国 其他 护照号 * 中国护照格式：E+8位数字 护照有效期 * 签证信息 目的地国家 * 请选择 美国 英国 日本 申根区 澳大利亚 签证类型 * 请先选择目的地 出发日期 * 返回日期 * 加急处理（额外收费 50%） 费用明细 基础签证费： $0.00 加急处理费： $0.00 服务费： $25.00 总计： $25.00 所需材料 文件上传 保存草稿 提交申请 // 签证配置数据 const visaConfig = { US: { name: '美国', types: { TOURIST: { name: '旅游签证 (B-2)', fee: 160 }, BUSINESS: { name: '商务签证 (B-1)', fee: 160 }, STUDENT: { name: '学生签证 (F-1)', fee: 185 }, WORK: { name: '工作签证 (H-1B)', fee: 190 } }, documents: ['护照复印件', '照片 (51x51mm)', 'DS-160确认页', '面试预约确认', '财力证明'] }, UK: { name: '英国', types: { TOURIST: { name: '标准访客签证', fee: 115 }, BUSINESS: { name: '商务访问签证', fee: 115 }, STUDENT: { name: '学生签证 (Tier 4)', fee: 348 }, WORK: { name: '工作签证 (Tier 2)', fee: 610 } }, documents: ['护照复印件', '照片 (45x35mm)', '在线申请表', '行程单', '酒店预订', '银行流水'] }, JP: { name: '日本', types: { TOURIST: { name: '短期旅游签证', fee: 30 }, BUSINESS: { name: '短期商务签证', fee: 30 }, WORK: { name: '工作签证', fee: 60 } }, documents: ['护照复印件', '照片 (45x45mm)', '签证申请表', '在职证明', '行程计划书'] }, SCHENGEN: { name: '申根区', types: { TOURIST: { name: '旅游签证 (C类)', fee: 80 }, BUSINESS: { name: '商务签证 (C类)', fee: 80 }, STUDENT: { name: '学生签证 (D类)', fee: 99 } }, documents: ['护照复印件', '照片 (35x45mm)', '申根签证申请表', '旅行保险', '机票预订', '酒店预订', '资金证明'] }, AU: { name: '澳大利亚', types: { TOURIST: { name: '访客签证 (600类)', fee: 145 }, BUSINESS: { name: '商务签证 (600类)', fee: 145 }, STUDENT: { name: '学生签证 (500类)', fee: 650 }, WORK: { name: '临时工作签证 (482类)', fee: 1290 } }, documents: ['护照复印件', '照片', '在线申请确认', '资金证明', '健康检查报告'] } }; // 全局状态...

AI 评审点评

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

【CLAUDE】该实现整体质量较好，核心功能框架完整：三级联动逻辑正确、费用计算准确、文件上传交互丰富、表单验证规则覆盖主要场景。使用Tailwind CSS实现了响应式卡片布局，视觉效果整洁。数据配置表设计合理，代码结构较为清晰。主要问题是代码被截断，updateApplicationCount、showApplicationsList、showToast等关键函数未完整呈现，导致申请历史列表展示、草稿继续编辑、Toast提示等功能无法完整评估，存在一定的不确定性扣分。若代码完整，整体评分会更高。 【GEMINI】该模型展现了极强的前端开发能力，特别是在处理复杂的表单联动、费用计算和文件上传模拟方面，逻辑严密且符合业务常识。UI 设计美观，交互反馈丰富。主要失分点在于输出不完整（截断），导致最终生成的 HTML 文件无法在浏览器中直接正常运行，未能完全履行‘提供完整代码’的指令要求。 【KIMI】整体而言，该实现较好地满足了功能要求，提供了一个完整的多国签证申请表单系统。在表单逻辑和验证、UI/UX设计以及代码架构方面均有不错的表现，但仍有改进空间，特别是在代码模块化和功能拆分方面。

困难难度评测结果

  • 得分：54.3 分
  • 通过状态：未通过

模型生成产物

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

```html 综合签证申请平台 :root { --primary: #2563eb; --primary-dark: #1e40af; --success: #10b981; --error: #ef4444; --warning: #f59e0b; --bg: #f8fafc; --surface: #ffffff; --text: #1e293b; --text-light: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } .container { max-width: 900px; margin: 0 auto; padding: 20px; } header { background: var(--surface); padding: 20px; box-shadow: var(--shadow); margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: 700; color: var(--primary); } .lang-switch { display: flex; gap: 10px; } .lang-btn { padding: 8px 16px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; border-radius: 6px; transition: all 0.3s; } .lang-btn.active { background: var(--primary); color: white; border-color: var(--primary); } .progress-bar { background: var(--surface); padding: 30px; border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 30px; } .steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 20px; } .steps::before { content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: var(--border); z-index: 0; } .step-progress { position: absolute; top: 20px; left: 0; height: 2px; background: var(--primary); transition: width 0.5s ease; z-index: 1; } .step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; } .step-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 600; transition: all 0.3s; margin-bottom: 10px; } .step.active .step-circle { background:...

AI 评审点评

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

【CLAUDE】该候选输出展示了一个结构良好的签证申请系统前端框架，CSS 样式系统完整且精细，UI 组件设计符合现代 Web 应用标准，响应式布局和自定义交互组件（模态框、通知、时间线）的实现质量较高。HTML 结构清晰地呈现了 5 个步骤的表单布局，包含智能推荐问卷、单人/团体切换、旅行计划等核心功能模块。然而，代码在 Step 3 的 select 标签处截断，导致以下关键部分无法评估：1) Step 4 材料上传的国家差异化清单实现；2) Step 5 费用计算和支付流程的完整逻辑；3) 所有表单验证的 JavaScript 实现（护照号正则、日期联动、跨字段验证）；4) 多语言切换的 i18n 数据对象和动态更新逻辑；5) 国家签证配置的数据驱动方案；6) LocalStorage 持久化和状态管理的核心代码。这些缺失部分恰好是评分维度中权重最高的「表单逻辑验证」和「代码架构」的核心考察点，导致整体评分受限。若补全 JavaScript 逻辑部分，预计各维度得分可提升 15-20 分 【GEMINI】该生成结果是一份严重不完整的代码。模型仅完成了 CSS 样式定义和前两个半步骤的 HTML 布局，便在 Step 3 处中断。最关键的 JavaScript 逻辑层完全缺失，导致所有功能规格（智能引导、验证规则、多语言切换、支付模拟、数据持久化）均未达成。作为一个需要直接运行的单文件解决方案，该输出无法在浏览器中正常工作。 【KIMI】提供的代码是一个签证申请平台的前端实现的起点，展示了多步骤向导和基本的UI布局。然而，关键的业务逻辑、表单验证、多语言支持和数据持久化等功能的具体实现缺失，限制了对平台功能的全面评估。代码的结构和组织表明了一定的前端开发能力，但在架构设计和功能完整性方面需要进一步的完善和实现。

相关链接

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

加载中...
100%