5分钟速通AI辅助 番茄时钟 开发

2025 AI 冬令营 第二期

由 Datawhale 主办、联合蚂蚁集团（支付宝百宝箱）、 字节跳动（豆包MarsCode） 等顶尖人工智能企业和团队，结合最新AI应用，为学习者提供学习机会，提升专业能力和就业竞争力。

方向一：动手学 AI Agent

方向二：动手学 AI 辅助编程

5分钟速通AI辅助 番茄时钟 开发

Step1：注册登录豆包MarsCode（点击可跳转官网）

直接点击上方蓝字，或复制链接打开: 豆包 MarsCode - 编程助手

1. 点击“登录并获取编程助手”

2. 注册账号并登录

注意：请 不要 在微信浏览器中打开，需要把网址复制到Chrome、Edge等网页浏览器中打开

Step2：进入豆包MarsCode在线IDE

点击 "进入工作台" 打开在线IDE

1. 点击进入工作台

2. 打开网页立即体验

3. 这里就是你的工作环境啦~

点击了解豆包MarsCode在线IDE

Step3：创建项目

点击左上角 “项目” 按钮新建项目，选择 “HTML / CSS / JS” 项目，点击 “创建” 按钮创建项目：

1. 新建项目

2. 选择HTML/CSS/JS项目并创建

3. 恭喜进入项目工作区~

点击查看界面详细说明

Step4：用AI编写 番茄时钟 代码！

在右侧 AI对话区下方对话框 输入以下内容，然后 按enter键 发送：

参考Prompt

请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现

发送Prompt！让AI编写代码！

点击了解Prompt是什么

Step5：运行 番茄时钟！

1. 打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，找到右侧对应的 html文件 ，点击 插入光标处 ：

1. 打开左侧 【文件浏览器】 的 script.js ， 全选代码 ，找到右侧对应的 javascript文件 ，点击 插入光标处 ：

1. 做好这些之后，点击最上方 “运行” 按钮，即可在 界面右侧 体验到番茄时钟的效果啦！

思考：为什么要这样“引导AI”编程？

豆包MarsCode还有什么能力？（豆包MarsCode回答）

豆包MarsCode是一个集成开发环境（IDE），它提供了多种功能和工具，以帮助开发者更高效地编写、调试和部署代码。以下是豆包MarsCode的一些主要功能和能力：

1. 代码编辑：豆包MarsCode提供了一个功能强大的代码编辑器，支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。它具有语法高亮、自动补全、代码格式化、代码折叠等功能，帮助开发者更轻松地编写代码。

2. 调试工具：豆包MarsCode内置了调试工具，允许开发者在代码中设置断点，逐步执行代码，检查变量的值，从而更容易地发现和修复错误。

3. 版本控制：豆包MarsCode集成了版本控制系统，如Git，允许开发者管理代码的版本，跟踪更改，合并分支等。

4. 终端集成：豆包MarsCode提供了一个集成的终端，允许开发者在IDE中直接执行命令行操作，如编译代码、运行脚本、管理依赖等。

5. 插件系统：豆包MarsCode支持插件扩展，开发者可以根据自己的需求安装各种插件，以增强IDE的功能。

6. 云开发：豆包MarsCode支持云开发，允许开发者在云端进行编码、调试和部署，无需本地环境。

7. 团队协作：豆包MarsCode支持团队协作，允许开发者在同一个项目上协同工作，共享代码和资源。

8. 学习资源：豆包MarsCode提供了丰富的学习资源，包括教程、文档、示例代码等，帮助开发者快速学习和掌握新的技术和工具。

9. 性能优化：豆包MarsCode提供了性能分析工具，帮助开发者优化代码性能，提高应用程序的运行效率。

10. 跨平台支持：豆包MarsCode支持多种操作系统，包括Windows、Mac和Linux，允许开发者在不同的平台上使用相同的开发环境。

总之，豆包MarsCode是一个功能强大、易于使用的集成开发环境，它提供了丰富的功能和工具，帮助开发者更高效地进行软件开发。

Prompt是什么？需要包含什么必须的要素？（豆包MarsCode回答）

在编程和人工智能领域，"Prompt"（提示）通常指的是提供给模型或算法的输入文本，用于引导其生成相应的输出。在自然语言处理（NLP）中，Prompt可以是一个问题、一段描述、一个指令或者一个上下文，模型会根据这个Prompt来生成回答、翻译、摘要或其他形式的文本。

一个有效的Prompt通常需要包含以下几个要素：

1. 明确的指令或问题：Prompt应该清晰地表达出你想要模型做什么，例如，“写一首关于夏天的诗”或者“翻译以下英文到中文”。

2. 上下文信息：如果任务需要特定的背景知识或上下文，Prompt应该提供这些信息，以便模型能够更好地理解任务。

3. 格式要求：如果输出需要遵循特定的格式，Prompt应该明确指出，例如，“以列表的形式列出五个建议”。

4. 示例：提供一个或多个示例可以帮助模型更好地理解任务的要求和期望的输出格式。

5. 长度限制：如果任务对输出的长度有限制，Prompt应该明确告知，例如，“用不超过100个字总结这篇文章”。

6. 语言和风格：Prompt应该明确指定输出的语言和风格，例如，“用正式的商务英语回复这封邮件”。

7. 避免歧义：Prompt应该尽可能避免歧义，确保模型能够准确理解你的意图。

8. 反馈和迭代：根据模型的输出，你可能需要调整Prompt以获得更满意的结果。

在使用豆包MarsCode或其他IDE时，你可以在代码编辑器中编写Prompt，然后将其输入到相应的模型或工具中，以获得所需的输出。

设计一个番茄时钟，为什么要提到 html、tailwind css和javascript ？（豆包MarsCode回答）

在设计番茄时钟时，提到 HTML、Tailwind CSS 和 JavaScript 是因为它们是构建网页和 Web 应用程序的基础技术。以下是每个技术在番茄时钟设计中的作用：

1. HTML (Hypertext Markup Language): HTML 是用于创建网页结构的标记语言。在番茄时钟中，HTML 用于定义页面的布局、标题、段落、按钮等元素。例如，你可以使用 HTML 创建一个包含计时器、开始按钮、暂停按钮和重置按钮的页面。

2. Tailwind CSS: Tailwind CSS 是一个流行的 CSS 框架，它提供了一系列的实用工具类，可以快速地构建自定义设计。在番茄时钟中，Tailwind CSS 可以用于样式化 HTML 元素，使其具有吸引力和响应式布局。例如，你可以使用 Tailwind CSS 来设置按钮的颜色、字体大小、边距等。

3. JavaScript: JavaScript 是一种脚本语言，用于为网页添加交互性和动态功能。在番茄时钟中，JavaScript 用于实现计时器的逻辑，包括开始、暂停和重置功能。例如，你可以使用 JavaScript 来更新计时器的显示，处理按钮的点击事件，以及控制定时器的开始和停止。

结合使用 HTML、Tailwind CSS 和 JavaScript，可以创建一个功能齐全、外观精美的番茄时钟。HTML 提供结构，Tailwind CSS 提供样式，而 JavaScript 提供交互性，三者共同构成了现代 Web 应用程序的基础。

为什么特别要求 UI简洁美观大方 ，同时具有 呼吸感 ？（豆包MarsCode回答）

在设计用户界面（UI）时，特别是像番茄时钟这样的应用程序，简洁美观大方且具有呼吸感是非常重要的，原因如下：

1. 用户体验：简洁的UI设计可以提供更好的用户体验。用户可以更轻松地找到他们需要的功能，减少认知负荷，从而提高使用效率和满意度。

2. 美观大方：美观的设计可以吸引用户的注意力，让用户更愿意使用这个应用。同时，大方的设计可以给人一种专业和可靠的感觉。

3. 呼吸感：呼吸感是指UI设计中的一种节奏感和空间感，它可以让用户在使用过程中感到舒适和放松。例如，适当的留白、字体大小和颜色的搭配，以及动画效果的使用，都可以营造出呼吸感。

4. 专注和效率：番茄时钟的主要目的是帮助用户提高专注度和效率。简洁美观大方且具有呼吸感的UI设计可以减少干扰，让用户更容易集中精力完成任务。

5. 跨平台和设备兼容性：简洁的设计通常更容易适应不同的屏幕尺寸和设备，确保在不同的平台上都能提供一致的用户体验。

6. 品牌形象：一个设计良好的UI可以帮助塑造品牌形象，让用户对品牌产生好感和信任。

7. 可访问性：简洁的设计可以提高应用的可访问性，让更多的用户，包括那些有视觉或认知障碍的用户，都能更容易地使用这个应用。

总之，简洁美观大方且具有呼吸感的UI设计可以提高用户体验，增强用户对应用的好感度和信任度，同时帮助用户更高效地完成任务。

这些 关键词 ，对于AI来说的价值是什么呢？（我的观点）

可能每一个关键词都对应一个知识点、一个对应的代码板块。AI不会具有人的主动思考能力，它所能作的，也就是在创作者的底层代码逻辑所实现的，可能类似于一种知识图谱、自然语言处理、生成规则？我也不是很懂，但是AI确实能够帮助人们提高效率，毕竟机器能存储很多内容，计算和处理数据的能力也比人工要快得多。

在这里我们剧透一个 “关键词唤醒” 的概念 ————将在 Task2 和大家深入探讨

最后的最后，除了“番茄时钟”，我们还能用 豆包MarsCode AI 做什么？能不能做出更复杂的软件和项目呢？（我的观点）

我觉得实用性和适用性都非常广，对于一般的小项目基本上很快开发好了，复杂一点的项目我还没去试过，不过如果是它可控的、可了解的项目下，我觉得应该没多大问题，但是如果是那种远程多机交互型的项目我感觉还挺难实现的。

我们这次学习活动的目标，就是学习和探索用AI辅助我们，完成自己应用idea的demo实现！ ————我们也将在 Task3 和大家探讨完成这个目标的一种可能方案！

练习作业

1. 试试修改Prompt，制作井字棋

试试将Step4中的Promt替换为如下信息，制作一个井字棋~：

参考Prompt

请你基于html、tailwind css和javascript，帮我设计一个“井字棋游戏”。要求UI简洁美观大方，同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜负平局判定条件能够完美实现

预期效果

2. 尝试记录和分析遇到的问题，并思考解决方案

例如：井字棋开发中的一个debug记录

问题场景 ：浏览器打开网页时， 井字棋无法显示棋盘

解决方法 ： 把出现的问题用文字描述清楚，发送给AI，AI生成新的代码，替换后成功

点击了解一些常见问题和解决思路

1. AI只生成了html文件，没有生成javascript文件？

   只需要执行第二步操作“打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，找到右侧对应的 html文件 ，点击 插入光标处 ”即可

1. 点击“运行”没有显示任何界面/ 点击“开始”按钮、“暂停”按钮或“重置”按钮无法正常实现相应功能/AI持续输出内容不会停止？

   由于大模型 现有技术和条件的限制 ，有时会出现“一本正经地胡说八道”的情况，因此生成的代码有时就会出现一些bug或者错误。这里回到 “工作台” ， 重新部署项目 即可

1. AI回答需要安装Tailwind CSS？

   无视即可， AI会在html文件中自动引入tailwind css

1. 点击“运行”之后界面存在“Hello HTML/CSS/JS!”等字符？

   重新执行第二步操作“打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，找到右侧对应的 html文件 ，点击 插入光标处 ”即可

记住：AI时代下的编程，要更好地与AI协作解决问题

编程不仅仅是 程序员/软件工程师 这个岗位的专利，任何人，都有机会通过与AI协作编写出属于自己的定制化软件，更高效地解决自己的实际问题~

应用软件开发 是一个工程性的行为，他需要经过 场景挖掘、应用功能/业务设计、程序架构设计、代码编写与debug、最终集成和测试 等多个环节，必然会遇到很多问题，发现问题、解决问题 是除了应用场景挖掘和业务设计外的核心工作环节。

AI时代下，我们并不需要单靠肉眼或个人的力量来承担这些工作量，而更应该学会与AI协作设计、发现与解决问题，所以，如果你的代码遇到了问题，尝试清晰描述你遇到的问题和诉求，和AI一起尝试分析、修改解决吧！

随着技术的不断发展，任何人都需要不断适应技术变革，掌握新技术，正如历史所展示的那样，才能在未来更自如地面对变化和挑战。