用 SOLO 模式 30 分钟搞定 智能点名系统 | 围巾哥萧尘🧣
摘要： 本文将详细介绍如何从零开始，利用TRAE AI辅助开发一个功能丰富的智能点名系统。该系统支持名单导入、正序与乱序点名、名单高亮切换、滚动速度调节等功能，并已成功部署上线。我们将分享整个开发流程，包括初始构想、提示词工程、功能迭代、问题调试及最终部署。
关键词： 智能点名系统；TRAE AI开发；提示词工程；功能迭代；在线部署
1、系统概述与功能展示
大家好，我是围巾哥萧尘，今天（2025年9月2日上午10点半）我们将演示并讲解一个智能点名系统的开发过程。该系统旨在提供一个便捷、高效的点名解决方案，其主要界面分为功能区和赞赏区。
核心功能包括：
-
名单导入： 支持CSV模板下载后修改导入，后期还增加了Excel导入功能。
-
点名模式：
- 正序点名： 快速按顺序显示名字，无需等待。
- 乱序点名： 带有名字晃动和礼花效果，模拟随机抽选，增加趣味性。
-
界面效果： 点名时名字字体高亮，有切换效果，风格有趣，支持滚动调节速度，字体大小可调。
-
在线部署： 系统已部署上线，用户可通过名为**call-name-web.vercel.app/**的网站进行使用。
2. 开发流程：从构想到实现**
整个开发流程涵盖了从构思、功能增加、Bug修改到最终上传和部署的完整链条。
2.1 初始需求与提示词工程
在开发初期，我们通过精确的提示词（Prompt）向TRAE AI描述了我们想要构建的系统。
对应的提示词： ""帮我制作一个点名交互html网页，点名的名字字体高亮，要有切换效果，风格有趣，不要太简洁，有滚轮调节速度，字体要大。还要支持导入学生名单"" 。
AI基于此提示词，快速生成了需求文档和技术开发文档，并完成了初步的页面开发。
2.2 功能迭代与优化
尽管AI快速生成了初始版本，但为了更好地满足用户需求和提升体验，我们进行了一系列的功能调整和增强。
- 优化名字显示： 初始点名时只显示序号，无法显示名字，经过调试后成功显示出学生名字。
- 调整页面布局： 将原先的上下布局调整为两端居中布局，使界面更美观。
- 新增快速正序点名： 增加了无需等待即可快速显示名字的正序点名功能。
- 提供Excel等导入模板： 为了方便老师修改学生名单，系统提供了可下载的导入模板，初版未包含此功能，后续通过手动添加完成了Excel导入功能。
- 增加二维码赞赏功能： 为了支持开发者，系统增加了赞赏功能，在相应位置增加了二维码，方便用户支持。
2.3 问题调试
在开发过程中，我们对多个地方进行了调试。例如，点名名字的显示问题（从序号到名字）和页面布局的调整（从上下布局到两端居中布局）都是通过多次调试完成的。
2.4 部署与上线
开发完成后，我们将代码上传并进行了在线部署，主要分为三个阶段：
2.4.1. 本地开发完成： http://localhost:8001/，确保所有功能在本地运行正常。
2.4.2. 代码推送到仓库：
使用Git智能体大佬（我用 TRAE 做了一个有意思的Agent 「Git 智能体大佬」。 点击 s.trae.ai/a/439728 ）将代码推送到云端代码仓库。
初期没有提供远端地址，我们手动指定了一个远端地址，从而完成了代码的上传，构建了远程仓库。
GitHub地址：<github.com/xiaoweiruby...
已公开，用于云端代码仓库管理。
2.4.3. 云端部署： 完成了云端部署，使得其他同学也能使用。部署的网站名为call-name-web.vercel.app，
大家可以使用该网站进行点名。
3. 总结
这个智能点名系统的开发过程展示了TRAE AI辅助开发的高效性，同时也强调了人工迭代和优化的重要性。通过精确的提示词工程、持续的功能增强、Bug修复以及规范的部署流程，我们成功构建了一个实用且用户友好的点名系统。
如果您觉得这个系统好用，请务必支持开发者，这将鼓励更多开发者创造出更多优秀的作品。大家可以尝试使用，也可以参考本教程自行开发点名系统。