qwen3.8-flash 在「旅行签证申请表单」的评测结果

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

基本信息

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 旅行签证申请表 · VISA APPLICATION /* ============================================================ 设计令牌：护照 / 登机牌 视觉体系 ============================================================ */ :root{ --ink:#0a1826; /* 深蓝墨色（护照封皮） */ --ink-2:#102a44; --paper:#f5efe2; /* 证件纸白 */ --paper-hi:#fffdf6; --stamp:#c8102e; /* 印章红 */ --stamp-soft:#e8465f; --gold:#c9a227; /* 烫金 */ --gold-hi:#eac95e; --sea:#1c8a6d; /* 通过 / 有效 */ --text:#152838; --muted:#6f8296; --line:rgba(21,40,56,.14); --display:"Arial Narrow","Helvetica Neue Condensed","Liberation Sans Narrow","Roboto Condensed","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --body:"Avenir Next","Segoe UI",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Courier New",monospace; --r:4px; --shadow:0 30px 70px -25px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.35); } *{box-sizing:border-box} [hidden]{display:none !important} html,body{min-height:100%} body{ margin:0; padding:34px 18px 60px; font-family:var(--body); color:var(--paper); background: radial-gradient(1100px 620px at 78% -10%, #1b3b5c 0%, transparent 62%), radial-gradient(900px 520px at 8% 108%, #123049 0%, transparent 60%), linear-gradient(168deg,#071320 0%, #0a1b2b 45%, #061019 100%); background-attachment:fixed; -webkit-font-smoothing:antialiased; } /* ============================================================ 环境层：航线 + 地球经纬 + 网格 ============================================================ */ .ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .ambient .grid{ position:absolute;inset:-2px; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 78%); }...

AI 评审点评

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

【CLAUDE】这是一份质量极高的旅行签证申请表单实现。功能层面完全满足任务要求：7个必填字段齐全、验证逻辑精确完整（护照号正则、18岁周岁算法、日期逻辑链）、错误提示友好具体、成功页摘要信息完整。视觉设计上大幅超出「基础版」要求，以护照/登机牌为主题打造了沉浸式体验，包含动态SVG装饰、实时MRZ摘要条、完成度进度条、印章动画等精心设计的交互细节。代码质量优秀，语义化HTML、无障碍属性、响应式布局、打印样式一应俱全，注释清晰，结构合理。整体而言是一个可直接投入生产使用的高质量单文件表单应用。 【GEMINI】这是一份令人惊叹的高质量优秀答卷。大模型不仅完美、严谨地实现了所有功能性要求和表单验证逻辑，还在 UI 视觉设计、交互动效、代码健壮性、无障碍支持（A11y）以及用户体验（UX）上进行了极具创意的超预期发挥。整体代码结构优雅，可读性极强，是单文件原生表单开发的典范之作。 【KIMI】该实现是一份极为优秀的旅行签证申请表单，在功能完整性、验证精确性、视觉设计和代码质量四个维度均达到专业水准。验证逻辑严谨无漏洞，日期处理充分考虑时区和闰年等边界情况；UI 设计以护照/登机牌为灵感，形成了高度统一的视觉语言；代码组织良好，注释清晰，无障碍支持到位。虽在'基础版'需求下装饰元素略显繁复，但整体完成度极高，可直接作为生产级代码参考。

进阶难度评测结果

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

模型生成产物

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

```html VOYA · 旅行签证申请系统 tailwind.config = { theme: { extend: { colors: { ink: { DEFAULT:'#0D1B2A', 900:'#07101C', 800:'#0D1B2A', 700:'#16293F', 600:'#22405C', 400:'#6B87A3', 300:'#9FB4C7' }, paper: { DEFAULT:'#F2EEE6', 100:'#FBF9F5' }, stamp: '#C6362B', seal: '#0F7A6C', gold: '#B58A20', line: '#E4DED2' }, fontFamily: { display: ['"Bricolage Grotesque"','"Noto Sans SC"','system-ui','sans-serif'], body: ['"Public Sans"','"Noto Sans SC"','system-ui','sans-serif'], mono: ['"JetBrains Mono"','ui-monospace','SFMono-Regular','monospace'] } } } } /* ================================================================== 全局 / 背景层 / 动效 ================================================================== */ :root{ --ink:#0D1B2A; --ink2:#16293F; --paper:#F2EEE6; --card:#fff; --stamp:#C6362B; --seal:#0F7A6C; --gold:#B58A20; --line:#E4DED2; } *{ -webkit-tap-highlight-color:transparent; } html{ scroll-behavior:smooth; scroll-padding-top:104px; } body{ background:var(--paper); color:var(--ink); font-family:'Public Sans','Noto Sans SC',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* 背景：网格 + 光晕 + 噪点 + 航线 */ .bg-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; } .bg-glow{ background: radial-gradient(720px 420px at 8% -6%, rgba(15,122,108,.13), transparent 62%), radial-gradient(640px 480px at 96% 12%, rgba(198,54,43,.10), transparent 60%), radial-gradient(900px 600px at 50% 108%, rgba(13,27,42,.10), transparent 60%); } .bg-grid{ background-image: linear-gradient(to right, rgba(13,27,42,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(13,27,42,.045) 1px, transparent 1px); background-size:34px 34px; mask-image:radial-gradient(circle at 50% 30%, #000 20%, transparent 78%); } .bg-noise{ opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140'...

AI 评审点评

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

【CLAUDE】这是一份质量极高的单文件签证申请系统实现。代码在功能完整性、视觉设计和工程质量三个维度均表现出色，远超中等难度任务的预期水准。6国24种签证组合、完整的文件上传模拟流程、精致的护照预览+MRZ生成、localStorage配额降级策略等细节体现了深厚的前端工程经验。主要改进空间在于：部分字符串匹配式的条件判断可用结构化数据替代，移动端底部遮挡问题需处理，以及超长渲染函数可进一步拆分提升可维护性。 【GEMINI】这是一份教科书级别的优秀前端实现。不仅完美且超预期地完成了所有功能需求，还在UI/UX细节（如护照实时预览、MRZ机读码、数字滚动动画、打印回执）以及代码架构（如localStorage配额降级、防抖保存、Canvas图片压缩）上展现了极高的专业技术水平，无可挑剔。 【KIMI】该实现是一份高质量的前端工程作品，远超中等复杂度要求。视觉设计具有强烈的品牌辨识度，将签证主题融入UI细节（护照预览、MRZ码、印章动效）。功能层面三级联动、费用计算、文件上传、表单验证、数据持久化五大核心模块均完整实现且交互体验细腻。代码在单文件约束下保持了较好的模块化和可维护性，localStorage的配额降级策略体现了工程思维。主要优化空间在于验证规则的实时触发机制、XSS防护的完整性，以及部分正则匹配的严谨性。

困难难度评测结果

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

模型生成产物

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

以下是完整的单文件实现。设计上以「护照／签证申请文件」为视觉母题——深色桌面之上铺一张带防伪纹理的申请表，左侧是登机牌式的信息存根与实时 MRZ 机读码，配合印章、齿孔、条形码等只属于这个场景的元素。 ```html 环球签证中心 · Global Visa Console /* ===================================================================== 主题色彩系统 —— 全部通过 CSS 变量定义 「深色桌面 + 亮色申请文件」的双层视觉：桌面为墨蓝，文件为暖白纸张 ===================================================================== */ :root{ --ink-900:#07101C; --ink-800:#0B1A2C; --ink-700:#132844; --ink-600:#1D3A5E; --paper:#F5F2EA; --paper-2:#FFFDF7; --paper-3:#EAE4D6; --paper-4:#DCD4C2; --rule:rgba(11,26,43,.14); --rule-strong:rgba(11,26,43,.32); --stamp:#AF2637; --stamp-soft:rgba(175,38,55,.12); --gold:#B4801F; --gold-2:#E2B85C; --gold-soft:rgba(226,184,92,.18); --jade:#166F4F; --jade-soft:rgba(22,111,79,.12); --azure:#2A6394; --azure-soft:rgba(42,99,148,.12); --text:#0F1D2E; --muted:#5A6879; --muted-2:#8B97A6; --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:14px; --sh-doc:0 50px 90px -35px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.28); --sh-sm:0 1px 2px rgba(11,26,43,.08), 0 6px 18px -12px rgba(11,26,43,.28); --sh-lift:0 2px 4px rgba(11,26,43,.10), 0 18px 34px -18px rgba(11,26,43,.42); --f-display:"Bodoni Moda","Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif; --f-sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ease:cubic-bezier(.22,.85,.28,1); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--f-sans); font-size:15px; line-height:1.6; color:var(--text); background:var(--ink-900); min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ---------- 环境层：桌面纹理 + 极淡的航线动画（持续呼吸的活体背景） ---------- */ .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .ambient::before{ content:"";position:absolute;inset:-20%; background: radial-gradient(60% 50% at 12% 8%, rgba(42,99,148,.42), transparent 60%), radial-gradient(50% 45% at 92% 88%,...

AI 评审点评

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

【CLAUDE】这是一份功能覆盖度极高、视觉设计极具匠心的单文件签证申请系统实现。在1400+行JS中完整实现了5步向导、智能推荐引擎、团体申请、11国差异化配置、三层材料清单叠加、实时合规校验、模拟上传/支付/状态推送/面试预约、双语切换、LocalStorage持久化等全部需求点，且以「护照文件」为视觉母题的设计语言高度统一、专业感强。主要不足在于：全量重绘策略带来潜在性能问题、Step 5的支付触发逻辑存在重复调用隐患、团体成员的联系方式字段缺少独立校验。整体而言是一份接近生产级别的高质量实现。 【GEMINI】这是一个令人惊叹的、殿堂级的单文件前端实现。它不仅完美、超标准地完成了所有功能规格和技术要求，更在视觉设计、交互细节、表单验证严谨性以及代码架构上展现了极高的专业素养。视觉母题的引入让原本枯燥的表单系统变得极具趣味性和仪式感，是单文件复杂 Web 应用实现的典范之作。 【KIMI】这是一个极为出色的单文件复杂Web应用实现，在视觉设计、交互保真度和工程架构三个维度均达到专业级水准。作者成功将'签证申请'这一高度场景化的主题转化为沉浸式的UI体验，同时保持了功能完整性和代码可维护性的平衡。智能推荐引擎、三层材料配置体系、高保真支付模拟和状态推送机制均超出常规前端Demo的预期，展现了全栈级别的产品设计能力。 minor issues包括部分边界校验的覆盖度和超长函数的分割，但不影响整体质量。

相关链接

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

加载中...
100%