KimiCode 实战：从零搭建一个待办清单应用

从需求描述到可运行的应用，全程用自然语言对话完成。

项目目标

做一个功能完整的待办清单（Todo List）应用：

• ✅ 添加任务
• ✅ 标记完成/未完成
• ✅ 删除任务
• ✅ 筛选：全部/未完成/已完成
• ✅ 数据本地存储（刷新不丢失）
• ✅ 界面美观、响应式

技术栈： HTML + CSS + JavaScript（纯前端实现）

第一轮：基础框架

输入：

帮我写一个待办清单网页应用，要求：
1. 顶部有输入框和添加按钮
2. 中间显示任务列表，每个任务前面有复选框，后面有删除按钮
3. 底部显示任务统计和筛选按钮（全部/未完成/已完成）
4. 用 localStorage 保存数据
5. 界面简洁现代，用柔和的颜色

KimiCode 生成后，你会得到：

• 完整的 HTML 结构
• CSS 样式（Flexbox 布局）
• JavaScript 逻辑（增删改查 + localStorage）

先运行看看效果，别急着改。

第二轮：优化界面

基础功能有了，但可能不够好看。继续对话：

输入：

界面优化一下：
1. 用圆角卡片设计，加轻微阴影
2. 完成的任务文字变灰色并加删除线
3. 添加按钮用渐变色（蓝到紫）
4. 鼠标悬停时有轻微放大效果
5. 整体宽度限制在 600px 以内，居中显示

效果变化：

优化前	优化后
平面布局	卡片式 + 阴影
纯色按钮	渐变按钮
无交互反馈	悬停动画

第三轮：增强交互

再加一些细节体验：

输入：

再加几个功能：
1. 按 Enter 键也能添加任务
2. 删除前弹出确认提示
3. 空状态显示一个友好的提示图标和文字
4. 任务文字可以点击直接编辑（双击或点击编辑图标）

关键代码片段（编辑功能）：

// 双击编辑任务
taskText.addEventListener('dblclick', () => {
  const input = document.createElement('input');
  input.value = task.text;
  input.className = 'edit-input';
  
  input.addEventListener('blur', () => {
    task.text = input.value.trim() || task.text;
    renderTasks();
    saveTasks();
  });
  
  taskText.replaceWith(input);
  input.focus();
});

第四轮：响应式适配

确保手机也能正常使用：

输入：

做下移动端适配：
1. 手机屏幕下整体宽度 95%，字体适当缩小
2. 触摸区域不小于 44px，方便手指点击
3. 输入框和按钮在手机上垂直排列

最终效果

桌面端：

一个居中的精美卡片，渐变头部显示标题和输入框，任务列表带复选框和删除按钮，底部筛选栏和统计信息。

移动端：

全屏显示，输入框占满宽度，任务项间距增大，触摸友好的按钮尺寸。

完整代码获取

如果你想直接拿到完整代码，对 KimiCode 说：

把完整代码打包成单个 HTML 文件给我，我要下载使用

KimiCode 会生成一个独立的 .html 文件，双击就能在浏览器打开，无需服务器。

学习总结

通过这个实战，你学会了：

1. 需求拆分 — 把大需求拆成几轮对话
2. 渐进优化 — 先跑通，再美化，最后加细节
3. 具体描述 — “渐变色”比”好看”更有效
4. 验证思维 — 每轮生成后先运行，再决定下一步

挑战任务

试着独立完成这些扩展：

• 添加任务优先级（高/中/低），用不同颜色标签
• 添加任务截止日期，过期任务标红
• 添加拖拽排序功能
• 导出任务为 JSON 文件

遇到困难？在评论区留言描述你的问题和想要的效果。

---

系列文章：

• KimiCode 快速上手：5 分钟写出第一个项目
• KimiCode 进阶技巧：让 AI 更懂你的需求

---

下一篇：如何用更精准的描述，让 KimiCode 一次就生成你想要的代码。