摘要:
本次参赛作品为塔罗牌占卜小程序,全程使用TRAE SOLO智能体完成全流程开发,从需求拆解、UI设计、逻辑编写到功能调试,全部由AI自动生成,无需手动编写核心代码。
背景:
本人是大专学历,计算机相关专业,主修前端开发方向,熟悉HTML、CSS、JavaScript基础开发,目前专注于AI辅助编程与小程序实战开发,希望通过本次赛事锻炼项目落地能力,提升全流程开发经验。
核心功能:
1. 完整塔罗牌库,支持经典韦特塔罗78张牌面展示
2. 多牌阵选择(单牌阵/三牌阵),满足不同占卜需求
3. 沉浸式洗牌抽牌动画,交互流畅
4. 专业解牌文案生成,结果清晰易懂
5. 结果一键复制分享,适配社交传播
开发亮点:
-
纯前端实现,可直接在浏览器打开运行,无需后端部署
-
界面美观简洁,适配移动端/PC端
-
代码结构清晰,可直接二次开发扩展功能
本次开发充分验证了TRAE SOLO的全流程开发能力,从0到1快速落地完整产品,大幅提升开发效率,完美契合本次「AI无限职场」活动主题。
项目结构:
tarot-taro-app/
├── dataTaroData.js # 项目入口/全局数据
├── images/ # 塔罗牌图片、图标等静态资源
├── cardDetail/ # 塔罗牌详情页
│ ├── cardDetail.wxml
│ ├── cardDetail.wxs
│ └── cardDetail.js
├── deck/ # 牌库、洗牌逻辑
│ ├── deck.js
│ ├── deck.wxml
│ └── deck.wxs
├── divination/ # 占卜核心页面(抽牌/选牌阵)
│ ├── divination.js
│ ├── divination.wxml
│ └── divination.wxs
├── history/ # 占卜历史记录页
│ ├── history.js
│ ├── history.wxml
│ └── history.wxs
├── index/ # 小程序首页
│ ├── index.js
│ ├── index.wxml
│ └── index.wxs
└── interpretation/ # 解牌结果页(你当前打开的页面)
├── interpretation.js
├── interpretation.wxml
└── interpretation.wxs
项目截图:
与trae的沟通历程:
参赛感受:
作为一名大专前端专业的学生,这次用TRAE SOLO从零开发塔罗牌小程序,对我来说是一次超有意义的实战成长。
从最开始只有一个模糊的想法,到AI帮我拆解需求、生成完整代码、调试功能,再到最后做出一个能正常运行、有完整交互的成品,整个过程让我真切感受到了AI辅助开发的强大。它不仅帮我大幅降低了开发门槛,让我能快速把想法落地,更让我对前端开发、小程序全流程有了更系统的理解,也坚定了我继续深耕前端、用AI提升开发效率的方向。
这次参赛,不仅是一次作品展示,更是对我学习成果的一次检验。能把课堂上学的HTML、CSS、JavaScript知识,结合AI工具落地成完整产品,让我对自己的专业能力更有信心,也为未来的职业发展积累了宝贵的实战经验。非常感谢这次活动,给了我们年轻开发者一个展示自己、锻炼能力的平台。
在未来,我希望我可以成为一个优秀的人。







