用 AI
做一个实用小工具。
把一个具体问题,变成一个好用的页面。
有一个明确需求,想用 AI 完成第一个可用版本的人。
第一版的边界
第一版仅在当前浏览器保存数据,不接入登录、支付或云同步。
开工包生成器无需注册 · 本地生成
工具应用 / React + VitePROJECT-BRIEF.md
# 项目开工简报 ## 我要做什么 一个订阅管理工具:记录订阅名称、月费和下次扣款日期,汇总每月支出。 ## 项目起点 项目目录:my-app 技术栈:React + Vite。先检查当前目录与已有代码;已有项目不要重复初始化或覆盖。 ## 第一版范围 - 新增、编辑、删除一条记录 - 按名称搜索,按状态筛选 - 使用本地存储保存数据 - 首次使用展示可删除的示例数据 ## 暂时不做 第一版仅在当前浏览器保存数据,不接入登录、支付或云同步。 ## 交付要求 - 先用简短文字说明实现方案和需要澄清的关键假设。 - 实现完整的核心操作,包含空状态、错误提示和手机布局。 - 安装依赖前核对官方文档与兼容性,按需要添加,不堆叠库。 - 不编造数据来源、客户评价或已实现的服务能力。 - 最后运行适合本次改动的检查,说明启动方式与尚未完成的部分。 ## 验收清单 - [ ] 完成一次新增、编辑和删除,结果正确 - [ ] 刷新页面后,保存的数据仍然存在 - [ ] 没有数据和没有搜索结果时,都有清楚的提示 - [ ] 手机宽度下所有操作都可用
在你自己的终端依次运行官方文档
npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev
先安装满足框架要求的 Node.js。已有项目请跳过初始化。
交付之前,实际走一遍
- 完成一次新增、编辑和删除,结果正确
- 刷新页面后,保存的数据仍然存在
- 没有数据和没有搜索结果时,都有清楚的提示
- 手机宽度下所有操作都可用
需求留在当前浏览器;不会发送给模型或保存到服务器。
带着这份简报开工
先把上方示例改成自己的想法。复制简报给你正在使用的 AI 编程工具,要求它先检查项目、说明方案,再开始实现。
下载的 .md 文件包含需求简报、初始化命令与验收清单,它不是已经写好的应用源码。完成后逐项检查,比只看一张页面截图更可靠。
用之前,知道这几件事
- 先安装符合框架当前要求的 Node.js 和选定包管理器。
- 启动命令只用于创建新项目;已有项目不要重复初始化。
- 简报在本地按模板生成,不会调用模型或替你运行代码。
- 分享链接只包含方案选项,不包含你填写的需求。
想做什么?从一个场景开始。
先把第一版做小,再把一件事做好。