「速通AI编程开发」共学（二）：用Roo Code跑通第一个程序

一、共学课程来源

Datawhale通过开源学习模式，助力AI学习者与知识连接，与人连接，与场景连接，推动AI人才培养。
「速通AI编程开发」的课程地址为：https://www.datawhale.cn/learn/summary/102

学习初衷

希望通过共学，能速通AI编程开发，熟悉全流程，与各位大佬共同进步！

二、介绍

用Roo Code跑通第一个程序，这次的任务是用Roo Code做一个番茄时钟，并熟悉开发流程。

三、Roo Code使用

本地新建项目文件夹。

点击“我信任此作者。”


此处我选的“Code模式”，直接让他帮我生成代码。
需求如下（可根据自己便好进行修改～）：

请帮我写一个“番茄时钟”前端页面，页面功能如下：

• 核心功能：
  • 计时器模块：
    • 可配置的番茄时间（默认25分钟）。
    • 可配置的休息时间（短休息5分钟，长休息15-20分钟）。
    • 开始、暂停、重置功能。
    • 倒计时显示（分钟：秒）。
    • 计时结束提醒（通知）。
  • 会话管理：
    • 记录完成的番茄钟轮数。
    • 提供长休息选项，并在完成一定轮数后触发。
• UI/UX设计：
  • 视觉风格：
    • 极简主义设计：减少不必要的视觉元素。
    • 配色方案：选择柔和、自然的颜色，例如浅色背景搭配黄色/番茄红。
    • 排版：使用清晰易读的字体。
  • 动画效果：
    • 倒计时数字：平滑过渡效果。
    • 开始/暂停按钮：点击时的微动效（颜色变化、缩放）。
    • 计时完成：弹出庆祝动画（例如，烟花、粒子效果）。
  • 交互设计：
    • 自定义设置：允许用户调整番茄时间和休息时间。
    • 通知：在后台运行时，通过系统通知提醒用户。
  • “生命力”设计：
    • 动态背景：颜色随时间缓慢变化。
    • 正反馈：完成任务后，给予用户视觉上的奖励。

每完成一个文件的代码编写，会弹出“Save（保存）”或者“Reject（拒绝）”，此处点击“Save”。

番茄闹钟页面

@引用功能

@Problems：引用项目出现的问题，这里会要求ai参考代码区出现的问题（例如警告、报错等），Roo Code会根据问题给出对应解决方案；
@Terminal：引用终端命令，要求AI参考终端命令，Roo Code根据终端命令执行相应操作；
@Paste URL to fetch contents：引用网页内容，输入一个网页地址（URL），Roo Code根据URL获取网页内容，并根据内容给出相应解决方案，如：开发期间需要AI阅读某项目文档时；
@Add Folder：引用项目文件夹，Roo Code会自动参考引用的项目文件夹，给出相应解决方案；
@Add Files：引用项目文件，Roo Code会自动参考引用的项目文件，给出相应解决方案；
@Git Commits：引用提交的分支，Roo Code会自动参考引用的“提交的分支”，给出相应解决方案。

提示词增强

输入界面输入提示词，点击“提示词增强”按钮，AI会提供额外的上下文、说明，或重新措辞来帮助改进提示词。
还是拿番茄时钟⏰举例，输入：帮我设计一个番茄时钟。点击“提示词增强”按钮后变成了：

注意：使用“提示词增强”时建议不要使用推理模型，因为推理模型会将思维过程写入提示词，导致提示词变得非常长，不利于Roo Code理解用户需求。

上传图片作为参考

可以上传图片进行辅助设计，Roo Code根据图片给出相应代码，对新手炒鸡友好！

注意：由于DeepSeek目前没有多模态模型，所以图片上传功能需要使用具有视觉能力的模型，如：claude-3.5-sonnet、claude-3.7-sonnet、gpt-4o、glm-4v、qwen2.5-vl等。

四、开发流程

需求分析–>产品设计–>项目开发–>迭代优化–>添加新需求

需求分析

使用Roo Code的Architect（代码规划模式），输入需求。

帮我设计一个番茄时钟。

产品设计

补充需求细节，如：系统设计文档要包含要用到的技术栈、关键技术点、对系统的要求、前后端使用的架构、数据库设计、API接口设计等。)，利用Roo Code辅助生成系统设计文档。

项目开发

1. 若无异议：

点击“Approve（批准）”，自动进入Roo Code的code（写代码模式）

2. 若有异议：

输入提示词进行修改，模式手动切换成code（写代码模式）。

迭代优化

番茄时钟项目已经完成，但是页面整体视觉效果过于简单，我们不要点击 start a new task，继续输入需求：

页面视觉风格需要做到简洁现代，色彩搭配和谐（如浅色背景搭配黄色/番茄红），留白合理，布局清晰，注重用户友好体验，确保在简约中不失精致感与专业度。

等待中… Roo Code会根据新需求生成新的代码，并让用户调用浏览器打开index.html文件，查看效果。

如果不满意继续提出新的需求进行迭代优化～