kimi-for-coding 在「旅行签证申请表单」的评测结果

基本信息

• 模型名称：kimi-for-coding
• 用例名称：旅行签证申请表单
• 测试类型：网页生成
• 评测维度：表单设计

系统提示词（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. 表单具备清晰的视觉分组、整洁的布局和基础的交互样式（按钮悬停效果、错误状态样式）

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 全球旅行签证申请表单 body { font-family: 'Noto Sans SC', sans-serif; background: #f0f4f8; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 20px 20px; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Input focus ring animation */ .input-group:focus-within label { color: #2563eb; } /* Shake animation for errors */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; } /* Smooth transition for height */ .expandable { transition: all 0.3s ease-out; overflow: hidden; } /* Ticket Perforation Effect */ .ticket-edge { position: relative; } .ticket-edge::after { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 20px; background: #f0f4f8; background-image: radial-gradient(circle, #f0f4f8 10px, transparent 11px); background-size: 20px 20px; background-position: bottom; background-repeat: repeat-x; } 旅行签证申请表 请填写以下信息以完成您的签证预申请。 申请人基本信息 姓名 (全名) 请输入有效的姓名（仅包含字母和空格）。 护照号码 格式错误：1-3位大写字母 + 6-9位数字（如 E1234567）。 出生日期 申请人必须年满18周岁。 签证信息 目的地国家 请选择国家 美国 (United States) 英国 (United Kingdom) 法国 (France) 日本 (Japan) 澳大利亚 (Australia) 加拿大 (Canada) 请选择目的地。 签证类型 旅游签证 商务签证 旅行日期 计划出发日期 出发日期不能早于今天。 计划返回日期 返回日期必须晚于出发日期。 提交申请 申请已提交！ 您的签证申请信息已录入系统，请核对以下摘要。 Visa Application 申请人姓名 护照号码 目的地 签证类型 Travel Period 出发 返回 请妥善保存此摘要。申请状态将通过邮件通知。 重新申请 /** * Visa Application Form Logic * Handles validation, date logic, and success state transitions. */ document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('visaForm'); const formSection = document.getElementById('formSection'); const successSection = document.getElementById('successSection'); const...

AI 评审点评

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

【CLAUDE】表单包含全部7个必要字段：姓名（text input）、护照号（text input）、出生日期（date input）、目的地国家（select，包含美国、英国、法国、日本、澳大利亚、加拿大6个选项）、签证类型（radio，旅游/商务）、出发日期（date input）、返回日期（date input），字段类型选用合理，HTML语义化程度较好，使用了 label 与 input 的关联。字段按「申请人基本信息」「签证信息」「旅行日期」三组清晰分组，每组有标题和分隔线。成功页面展示了姓名、护照号、目的地、签证类型、旅行日期等摘要信息，并有「重新申请」按钮。主要扣分点：依赖外部 CDN（Tailwind CSS），不符合「无需外部依赖」的硬性要求，若 CDN 不可用则页面布局完全崩溃；签证类型 radio 默认选中「旅游签证」，未对其做非空校验（但因有默认值实际不会出错）。 【GEMINI】该生成结果在功能实现和视觉表现上非常出色。表单验证逻辑严密且符合所有业务规则，成功页面设计精美且信息完整。唯一的显著缺点是违反了“不使用外部依赖”的限制性要求（引入了 Tailwind CSS 和外部字体），这虽然提升了开发效率和美观度，但偏离了任务中关于“单个独立 HTML 文件”的技术约束。如果去除外部依赖，其原生实现能力将更具说服力。 【KIMI】表单包含全部7个必要字段：姓名（text）、护照号（text）、出生日期（date）、目的地国家（select，6个国家齐全）、签证类型（radio，旅游/商务）、出发日期（date）、返回日期（date）。字段类型选用合理，HTML结构语义化良好，使用form标签包裹，正确的label关联，分组清晰（基本信息/签证信息/旅行日期）。但存在两个外部依赖问题：使用了CDN引入的Tailwind CSS和Google Fonts，与System Prompt要求'无需外部依赖，可直接在浏览器中独立运行'相冲突。虽然功能完整，但严格来说违反了'所有代码必须整合在单个HTML文件中，无需外部依赖'的核心要求。

进阶难度评测结果

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

模型生成产物

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

```html VisaPro - 智能签证申请系统 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animations */ .fade-in { animation: fadeIn 0.4s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .slide-in-right { animation: slideInRight 0.4s ease-out forwards; } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* File Upload Zone */ .upload-zone { border: 2px dashed #cbd5e1; transition: all 0.3s ease; } .upload-zone:hover, .upload-zone.drag-over { border-color: #3b82f6; background-color: #eff6ff; } /* Progress Bar Animation */ .progress-bar-fill { transition: width 0.1s linear; } VisaPro 我的申请 新申请 1 选择签证 2 个人信息 3 上传材料 4 费用确认 选择目的地与签证类型 目的地国家 请选择国家 签证类型 请先选择国家 申请人信息 姓名 (Full Name) 请输入姓名 国籍 中国 (China) 美国 (USA) 英国 (UK) 日本 (Japan) 其他 (Other) 护照号码 格式错误 (中国护照: E+8位数字) 护照有效期至 必须在返程日期后6个月有效 计划出发日期 不能早于今天 计划返回日期 不能早于出发日期 材料上传 支持拖拽上传 费用明细与确认 签证基础费 $0 服务费 $25.00 加急处理费 $0 总计 $25 加急处理 (Expedite) 缩短审核时间至 3-5 个工作日 我已确认所有信息真实有效，并同意 服务条款 和 隐私政策。 上一步 下一步 提交申请 所需材料清单 请先选择国家和签证类型... 当前费用 $0 完成度: 0% 我的申请记录 关闭 Notification /** * VisaPro Application Logic * Handles multi-step form, dynamic data, file simulation, and local storage. */ // --- Data Configuration --- const VISA_DATA = { 'USA': { name: '美国 (USA)', types: [ { id: 'B1/B2', name: '旅游/商务签 (B1/B2)', fee: 160, materials: ['护照', '照片', 'DS-160确认页', '在职证明'] }, { id: 'F1', name: '学生签 (F1)', fee: 160, materials: ['护照', '照片', 'I-20表格', '录取通知书', '财力证明'] }, { id: 'J1', name: '交流访问 (J1)', fee: 160, materials: ['护照', '照片', 'DS-2019表格'] } ] },...

AI 评审点评

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

【CLAUDE】该实现整体完成度约75%，在有限的单HTML文件约束内搭建了功能相对完整的多步骤签证申请系统。优点：三级联动数据驱动架构清晰，费用计算逻辑正确，核心表单验证（护照号正则、日期逻辑、有效期）均有实现，UI视觉质量较高，步骤引导体验较好。不足：「继续编辑草稿」功能缺失、图片缩略图预览未实现、页面刷新后当前填写进度丢失（localStorage仅存历史而非草稿状态）、存在若干运行时异常隐患（空指针、不存在的DOM节点引用）。整体是一个有明显亮点但实现不够严谨完整的中等质量作品。 【GEMINI】这是一个高质量的交付结果。模型不仅完美对齐了所有功能需求（如复杂的日期验证和费用联动），还在 UI 细节上做了很多加分项，如分步导航的视觉反馈、拖拽上传的样式切换以及侧边栏的实时进度监控。代码结构清晰，完全符合资深前端工程师的角色设定。 【KIMI】该实现是一个功能较为完整的签证申请表单系统，核心联动逻辑和费用计算正确，UI视觉质量较高，文件上传交互流程完整。主要扣分点在于：护照号验证未按国籍差异化实现（仅中国和通用两种）、日期边界条件处理有误（等于情况）、草稿编辑功能不完整、图片预览未实现、以及部分代码细节缺陷（不存在的main-form调用）。整体达到中等偏上水平，满足大部分功能需求，但在验证严谨性和功能完整性上仍有提升空间。

困难难度评测结果

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

模型生成产物

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

```html Global Visa Pro - 智能签证申请平台 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --secondary: #64748b; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --background: #f8fafc; --surface: #ffffff; --border: #e2e8f0; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--background); color: #1e293b; line-height: 1.6; } /* 步骤切换动画 */ .step-enter { opacity: 0; transform: translateY(20px); } .step-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease; } .step-exit { opacity: 1; transform: translateY(0); } .step-exit-active { opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; } /* 进度条动画 */ .progress-bar { transition: width 0.6s ease; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* 文件上传区域 */ .upload-zone { border: 2px dashed var(--border); transition: all 0.3s ease; } .upload-zone:hover { border-color: var(--primary); background: #f0f9ff; } .upload-zone.active { border-color: var(--primary); background: #f0f9ff; } /* 加载动画 */ .spinner { border: 3px solid #f3f4f6; border-top: 3px solid var(--primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 支付处理动画 */ .payment-processing { position: relative; overflow: hidden; } .payment-processing::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* 时间线 */ .timeline-line { position: absolute;...

AI 评审点评

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

【CLAUDE】该实现在单HTML文件中完成了一个相当复杂的多步骤签证申请系统，功能覆盖度高，数据驱动设计思路清晰，i18n、countryConfig、AppState三大核心数据结构组织良好。主要硬伤是违反了「禁止使用alert()/confirm()」的技术要求（clearDraft中使用confirm），步骤切换的离场动画未实际执行，草稿恢复后DOM回填不完整（只恢复了AppState但未将数据填回表单字段），以及部分验证规则（申请日期提前3个月限制）未实现。整体而言是一个思路正确、基础扎实但细节打磨不足的实现。 【GEMINI】这是一个极其优秀的大模型生成结果。它不仅完美兑现了所有功能需求（包括复杂的智能引导、团体模式、差异化国家配置），还在 UI 细节和代码工程化方面展现了资深全栈工程师的水准。系统在单 HTML 文件内实现了功能完备、逻辑严密、交互流畅的复杂表单系统，是数据驱动前端开发的优秀示例。 【KIMI】该实现是一个功能较为完整的多国签证申请系统，覆盖了5步骤向导、智能推荐、团体申请、材料上传、支付模拟、状态追踪等核心需求。UI设计专业度高，动画效果和视觉反馈丰富。但在表单验证严谨性（特别是团体成员验证、3个月申请窗口规则）、代码架构规范性（HTML实体编码、状态更新模式）以及部分交互细节（支付方式UI未切换、步骤退出动画缺失）方面存在可改进空间。整体达到可用水平，但距离生产级代码质量尚有距离。

相关链接

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

• 查看所有模型在此用例的表现：「旅行签证申请表单」
• 查看该模型的所有评测结果：kimi-for-coding
• 浏览同维度的其他用例：「表单设计」
• 返回排行榜首页