做一个 Todo 待办应用,完整 Prompt 模板直接用

Todo 待办应用是前端入门最经典的项目。这篇文章从第一性原理出发,拆解 Todo 应用的本质,附完整 Prompt 模板,复制改词就能做出一个功能完整的 Todo 应用。

Todo 应用的本质是什么

回到第一性原理。Todo 应用解决的问题只有一个——把「要做什么」记下来,并且标记「做完了没有」。

把这个需求拆到最底层,你只需要两个东西:

• 一个列表,用来存放任务
• 一个状态,标记每条任务是「待办」还是「已完成」

所有的功能——输入框、勾选、筛选、删除——都是围绕这两个核心延伸出来的交互方式。输入框是往列表里加东西,勾选是改状态,筛选是按状态过滤显示,删除是从列表里移除。

理解了这一点,写 Prompt 的时候就不会遗漏核心功能,因为你知道每个功能在解决什么问题。

图里五个模块各司其职。输入区域负责「加」,待办列表负责「展示未完成的」,已完成区域负责「展示做完的」,筛选栏负责「切换视角」,统计栏负责「告诉你还剩多少」。每一步都对应一个明确的用户需求。

数据结构,一张图看懂

很多人让 AI 做 Todo 应用时,忘了告诉 AI 数据该怎么组织。结果 AI 用了一堆 DOM 操作,直接读写 HTML 元素,代码混乱且难维护。

从第一性原理出发,数据应该先于界面。先定义清楚「一条任务」长什么样,界面只是数据的展示层。