昨天在群里看到有朋友想要用 SOLO 做个抽奖 demo，正好恰逢 TRAE 被迫下线了 Claude 模型，今天咱们就借这个需求试试 SOLO 新模型效果如何。
背景
背景比较简单，就是抽奖，我们设定为上传 Excel 的方式。
Excel 主要包括以下列：
- ID
- 姓名
- 手机号
测试数据如下：
当然，你要想要更多，可以让 TRAE 帮忙生成。
需求及提示词
按照我的习惯，会分为业务、界面、技术进行提示词整理。
业务
最重要的部分，主要描述清楚我们的目标。
主要就是指定 Excel 的结构，以及描述整个操作流程。
客户上传一个excel，excel中包括ID、姓名、手机号三列，然后录入抽奖数量，并点击"抽奖"按钮，开启随机抽奖，抽奖过程添加动效。界面
分条列出自己想要的界面情况，可以是各种风格要求，也可以是布局效果。
为了简化效果，我希望最终结果是在一个页面上，并在首屏展示（这点初版没有实现），并且不采用后端。
界面风格则是直接参考 TRAE 官网。
diff
- 单一页面
- 尽量把元素呈现在首屏中，方便投屏展示
- 暂不使用后端服务
- 界面风格参考截图技术
按照个人喜好，设定技术栈相关内容。
这里主要指定了初始化项目的方式，以及设置主要语言为 Vue，因为 SOLO 默认好像比较喜欢 React，但我不会 React。
diff
- 在当前目录使用vue cli初始化项目工程，使用 vue3 ，其他默认即可。完整提示词
如果想要跟做的话，下面是完整的提示词，记得上传一个自己喜欢的界面截图。
markdown
请在当前路径下帮我实现一个抽奖应用。
## 业务
客户上传一个excel，excel中包括ID、姓名、手机号三列，然后录入抽奖数量，并点击"抽奖"按钮，开启随机抽奖，抽奖过程添加动效。
## 界面
- 单一页面
- 尽量把元素呈现在首屏中，方便投屏展示
- 暂不使用后端服务
- 界面风格参考截图
## 技术
- 在当前目录使用vue cli初始化项目工程，使用 vue3 ，其他默认即可。分析设计
我比较喜欢 SOLO 的一点就是它会先进行分析设计，产出"产品"、"技术" 2 个文档，可以快速确定 AI 思路是否符合我们预期。
指令
直接使用上一步的提示词。
过程
结果
按预期生成了 2 个文档。
其中产品文档包括介绍、特点、页面规划、流程、设计要求等等，非常完善。
下图是业务流程图 和设计风格，可以看到设计风格还是比较准确的。
架构文档就算了，这么小的需求，有没有都不怎么影响。
这 2 个文档可以直接编辑，也可以把自己的想法发给 SOLO，让它自行更新文档。
文档确认后，可以直接点击"确认，开始开发"或者发送"按照文档进行开发"指令即可开始生成。
初版开发
整个过程都是自动化，其实没有太多需要说明的地方。
就是按照"任务清单"进行执行，清单如下：
- 使用Vue-CLI初始化Vue3项目工程
- 安装项目依赖(xlsx、element-plus等)
- 创建主应用组件LotteryApp.vue
- 实现文件上传组件FileUpload.vue
- 实现Excel解析功能模块
- 实现随机抽奖算法模块
- 创建参与者列表组件ParticipantList.vue
- 实现抽奖设置组件LotterySettings.vue
- 创建抽奖动画组件LotteryAnimation.vue
- 实现中奖结果展示组件WinnerDisplay.vue
- 应用样式设计(黑色背景+霓虹绿主题)
- 添加动画效果和交互优化
- 测试和调试所有功能
结果
实现效果非常完善。
效果
我们先简单看下效果，后面会放置完整截图。
优化
结果还是比较可以的，只有一个小地方需要优化，就是预览数据的表格间隔行效果有些问题。
并且，当表格数据特别多时，参与人数占据太高的空间也不太好，我们一个指令优化下。
指令
参与人员列表中去除斑马条纹表格。
表格固定高度，超过高度后在区域内滚动。最终效果
终于可以给大家展示下了。
初始效果
抽奖完成效果
为了更好地秀一下，我调整抽奖数量为 2，并做了个简单录屏。
结语
虽然刚开始因为没有限定 cli 方式初始化项目，导致回滚过一次，但整个体验还算可以。
当然，需求太小，我们还不能说新的模型依然能打，但最起码能用，后续我们再试试大点的需求效果如何。
另外提醒一点，新模型在执行中经常出现文档、思考过程是英文的情况，大家如果感觉不习惯，可以在提示词中增加中文要求。