小白必看！如何用AI精准生成"番茄Todo"类应用代码

原创

WAHU 2025-06-25 10:22:36 博主文章分类：Cursor ©著作权

文章标签 UI 任务管理技术栈 文章分类 深度学习人工智能

©著作权归作者所有：来自51CTO博客作者WAHU的原创作品，请联系作者获取转载授权，否则将追究法律责任

小白必看！如何用AI精准生成"番茄Todo"类应用代码

小白必看！如何用AI精准生成"番茄Todo"类应用代码_UI

一、从模糊到精准：为什么你的AI总生成"四不像"代码？

你是否遇到过这种情况：

让AI开发一个"番茄Todo"应用，结果它给了你一个纯计时器
要求添加任务功能，AI却生成了数据库设计代码
明明想要简洁的UI，AI却返回了复杂的企业级界面

这些问题都源于提示词不够精准。就像点餐时只说"我要吃面"，厨师可能给你拉面、刀削面或牛肉面。要让AI准确理解需求，必须学会"精准提示词"技巧。

二、开发"番茄Todo"应用的精准提示词设计

1. 基础版提示词（适合完全新手）

我想开发一个类似番茄Todo的应用，使用React+TypeScript+TailwindCSS技术栈。需要包含以下功能：
1. 番茄钟计时功能（25分钟工作，5分钟休息）
2. 任务管理功能（添加、标记完成、删除任务）
3. 简单美观的UI界面

请生成完整的React组件代码，包含TypeScript类型定义和必要的注释。

效果分析：

优点：明确了技术栈和核心功能
缺点：缺少具体交互细节和UI要求

2. 进阶版提示词（推荐使用）

我需要开发一个"番茄Todo"应用，具体要求如下：

【技术栈】
- 前端：React 18 + TypeScript + TailwindCSS
- 状态管理：React Hooks (useState, useEffect)
- 不使用Redux等状态管理库

【功能需求】
1. 番茄钟功能：
   - 默认25分钟工作，5分钟休息
   - 显示剩余时间倒计时
   - 开始/暂停/重置按钮
   - 完成一个番茄钟后自动切换到休息模式

2. 任务管理功能：
   - 添加新任务（输入框+回车键提交）
   - 标记任务为已完成（点击复选框）
   - 删除任务（点击删除按钮）
   - 任务列表显示任务名称和完成状态

3. UI要求：
   - 简洁现代的设计风格
   - 响应式布局（适配手机和电脑）
   - 使用TailwindCSS实现暗黑模式

【代码要求】
1. 返回完整的React组件代码
2. 包含必要的TypeScript类型定义
3. 关键逻辑添加注释说明
4. 代码风格保持一致

【参考示例】
- 番茄钟计时逻辑参考：https://example.com/pomodoro-timer
- UI风格参考：https://example.com/minimal-todo-app

优势分析：

明确了技术选择（避免AI推荐不相关技术）
详细拆分了功能需求（避免遗漏重要功能）
添加了UI具体要求（确保界面风格符合预期）
提供了参考示例（让AI理解你的审美标准）

三、分步开发策略：如何用提示词分解复杂功能

第一步：先开发核心计时器功能

请先实现番茄钟的核心计时功能，具体要求：
- 使用React Hooks管理状态
- 默认25分钟工作时间，5分钟休息时间
- 显示剩余时间（格式：MM:SS）
- 提供开始/暂停/重置三个按钮
- 计时结束时播放提示音（可选）

请只返回计时器组件的代码，不要包含任务管理功能。

为什么这样设计：

先聚焦核心功能，降低复杂度
确保基础功能稳定后再扩展
避免AI一次性生成过多代码导致混乱

第二步：添加任务管理功能

在第一步计时器功能的基础上，添加任务管理功能，要求：
1. 任务输入框（支持回车键提交）
2. 任务列表显示（包含任务名称和完成状态）
3. 每个任务可以：
   - 点击复选框标记完成/未完成
   - 点击删除按钮移除任务

请保持与第一步一致的代码风格，并确保组件能正常协同工作。

优势：

基于已验证的代码进行扩展
确保新功能与原有功能无缝集成
降低调试难度

四、代码质量检查清单（番茄Todo特别版）

1. 计时器功能检查项

时间计算是否准确（特别是分钟和秒的转换）
暂停后恢复计时是否正确
重置功能是否能回到初始状态
工作/休息模式切换是否正常

2. 任务管理检查项

添加任务是否能正确显示
标记完成是否能更新UI状态
删除功能是否能正确移除任务
输入框是否能正确清空

3. UI/UX检查项

响应式布局是否正常（手机/电脑）
暗黑模式是否生效
按钮交互状态（hover/active）是否明显
文字大小和间距是否合适

五、实战案例：优化AI生成的番茄Todo代码

初始AI生成代码的问题

// 问题1：没有处理边界情况（如输入空任务）
function addTask() {
  setTasks([...tasks, { id: Date.now(), text: input, completed: false }]);
  setInput('');
}

// 问题2：计时器逻辑不完整（缺少暂停功能）
const startTimer = () => {
  setInterval(() => {
    setRemainingTime(remainingTime - 1);
  }, 1000);
};

使用精准提示词优化

请优化以下代码：
1. 添加任务功能需要：
   - 过滤空输入（不允许添加空字符串）
   - 限制任务名称最大长度（最多50个字符）

2. 计时器功能需要：
   - 实现完整的开始/暂停/重置逻辑
   - 使用useRef保存interval ID以便清除
   - 时间归零时自动切换模式

请只返回修改后的相关代码部分，并保留原有注释。

优化后的代码

// 优化后的添加任务功能
const addTask = () => {
  if (input.trim() === '') return; // 过滤空输入
  if (input.length > 50) {
    alert('任务名称不能超过50个字符');
    return;
  }
  setTasks([...tasks, { id: Date.now(), text: input, completed: false }]);
  setInput('');
};

// 优化后的计时器逻辑
const timerRef = useRef<NodeJS.Timeout>();

const startTimer = () => {
  if (timerRef.current) clearInterval(timerRef.current);
  timerRef.current = setInterval(() => {
    setRemainingTime(prev => {
      if (prev <= 1) {
        // 时间到自动切换模式
        switchMode();
        return mode === 'work' ? workDuration : breakDuration;
      }
      return prev - 1;
    });
  }, 1000);
};

const pauseTimer = () => {
  if (timerRef.current) {
    clearInterval(timerRef.current);
    timerRef.current = undefined;
  }
};

const resetTimer = () => {
  pauseTimer();
  setRemainingTime(mode === 'work' ? workDuration : breakDuration);
};