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

Todo 待办应用是前端入门最经典的项目。这篇文章给你一套完整 Prompt 模板,复制改词就能做出一个功能完整的 Todo 应用。

Todo 应用拆开看,其实就 5 个部分

很多人觉得做一个应用很难,拆开看就简单了。

最上面是输入区域,一个文本框加一个添加按钮。中间是待办列表,每条任务可以勾选、编辑、删除。已完成的事项单独展示,带划线效果。底部是筛选栏,切换「全部 / 待办 / 已完成」三种视图,再加一个统计「剩余 3 项 / 共 5 项」。

用户操作流程,一条线走到底

把用户的操作路径画出来,写 Prompt 的时候就知道每个功能该往哪放。

输入任务 → 回车添加 → 勾选完成。如果需要修改就双击进入编辑,不需要修改就删除。底部筛选切换三种视图。整个流程就是一个线性路径加一个判断分支,不复杂。

最终效果长什么样

用下面的 Prompt 模板生成后,效果大概是这样的。

标题 My Tasks,输入框右侧一个青绿色添加按钮,待办事项用蓝色边框卡片,已完成的用绿色勾选标记,底部筛选栏用橙色高亮当前选中的标签。

完整 Prompt 模板