0. 先和大家打个招呼吧 
-
大家好！我是一名参与琶洲算法点心杯的在职6年的工程师，零基础前端开发经验，本次借助 TRAE 完整落地粤语文化 AI 工具 Demo。
最开始我只会模糊说出 “做一个能识别粤语、学粤语的网页”，TRAE 会一步步引导我拆分功能、定界面风格、补全交互逻辑。最让我惊喜的是不用手写代码，一句需求就能生成完整可运行 HTML，直接跨过了前端代码编写、页面适配两大原本完全搞不定的门槛。从框架搭建、语音模块模拟到打包导出全程靠对话完成，真正实现想法零代码落地。
1. Demo 简介
-
是什么：单文件可离线运行的交互式静态 HTML 网页工具，解压后浏览器直接打开使用
-
面向谁：大湾区学生、文旅从业者、粤语非遗文化爱好者、本地中老年居民
-
主要功能： 1.多片区粤语语音模拟转写，支持广府、粤西、粤北方言文本输出； 2.广式点心 + 粤语文创 AI 文案一键生成，适配早茶门店宣传、方言短视频； 3. 粤语口语跟读教学面板，标注发音难点辅助零基础用户学习。
2. Demo 创作思路
-
灵感来源：报名琶洲算法点心杯粤语识别赛，实操中发现普通大众没有轻量化免费粤语 AI 工具，方言数字化传承缺少普惠载体，因此构思面向普通人的交互网页 Demo。
-
想解决的问题：市面通用语音工具对分片粤语识别差、部署门槛高，大众学习、传播粤语缺少集转写、教学、文创创作一体的简易工具。
-
为什么做这个方向：粤语属于岭南非遗文化，贴合大湾区本土主题；纯前端 HTML 无需后端，TRAE 可快速完成完整 Demo，轻量化工具覆盖普通人日常使用场景，兼具文化传播与便民价值。
3. Demo 体验地址
index.html (328.6 KB)
4. TRAE 实践过程
-
-
需求梳理阶段：向 TRAE 输入琶洲点心杯背景 + 粤语工具完整需求，生成产品需求文档与页面结构草图；
-
基础页面搭建：使用 TRAE Auto 模式生成国风岭南主题网页基础框架、导航栏、三大功能分区布局；
-
交互模块开发：分轮次对话，依次生成语音录制模拟、粤语转写、文案生成、跟读教学交互代码；
-
细节迭代优化：调整移动端适配、字体字号、粤语文化视觉元素，修复页面交互卡顿问题；
-
成品导出打包：指令 TRAE 整合全部代码，校验功能完整性，输出单文件 HTML 并打包为 Zip。
-
Session001：.1980648465383258:a7bc420d572728cc8990427797b38d79_6a4f53563f544a76b44197d7.6a4f536a3f544a76b44197d9.6a4f5367a6e68019303eca9b:Trae CN.T(2026/7/9 15:53:14)（整体需求 + 页面框架搭建对话+语音识别、粤语教学功能开发对话） Session002：.1980648465383258:3ea485c41bca1ee4a76cf248365b091d_6a4f53563f544a76b44197d7.6a4f5cc93f544a76b441994d.6a4f5cc7a6e68019303eca9c:Trae CN.T(2026/7/9 16:33:13)（页面优化、HTML 打包导出对话）
5. 对应的报名审核通过的帖子链接
