【正文】 至少包含以下 4 个部分，可以增加额外的部分（比如自我介绍、经验总结、踩坑复盘等）
你是谁 ：一名汉语言文学专业的应届毕业生，对编程一窍不通的文科生。
你是怎么用 TRAE 把 Demo 做出来的 ：
说实话，报名这个比赛的时候我心里特别没底。我学了四年的文学、写作和古代汉语，我毫无编程知识
但我心里一直有个想法：能不能做一个帮助求职者练习面试的工具？因为我身边太多同学，包括我自己，都在求职路上碰了无数钉子。
抱着试试看的心态，我打开了TRAE。我把心里的想法用最朴素的语言描述给它听：“我想做一个AI面试陪练工具，用户输入岗位描述，AI提问，用户回答，然后AI给反馈。”
没想到的是，TRAE真的帮我把这个想法变成了现实！
最让我震撼的瞬间 ：
第一天，我只是把创意介绍复制粘贴给TRAE，它就帮我搭好了整个项目框架——前端React项目、后端API服务、数据库配置，甚至连项目的目录结构都帮我安排得整整齐齐。那一刻我盯着屏幕看了好久，心想： 原来不懂代码也能做项目？！
开发过程中，我就像在跟一个耐心的搭档聊天：
- “我想要这个按钮是绿色的” → TRAE改好了
- “我想让用户能用语音回答问题” → TRAE帮我实现了语音识别和合成
- “我想加一个数据可视化的成长看板” → TRAE连图表库都帮我选好了
最让我感动的是，当我遇到bug不知道怎么解决时，TRAE会一步步引导我排查问题，用我能听懂的方式解释技术原理，而不是甩给我一堆专业术语。
TRA帮我跨过的最大的坎 ：
对我来说，最大的坎就是"我不懂技术"这个心理障碍。以前我总觉得，没有技术背景就不配做产品。但TRAE让我明白： 创意和解决问题的热情，才是最重要的。技术只是实现想法的工具，而TRA就是那个帮你掌握工具的人。
现在，我不仅做出了一个能运行的面试模拟工具，还学会了很多以前想都不敢想的技术概念。更重要的是，我找到了自信——原来文科生也能做出很酷的东西！
1. Demo 简介
-
是什么：一个基于 AI 的网页端面试模拟应用，帮助求职者在面试前进行专业的模拟练习。
-
面向谁：应届毕业生、跨行业转行求职者、有跳槽需求的职场人。
-
主要功能：
-
AI模拟面试 ：输入目标岗位JD，AI扮演面试官进行多轮模拟提问
-
多维反馈分析 ：STAR结构分析、JD关键词命中、逻辑连贯性、量化数据检测、回答深度评分
-
语音/视频练习 ：支持文字、语音、视频三种练习模式，全方位锻炼面试能力
-
专项训练模块 ：自我介绍定制、简历问答训练、压力面试特训、群面模拟。
2. Demo 创作思路
-
灵感来源：我自己的真实经历
毕业求职，我面试时几乎全部失败，我意识到我欠缺面试经验。我身边同样是应届毕业生的同学们，也有这样的问题。我去找面试资源的时候：
- 题库APP：只有题目，没有反馈，练了也不知道自己哪里错
- 找同学模拟：大家都在忙自己的事，很难凑时间，而且同学也不是专业面试官
- 付费网课：价格昂贵，我一个学生根本负担不起
那段时间真的很焦虑。我就在想：如果有一个免费的、能根据我的岗位需求个性化提问、还能给我详细反馈的面试模拟工具就好了。然后我就报名了TRAE创造力大赛，决定自己做一个。
-
想解决的问题：对我来说，这些问题都是真实存在的：
- 不知道自己哪里错 ：回答完面试题，完全不知道面试官怎么看，是逻辑有问题？表达不清？还是答非所问？
- 缺乏真实压力感 ：对着镜子练和面对真人面试官完全是两回事，一紧张就大脑空白。
- 针对性不足 ：投不同岗位需要准备不同内容，但题库都是通用的。
- 练完就忘 ：缺乏复盘体系，练了很多次但不知道自己进步了多少。
-
为什么做这个方向：
作为一名应届毕业生，我太清楚求职的难了。每年有上千万应届生涌入职场，但高质量的面试辅导资源却非常稀缺。我希望这个工具能帮助像我一样的普通求职者，降低面试准备的门槛，让每个人都有机会获得专业的面试练习。
3. Demo 体验地址
grand-horse-07b90b.netlify.app
4. TRAE 实践过程
我把整个项目拆解成了5个阶段：
第一阶段 项目初始化，创建核心面试模拟功能
关键操作 ：
- 使用TRA的"创建React+TypeScript项目"能力一键初始化
- 配置TailwindCSS、Zustand状态管理、Lucide图标库
- 设置Vite代理，将/api请求转发至Express后端
.3915825681014010:ae98d03c5b3f8c5ded373e107b4cd3fc_6a4debd88f2d0c497723fbcc.6a4dee53b6e358ea28b6e259.6a4dee51e7a5cd0fce1256e6:Trae CN.T(2026/7/8 14:29:39)
第二阶段 创新性优化（JD关键词提取、动态追问、面试官风格）
.3915825681014010:2e3fd9238172cc58db1adffa50c0ea39_6a4debd88f2d0c497723fbcc.6a4df52eb6e358ea28b6e32f.6a4df52de7a5cd0fce1256e7:Trae CN.T(2026/7/8 14:58:54)
创新性功能开发 - JD关键词提取与动态追问：
关键Prompt ：“帮我实现JD关键词智能提取功能，从用户输入的岗位描述中提取关键技能，并生成四种类型的问题：行为型、技术型、情境型、文化适配型”
技术实现 ：
- 后端使用正则匹配和关键词库提取技能标签
- 根据技能标签动态生成对应类型的面试问题
- 实现动态追问机制：当回答评分低于4分时自动触发追问
第三阶段 语音/视频功能扩展
.3915825681014010:a6c10c0d9219dfdfb0a7186a89f60212_6a4debd88f2d0c497723fbcc.6a4e0798b6e358ea28b6e4c4.6a4e0797e7a5cd0fce1256ed:Trae CN.T(2026/7/8 16:17:28)
关键技术 ：
- Web Speech API实现语音识别（SpeechRecognition）和语音合成（SpeechSynthesisUtterance）
- getUserMedia API获取摄像头流进行视频预览
- AudioContext + AnalyserNode实现实时音频可视化
第四阶段 专项训练模块（4个子模块）
.3915825681014010:fc1aba3ff132c0107374f16c79f90074_6a4debd88f2d0c497723fbcc.6a4e1776b6e358ea28b6e636.6a4e1775e7a5cd0fce1256f1:Trae CN.T(2026/7/8 17:25:10)
第五阶段 复盘成长体系 + UI全面改造
成长复盘体系技术实现 ：
.3915825681014010:f68bb969cf2391f6949ef1e3b2c734b7_6a4debd88f2d0c497723fbcc.6a4e2e9cb6e358ea28b6e720.6a4e2e9be7a5cd0fce1256f4:Trae CN.T(2026/7/8 19:03:56)
- Zustand + localStorage实现数据持久化
- Recharts库实现能力雷达图和趋势折线图
- 每日打卡系统、等级经验系统、错题收藏功能
ui设计规范 ：
.3915825681014010:f1e8497bbb289157bb8949f164f28ce9_6a4debd88f2d0c497723fbcc.6a4e3753b6e358ea28b6e7a8.6a4e3752e7a5cd0fce1256f7:Trae CN.T(2026/7/8 19:41:07)
- 主色调：sage绿色（温暖、自然）
- 点缀色：amber琥珀色（活力、热情）
- 标题字体：Fraunces（优雅衬线体）
- 正文字体：Plus Jakarta Sans（现代无衬线体）
- 整体风格：简洁、温暖、清爽、轻松
当然，开发过程中也遇到了不少困难
踩过的坑：
坑1：端口冲突问题
后端服务默认使用3001端口，但有时会被其他进程占用。我通过查找并杀死占用进程，然后重新启动服务。
坑2：TypeScript类型错误
问题原因： keyword 的类型是 string | ParsedQs | (string | ParsedQs) ，需要先进行类型判断。
坑3：Web Speech API兼容性
Safari浏览器不支持 SpeechRecognition 接口，需要添加兼容性检测和降级方案：
坑4：TailwindCSS自定义类名不存在
scale-98 不是Tailwind的标准类名，需要使用 scale-95 或自定义配置。
坑5：状态管理复杂
面试流程涉及多个状态（当前问题、回答历史、反馈信息、面试进度、模式切换等），最初使用React Context导致代码臃肿。后来改用Zustand，代码量减少了40%，开发效率大幅提升。
后续希望加入联机功能，比如群体面试可以匹配闯关。增加面试官功能，用户可以体验面试官，和好友互相面试，互相提供建议。
5. 对应的报名审核通过的帖子链接:【学习工作赛道】 +AI 面试陪练官 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区