【TraeCode 上手记】用 TraeCode 做了一个番茄钟小工具,编程小白也能跑通

我想解决什么

最近学习的时候总是容易分心,想给自己做一个简单的番茄钟计时器,用来记录专注时间和休息时长。但自己完全不懂前端开发,手动从零搭建项目、写 HTML/CSS/JS 对我来说门槛太高了,于是想试试用 TraeCode 能不能快速实现。

我是谁

我是一名在校大学生,平时主要用电脑处理文档和写论文,几乎没有编程经验。之前一直想学点前端,但每次看到各种框架配置就劝退了。这次开学季看到 TraeCode 的活动,决定拿它来试试手,看看 AI 辅助编程到底能帮到什么程度。

我是怎么用顺的

下载安装 TraeCode 之后,登录就可以直接使用了,界面是全中文的,对新手很友好。我切换到 Builder 模式,在对话框里输入了一段需求描述:

帮我做一个番茄钟网页小工具,包含:25分钟专注倒计时、5分钟休息倒计时、开始/暂停/重置按钮,界面简洁好看,支持移动端适配。

输入之后,TraeCode 自动帮我拆解了任务,生成了完整的项目结构,包括 HTML、CSS 和 JS 文件。大概等了一两分钟,一个可以交互的番茄钟页面就出来了。

中间遇到一个小问题——倒计时结束后没有声音提醒。我直接在对话框里跟它说"倒计时结束时加一个提示音",它自动帮我修改了代码并应用了更改,整个过程不需要我手动改一行代码。

最让我觉得顺手的是:遇到报错的时候,不需要自己去复制粘贴到搜索引擎查,直接在终端里选中报错信息,点击"添加到对话",AI 就能帮我分析原因并一键修复,体验非常好。

最后做成了什么

最终我得到了一个功能完整的番茄钟网页工具,包含:

  • 25 分钟专注倒计时 + 5 分钟休息倒计时
  • 开始 / 暂停 / 重置按钮
  • 倒计时结束声音提醒
  • 简洁美观的界面,手机端也能正常使用

整个过程从打开 TraeCode 到项目跑通,大概花了不到 20 分钟。

给后来者的一句话建议

不要怕自己不会写代码,先把需求描述清楚、说具体,TraeCode 会帮你把想法落地。遇到问题别慌,善用对话框直接描述问题,比自己去搜索引擎翻半天高效得多。

1 个赞