为了帮你全面测试 VTJ.PRO 的 AI 生成能力，我为你设计了 10 个覆盖不同场景和复杂度的经典测试案例。这些案例从中后台管理系统到营销页面、从数据可视化到复杂交互逻辑均有涉及，旨在考察 VTJ.PRO 对业务需求的理解、布局的合理性以及样式的美观度。
每个案例都附带了可以直接复制使用的详细提示词。
测试前准备
- 访问方式：你可以通过访问 VTJ.PRO 的在线平台
https://app.vtj.pro进行快速体验，或执行npm create vtj@latest在本地部署 。 - 输入模式：在 VTJ 的 AI 助手中选择文本输入模式 。
案例一：企业级仪表盘（数据可视化）
- 测试目的：考察 AI 对图表库（如 ECharts）的调用能力及复杂卡片布局的生成。
- 场景描述：生成一个科技公司使用的运营数据大屏首页。
- 提示词：
请生成一个科技风的企业级数据仪表盘页面。页面顶部是日期选择器和刷新按钮。主体部分由三行组成：第一行展示四个核心指标卡片（总销售额、访问量、转化率、退款金额），需要有图标和趋势对比。第二行左侧是一个面积图展示"流量趋势"，右侧是一个饼图展示"设备来源"。第三行是一个包含头像、昵称、消费金额和会员等级的用户排行榜表格。整体风格要求现代、大气，使用深蓝色渐变背景，卡片带有毛玻璃效果。
- 生成效果：
案例二：电商商品管理列表
- 测试目的：测试复杂表格（带图片、标签、操作按钮）和筛选表单的生成能力。
- 场景描述：后台管理系统中常见的商品列表页。
- 提示词：
创建一个电商后台的商品管理页面。顶部需要有一个"新建商品"的主要按钮。上方是筛选区域，包含商品名称输入框、状态选择器（上架/下架）和分类选择器，以及"查询"和"重置"按钮。下方表格需要展示商品图片（缩略图）、商品标题、价格、库存、销售状态（使用不同颜色的标签显示）以及操作列（编辑、下架、删除）。表格支持分页。整体使用浅色主题，整洁清晰。
- 生成效果：
案例三：金融信贷审批工作台
- 测试目的：模拟 VTJ.PRO 官方案例 ，测试 AI 对复杂业务流和标签页的理解。
- 场景描述：银行或金融公司内部的审批系统界面。
- 提示词：
生成一个专业的金融信贷审批工作台页面。页面布局采用左右结构。左侧是一个较窄的导航菜单，包含"待审批"、"已审批"、"所有申请"等选项。右侧顶部显示当前审批官的姓名和角色。主体区域默认显示"待审批列表"，列表项包括申请人姓名、申请金额、申请时间和一个"查看详情"的按钮。点击详情需要有一个弹出的模态框，模态框内展示客户基本信息、信用评分和风控建议。要求设计风格严谨、专业，使用蓝色作为主色调。
- 生成效果：
案例四：SaaS 服务官网营销首页
- 测试目的：测试 AI 对非后台类、偏营销设计的前端页面构建能力。
- 场景描述：一个面向开发者的工具产品落地页。
- 提示词：
请设计一个现代简洁的 SaaS 产品营销首页。包含导航栏（Logo、产品、价格、文档、登录/注册按钮）。Banner 区需要一个大标题："AI 驱动的 Vue 低代码平台"，副标题说明核心优势，以及两个按钮："开始免费试用"和"查看文档"。下方需要展示三个核心功能卡片，卡片带图标、标题和描述。再往下是一个包含"我们的客户" Logo 墙的区域。底部是页脚，包含版权信息和友情链接。整体风格要有科技感和呼吸感，留白得当。
- 生成效果：
案例五：用户权限管理（角色配置）
- 测试目的：测试树形控件、穿梭框或复杂权限表格的生成。
- 场景描述：为系统管理员配置角色权限的界面。
- 提示词：
生成一个权限管理系统中的"角色配置"页面。页面分为左右两栏。左侧是一个树形结构，展示组织架构（公司 -> 部门 -> 小组）。右侧上半部分是角色基本信息表单（角色名称、描述）。右侧下半部分是权限分配区域，使用一个包含模块名称、页面权限（增、删、改、查）的表格来展示，使用复选框来控制权限。点击"保存"按钮。界面需要清晰展示层级关系，避免混乱。
- 生成效果：
案例六：数据监控分析看板
- 测试目的：结合地图或实时数据组件的生成能力。
- 场景描述：智慧城市或物流行业的监控面板。
- 提示词：
创建一个智慧交通的数据监控页面。页面上方是一个搜索框（用于搜索路段）。主体区域左侧是一个中国地图的简化展示（可以用占位图表示），地图上需要有热点标记。右侧是一个实时更新的"事件列表"，展示交通事故或拥堵信息，每条信息包含位置、事件等级（高/中/低）和发生时间，使用不同颜色的标签区分等级。底部是一个折线图，展示全天拥堵指数变化。风格要求硬朗、信息密度高。
- 生成效果：
案例七：简洁大气的登录/注册页
- 测试目的：测试表单验证和卡片/分割布局的美观度。
- 场景描述：现代 Web 应用的统一登录入口。
- 提示词：
设计一个左右分栏的登录页面。左侧占 40% 宽度，放置一个抽象的品牌插画或渐变图形，以及品牌标语。右侧占 60% 宽度，居中放置一个登录卡片。卡片内包含"登录"和"注册"两个标签页。登录页需要有手机号/邮箱输入框、密码输入框、记住密码复选框和登录按钮。注册页需要增加昵称、确认密码和短信验证码发送按钮。背景使用柔和的渐变，卡片添加淡淡的阴影，提升质感。
- 生成效果：
案例八：个人中心/账户设置
- 测试目的：测试步骤向导、头像裁剪或 Tab 表单的布局。
- 场景描述：用户个人资料管理和安全设置。
- 提示词：
生成一个"账户设置"页面。页面布局采用头部导航 + 侧边栏二级导航（我的账户、安全设置、通知设置）。默认展示"我的账户"：左侧是头像展示和上传按钮，右侧是昵称、性别、生日的编辑表单。点击侧边栏的"安全设置"，切换为修改密码和绑定手机号的表单。要求 UI 元素对齐工整，使用 Element Plus 风格的组件。
- 生成效果：
案例九：工单/任务处理中心
- 测试目的：测试卡片列表、时间轴和步骤条的混合布局。
- 场景描述：企业内部 IT 支持或客服工单系统。
- 提示词：
请生成一个工单处理页面。页面顶部是一个步骤条，显示"待处理"、"处理中"、"已完成"。下方左侧显示工单的详细描述，包含提交人、提交时间和问题描述文本。右侧显示该工单的处理记录，以时间轴的形式展示（如"客服已接单"、"已转交技术部"）。底部有一个输入框和发送按钮用于回复。整体设计需要简洁、干净，突出对话和流程。
- 生成效果：
案例十：AI 智能体配置界面
- 测试目的：测试滑动条、开关等高级控件以及属性配置面板的生成。
- 场景描述：未来趋势，配置一个自定义 AI 助手的界面 。
- 提示词：
创建一个 AI 智能体配置界面。左侧是智能体的头像（可用占位图）和名称输入框。右侧是配置选项，使用卡片分组。第一组"基础设置"：包含模型选择下拉框（GPT-4/Claude）、温度控制滑动条（0-1）。第二组"功能开关"：包含联网搜索开关、上下文记忆开关。第三组"提示词"：提供一个大的文本输入框用于填写系统提示词。右上角有一个"保存配置"和"预览"按钮。风格要求未来感，可以使用毛玻璃效果。
- 生成效果：
最后让AI做个主页
- 提示词：
新建一个主页，设计一个页面列表，分别链接到当前的10个页面
- 生成效果：
测试建议
- 逐步迭代：如果一次生成的页面不够完美，VTJ.PRO 支持多轮对话。你可以继续输入“把表格放在右边”、“把颜色改成浅蓝色”等指令进行增量修改 。
- 设计稿辅助：如果你有这些页面的草图或原型图，可以配合使用 VTJ.PRO 的图像上传功能，将设计稿截图发给 AI，生成效果会更精准 。
- 代码审查：生成后，利用 VTJ.PRO 的“双向代码转换”功能查看生成的 Vue 代码是否规范、整洁，这也是衡量 AI 能力的重要指标 。
希望这 10 个案例能帮助你全面评估 VTJ.PRO 的 AI 能力。如果在测试中遇到有趣的生成结果，欢迎随时分享。 生成的应用访问地址：app.vtj.pro/web/samchen…
P.S. VTJ.PRO 是一个开源项目，代码仓库：gitee.com/newgateway/…
