【TraeCode上手记】零基础挑战:用一句话让AI帮我写出待办事项应用

我这次想解决什么,或者想试什么
作为一名非计算机专业的学生,我一直对编程很好奇,但每次看到满屏的英文代码就头疼。这次参加 TraeCode 上手记活动,我想测试一下 TraeCode 的“Builder 模式”到底有多强大——能不能真的让我一行代码都不用写,仅靠自然语言描述,就能从零搭建一个实用的网页小工具。

我是谁,为什么这件事对我重要
我是一名大二学生,平时有记录日常任务和读书计划的习惯,但市面上的 App 要么广告太多,要么需要繁琐的注册。如果能自己做一个极简的、数据保存在本地的待办事项网页,不仅能解决我的痛点,还能让我直观地感受到 AI 编程的魅力,这对我的日常学习和未来的职业规划都非常有帮助。

我是怎么把 TraeCode 慢慢用顺的

  1. 下载安装与配置:去官网下载了 TraeCode 国内版,用手机号一键登录。界面和 VS Code 很像,我直接导入了之前的配置,非常顺手。
  2. 唤起 Builder 模式:新建了一个空文件夹,按快捷键 Ctrl+I 唤出 Builder 面板。
  3. 输入需求:我把需求写得很具体:“帮我做一个个人待办事项网页。要求:1. 界面简洁清爽,支持手机和电脑浏览;2. 可以添加任务、勾选完成、删除任务;3. 数据保存在浏览器本地(localStorage),刷新不丢失;4. 用单个 HTML 文件实现。”
  4. 见证奇迹:按下回车后,TraeCode 自动帮我创建了文件、写好了 HTML/CSS/JavaScript 代码,甚至还自动配置了环境。整个过程大概 2 分钟,右侧面板还会显示它的思考过程。
  5. 微调与排错:第一次预览时,我发现删除按钮有点小,直接在 Chat 面板里说:“帮我把删除按钮调大一点,颜色改成红色。”它立刻帮我修改了代码,非常听话!

我最后做成了什么,想给后来的人留一句什么建议
最后,我成功做出了一个属于自己的待办事项网页,不仅能用,UI 还挺好看,现在每天都在用它打卡!

给新手的建议
给 AI 提需求时,越具体越好!不要只说“做个网页”,要把功能点、样式偏好甚至技术要求(比如单文件、本地存储)都列清楚。另外,如果生成的代码有小 Bug 别慌,直接把报错信息发给它,让它自己修复,多试两次基本都能完美运行。强烈建议大家趁现在国内版免费,赶紧去体验一下“一句话写代码”的快乐!

1 个赞