1. 摘要
本项目使用 TRAE SOLO 从零开始，在单次会话中完成了一套企业账户流量分析系统的高保真原型设计。该系统包含多维度数据统计、明细查询、参数配置、文件导出管理等功能模块，采用 Ant Design 设计规范，实现了专业级别的前端原型效果。整个过程无需编写任何代码，通过自然语言交互即可完成复杂的多页面、多组件、多交互的原型设计。
2. 背景
我是一名企业财务系统的产品经理，负责账户资金管理平台的需求设计与原型输出。在日常工作中，我经常需要根据业务需求迭代设计高保真的前端原型，用于与业务方、开发方进行需求确认和方案评审。传统方式下，设计一套包含多个页面、复杂表格、多级联动的原型，通常需要使用 Axure、Figma 等专业工具，耗时 2-3 天。现在希望通过 AI 工具大幅提升原型设计效率。
3. 实践过程
3.1 任务拆解
将企业账户流量分析系统拆解为以下核心模块：
• 企业账户流量统计页：多维度数据统计列表，支持合并单元格、同比展示、超链接跳转、合计行
• 企业账户流量分析页：多条件组合查询，支持合并单元格、导出功能
• 账户交易明细页：24列详细交易数据，支持收付属性标签、横向滚动
• 参数设置页：公式配置项，含输入框和保存按钮
• 下载导出文件页：导出历史记录列表，支持排序、分页
3.2 使用的 SOLO 能力
• 前端原型生成：通过自然语言指令生成完整的 HTML/CSS/JS 单页应用
• 浏览器实时预览：边设计边预览，即时确认视觉效果
• 图片识别与复现：上传参考设计图，AI 自动识别并复制页面要素与样式
• 元素级精确修改：通过浏览器选中元素 + 自然语言指令，精确调整任意组件的样式、内容、布局
• 批量数据处理：通过脚本批量生成模拟数据、计算合计值、添加超链接
3.3 关键操作过程
1. 初始原型搭建：描述系统整体架构（左侧菜单 + 右侧内容区），SOLO 生成基础布局和 Ant Design 风格样式
2. 统计页面开发：按需求添加查询条件、数据表格、分页组件，包含 16 列数据和 8 行模拟数据
3. 合并单元格实现：通过指令实现多级企业名称的 rowspan 合并，并支持动态调整合并规则
4. 超链接与页面跳转：为交易频次数据添加超链接样式，点击跳转至交易明细页，支持收/付动态切换
5. 图片参考复现：上传账户交易明细参考图，SOLO 识别页面要素后生成一致的列表格式和数据
6. 迭代优化：通过 30+ 次元素级修改，逐步调整字体、间距、对齐方式、复选框样式、合计行等细节
3.4 踩过的坑
• 合并单元格与新增列的冲突：在已有 rowspan 的表格中新增列时，需要同步调整所有受影响行的单元格合并逻辑
• 超链接数据解析失败：用脚本批量处理时，频次列包含 标签导致正则无法匹配，需要先清除 HTML 标签再解析
• 复选框样式迭代：默认 HTML 复选框在不同浏览器中样式不一致，最终采用自定义 SVG 复选框组件解决
• 浮动布局间距问题：查询条件中复选框组件的间距需要多次调整才能与设计图保持一致
4. 成果展示
最终产出为一套完整的高保真 HTML 原型，包含 5 个功能页面，采用 Ant Design 设计规范，支持多页面跳转、复杂表格交互、自定义组件等。
企业账户流量统计页面效果图：
功能清单：
• 企业账户流量统计：16 列数据表格，支持合并单元格、同比展示、超链接跳转、合计行
• 企业账户流量分析：多条件组合查询，支持合并单元格、自定义复选框、导出功能
• 账户交易明细：24 列详细交易数据，收付属性标签、横向滚动、分页
• 参数设置：公式配置项（大额付款/收款/可归集资金阈值）
• 下载导出文件：导出历史记录列表，支持排序、分页、文件下载
技术亮点：
• 纯 HTML/CSS/JS 单文件，无依赖，可直接在浏览器中打开
• Ant Design 5.0 设计规范，CSS 变量驱动主题
• 多页面 SPA 架构，支持页面间无刷新跳转
• 复杂表格：合并单元格、千分位格式化、合计行、超链接交互
• 自定义组件：SVG 复选框、组合输入框、标签组件
在线预览：
原型文件已部署至本地 HTTP 服务，可通过局域网访问预览。
5. 效果与总结
提效效果：
• 原本使用 Axure/Figma 设计同等复杂度原型需要 2-3 天，现在仅需 2-3 小时即可完成
• 迭代效率极高：通过浏览器选中元素 + 自然语言指令，平均每次修改只需 10-30 秒
• 无需专业工具：不依赖 Axure、Figma 等任何专业原型工具，降低了工具门槛
SOLO 在流程中做了什么：
• 自动生成了完整的 Ant Design 风格样式体系（CSS 变量、组件样式、动画效果）
• 通过图片识别能力，自动复现参考设计图的页面结构和数据格式
• 通过脚本执行能力，批量处理数据生成、合计计算、格式转换等重复性工作
可复用的方法：
• “先整体后局部”的原型设计策略：先生成完整架构，再通过元素级修改精调细节
• “图片参考 + 自然语言描述”的混合输入方式，比纯文字描述更精准
• “浏览器选中 + 指令修改”的迭代模式，适合高保真原型的精细调整场景