AI教程|5分钟极速打造一个番茄钟工具

我是一名AI应用开发者，分享日常开发案例，有任何问题都可以找我，文末有联系方式。

（文末有番茄钟工具获取地址）

--------------- 正文---------------

番茄钟软件很多，但我都不喜欢。

恰巧最近AI很火，那就用AI来实现我想要的番茄钟软件。

说干就干，首先就是确定用哪个AI工具来实现呢？

搜索了一圈发现，在代码能力上比较强的国外有ChatGPT，国内有kimi、通义灵码、deepseek等。

在经过一圈对比后，最终选择了最近很火的deepseek。

AI工具选定了之后，该要怎么实现一个番茄钟呢？

那就是先写prompt描述词。

这个描述词的意义就是告诉AI我的需求是什么，AI会根据我的描述来生成对应的答案

我的想法是做成一个能多端通用的，也就是说无论在手机和平板上都能用的。

问了AI之后发现最简单的方式就是做成一个HTML页面，这样只要有浏览器就能打开。

所以最终我的prompt描述词如下：

# 角色你是一个资深前端开发工程师，拥有10年的开发经验# 总体需求实现一个网页番茄钟# 需求分拆1，页面主体以灰白色为基调；2，有一个时钟显示器，时钟背景为黑色，文字为白色；3，时钟下面有倒计时时间的选项，分别为5min\10min\20min\25min\30min；4，倒计时下方有一个自定义时间设置框，用户可以自定义时间计时器；5，自定义时间框下面有一个开始和结束按钮，开始按钮为黑底白字，结束按钮为白底红字，两个按钮有10px的圆角；6，最下方有一个历史记录，可以记录每次番茄钟的开始和结束时间；7，历史记录旁边有一个导出按钮，用户点击后可以导出一份json文件；8，以上内容都采用居中对齐，使用纯html规范实现。

因为AI现在是一个知识大杂烩，它什么都会，所以得先告诉AI它需要扮演的角色是什么，能更好完成我的需求。

这里我告诉它是要成为一个资深前端开发工程师的角色，因为HTML属于前端的范畴。

接着我告诉它总体的需求是什么，最后把总体需求分拆成每一个可实现的步骤，这样AI就会根据我的描述来为我生成想要的东西。

将上面写好的prompt描述词放到输入框，发送给deepseek，它就会开始吭哧吭哧帮我生成。

最终它生成的html页面代码如下：

  <meta charset="UTF-8">   <title>番茄工作钟</title>   <style>       body {           background-color: #f0f0f0;           display: flex;           flex-direction: column;           align-items: center;           font-family: Arial, sans-serif;           margin: 20px 0;       }

      #clock {           background-color: black;           color: white;           font-size: 60px;           padding: 20px 40px;           border-radius: 10px;           margin: 20px 0;       }

      .time-options {           margin: 20px 0;           display: flex;           gap: 10px;       }

      .time-options button {           padding: 8px 16px;           border: 1px solid #ccc;           border-radius: 5px;           background-color: white;           cursor: pointer;       }

      .time-options button.active {           background-color: #666;           color: white;       }

      .custom-time {           margin: 10px 0;       }

      .custom-time input {           padding: 8px;           width: 120px;           margin-right: 10px;       }

      .controls {           margin: 20px 0;           display: flex;           gap: 15px;       }

      .controls button {           padding: 10px 30px;           border: none;           cursor: pointer;           border-radius: 10px;           font-size: 16px;       }

      #startBtn {           background-color: black;           color: white;       }

      #stopBtn {           background-color: white;           color: red;           border: 1px solid red !important;       }

      #history {           margin-top: 30px;           text-align: center;       }

      #historyList {           list-style: none;           padding: 0;           max-height: 200px;           overflow-y: auto;       }

      #exportBtn {           margin-left: 20px;           padding: 8px 16px;           background-color: #4CAF50;           color: white;           border: none;           border-radius: 5px;           cursor: pointer;       }   </style>   <div id="clock">25:00</div>

  <div class="time-options">       <button data-minutes="5">5分钟</button>       <button data-minutes="10">10分钟</button>       <button data-minutes="20">20分钟</button>       <button data-minutes="25" class="active">25分钟</button>       <button data-minutes="30">30分钟</button>   </div>

  <div class="custom-time">       <input type="number" id="customMinutes" placeholder="输入分钟数" min="1">       <button onclick="setCustomTime()">设置</button>   </div>

  <div class="controls">       <button id="startBtn" onclick="startTimer()">开始</button>       <button id="stopBtn" onclick="stopTimer()">结束</button>   </div>

  <div id="history">       <h3>历史记录</h3>       <ul id="historyList"></ul>       <button id="exportBtn" onclick="exportHistory()">导出记录</button>   </div>

  <script>       let timer = null;       let remainingTime = 1500; // 默认25分钟       let isRunning = false;       let history = [];

      function updateDisplay() {           const minutes = Math.floor(remainingTime / 60);           const seconds = remainingTime % 60;           document.getElementById('clock').textContent =               `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;       }

      function setTime(minutes) {           remainingTime = minutes * 60;           updateDisplay();           document.querySelectorAll('.time-options button').forEach(btn =>               btn.classList.remove('active'));           event.target.classList.add('active');       }

      function setCustomTime() {           const minutes = parseInt(document.getElementById('customMinutes').value);           if (minutes > 0) {               setTime(minutes);           }       }

      function startTimer() {           if (isRunning) return;           isRunning = true;           const startTime = new Date();           history.push({               start: startTime.toISOString(),               end: null,               duration: remainingTime           });

          timer = setInterval(() => {               remainingTime--;               updateDisplay();

              if (remainingTime <= 0) {                   stopTimer();                   const endTime = new Date();                   history[history.length - 1].end = endTime.toISOString();                   addHistoryEntry(startTime, endTime);               }           }, 1000);       }

      function stopTimer() {           clearInterval(timer);           isRunning = false;           if (history.length > 0 && !history[history.length - 1].end) {               const endTime = new Date();               history[history.length - 1].end = endTime.toISOString();               addHistoryEntry(new Date(history[history.length - 1].start), endTime);           }       }

      function addHistoryEntry(start, end) {           const listItem = document.createElement('li');           listItem.textContent = `开始：${formatDate(start)} - 结束：${formatDate(end)}`;           document.getElementById('historyList').appendChild(listItem);       }

      function formatDate(date) {           return date.toLocaleString('zh-CN');       }

      function exportHistory() {           const data = JSON.stringify(history, null, 2);           const blob = new Blob([data], { type: 'application/json' });           const url = URL.createObjectURL(blob);           const a = document.createElement('a');           a.href = url;           a.download = 'tomato-history.json';           a.click();           URL.revokeObjectURL(url);       }

      // 初始化事件监听       document.querySelectorAll('.time-options button').forEach(button => {           button.addEventListener('click', () => setTime(parseInt(button.dataset.minutes)));       });

      // 初始化默认时间       updateDisplay();   </script>

看到代码是不是慌了，看不懂怎么办？答案就是根本用不着看懂！

新建一个文本文件，把以上生成的代码放到一个文本文件中。

接着把文本后缀改为.html，之后就能直接双击打开，打开后的效果如下：

可以看到开始和结束按钮太大了，整个页面有点不协调，那咋办呢？

很简单，让AI再帮我改，也就是再写一段prompt描述词给它，如下：

开始按钮和结束按钮帮我改小一点

AI接受到这串命令后，就会开始吭哧吭哧的在页面上输出了，最终的修改代码如下：

.controls button {   padding: 8px 20px;  /* 原为10px 30px */   border: none;   cursor: pointer;   border-radius: 10px;   font-size: 14px;    /* 原为16px */}

把这串代码复制，替换一下，然后保存，再次双击打开

这次完美了，发送到手机端打开试试效果。

手机端也没问题，大功告成！

总结

用AI生成应用，只需要你有一个想法就能生成，不需要再像以前还得找个专业的程序员来干这个事情。

不仅省钱省时间，更关键的是还可以随时更改自己的想法增添功能，这一想想就很酷！

上方代码复制后保存为html文件就可以用浏览器打开。

写在最后：

AI，是未来趋势，每个人都应该要掌握。

掌握AI的人，工作效率将提升90%以上。

另外，有任何AI相关的问题都可以联系我！