ARTICLE · 1168368
零基础用AI做一个小工具,从想法到能用的成品
零基础用AI做一个小工具,从想法到能用的成品想做一个自己的小工具，最容易卡在第一步。 脑子里有个想法，打开 AI 却只说得出“帮我做个待办清单”。它回了一大段内容，你不知道该复制哪部分，也不知道接下来打开什么。 这篇就从这里往下走。我们做一个能添加任务、勾选完成、删除任务的待办网页，再把它保存到电脑上。整个过程用自然语言向 AI 提要求，不需要先学会写代码。 本文依据官方文档整理操作路线，示例提示词用于教学，未在实际账号中完成端到端实测。AI 每次生成的结果可能不同，后面的检查和修改也是教程的一部分。 拿待办清单练手，是因为它的结果容易检查。输入一件事，列表里就应当出现一条任务；勾选以后，状态应当变化；删除一条，其他任务应当留下。 第一版只做这三项，再加上“不能添加空白任务”。先用假任务练习，暂时不填写重要事项。初版允许刷新后清空，但页面必须把这个限制写明。 我们最终要得到的是一个名叫 todo.html 的文件。HTML 可以理解为网页文件，这一版要求它包含全部界面和交互，不再依赖额外文件。 准备一台电脑、一个现代浏览器，以及能生成代码或网页文件的 AI 对话工具即可。 下面以 Claude 网页版为例。 Claude 官方说明（https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them） 支持在对话中制作单页网站和交互小工具。使用相关文件能力前，检查设置中的 Capabilities，确认 Cloud code execution and file creation 已开启。组织账号由管理员控制相关设置。 这里用普通对话起步，要求交付独立 HTML 文件，不必先寻找某个模板。 新建一个对话，复制下面整段文字。它是一份任务说明，不是需要你执行的代码。 这里把运行方式写得很具体。你要的是一个文件，AI 就不该把你带进安装依赖、配置项目的流程。 “相同文字的任务互不影响”也值得保留。两条都叫“买牛奶”的任务应该是两个独立条目，删除其中一条不该把另一条一起删掉。 发出提示词后，先看交付物。下载得到 .html 文件，或者拿到一段完整网页代码，才有东西可以继续检查。如果 AI 只解释了实现思路，就请它按原要求交付完整文件。 
如果对话提供了 HTML 附件，下载到一个专门的文件夹里，例如桌面的“我的小工具”。 如果只拿到了代码，用 Windows 记事本新建文档，把完整代码复制进去。不要复制代码块外层的三个反引号，也不要把 AI 的解释文字放进去。 在记事本里选择“另存为”，文件名填写 todo.html，保存类型选择“所有文件”，编码选择 UTF-8。 然后在文件资源管理器中检查扩展名。确认文件名以 .html 结束，避免保存成 todo.html.txt。 右键这个文件，选择用 Edge 或 Chrome 打开。符合前面要求的独立网页，应当能直接显示输入框和任务列表。 如果页面展示的是整段代码，先检查扩展名和默认打开程序。如果页面一片空白，或者出现需要安装软件的提示，就把当前完整文件交回 AI，让它改成能直接打开的单文件版本。 聊天里的预览能展示页面，还需要检查下载后的文件。后续验收都以你电脑上的这个文件为准。 先不要改颜色。用几条测试任务检查功能，每一步都看结果。 这份清单检查的是你提出的要求。只有任务真的能添加、能删除，才能说明功能已经做到。 假如按回车没有反应，直接描述发生了什么。把现象写清楚，AI 才有明确的修改目标。 
留在原来的对话里，把最新 HTML 文件附上，再说明操作步骤。可以套用下面这段提示词。 这只是问题反馈示例，实际反馈要换成你遇到的现象。没发生过的故障，不必照着报。 如果有报错，把报错原文一起发过去。只写“有问题”“不好用”，很难判断故障发生在哪一步。 每次下载新版本，都保留上一份文件。可以分别命名为 todo-v1.html、todo-v2.html。修复后先重测出错的操作，再检查添加、勾选、删除是否仍然正常。 功能通过以后，再让 AI 调整字号、颜色或按钮间距，一次说清一类修改。这样新版本出问题时，你也知道刚动过哪里。 初版已经能操作，但刷新就清空，只适合练习。如果你准备把它用于日常记录，需要继续处理任务保存。 可以继续发出这段要求。 拿到新版本后，先添加两条测试任务，勾选其中一条，导出备份。再删除页面中的任务，导入刚才的文件，检查两条任务和勾选状态是否恢复。 接着试一次取消导入，再用一份无关的文本文件测试错误提示。这两次操作都不应改变现有列表。 
最后刷新页面，检查当前浏览器能否恢复任务。关闭后重新打开也要检查一次。浏览器没有成功保存时，依靠导出的备份恢复，别继续把重要记录只留在页面里。 如果改了 HTML 文件名或移动了文件，重新测试保存，并保留备份。清理浏览器数据、换电脑或换浏览器时，也要考虑重新导入。 做到这里，检查一遍最终文件，确认它能正常使用，备份也能恢复。把通过检查的版本与最近一次备份放在你能找到的位置，日常使用时打开这份文件即可。
1. 先确定第一版到底做什么
2. 把这段需求发给 AI
请帮我制作一个中文待办清单小工具，供零基础用户在电脑浏览器中使用。请交付一个独立的 todo.html 文件，HTML、CSS 和 JavaScript 全部写在这个文件里。不要使用外部库、在线字体、联网接口或需要安装的依赖。第一版需要这些功能输入任务后，可以点击添加按钮，也可以按回车添加。每条任务可以勾选完成，再次点击可以恢复为未完成。每条任务都有删除按钮，只删除当前这一条。空内容或只有空格的内容不能添加，并显示中文提示。相同文字的任务允许分别添加，每条都有独立标识，勾选和删除互不影响。没有任务时显示空状态说明。界面保持简洁，输入框和按钮有清楚的文字标签，键盘可以操作，在窄屏中也能正常显示。用户输入的内容必须按普通文字显示，不能作为 HTML 执行。这一版先不保存任务，页面上明确提示“刷新或关闭页面后，任务会清空”。不要增加登录、账号、云同步或通知功能。请优先提供可下载的 HTML 文件。如果当前不能提供附件，输出完整 HTML 代码，并说明如何用 Windows 记事本保存和打开。不要只给局部代码。
3. 保存下来，用浏览器打开
4. 按这张清单试一遍
| 输入“整理桌面”，点击添加 | 列表新增一条，输入框清空 || 输入“买牛奶”，按回车 | 新增一条任务 || 什么都不输入就添加，再试一次只输入空格 | 均不新增任务，出现提示 || 连续添加两条“买牛奶”，删除其中一条 | 只删除选中的一条 || 勾选一条，再取消勾选 | 状态可以来回切换，其他任务不变 || 输入 测试 | 原样显示这些文字，不变成加粗效果 || 删除全部任务 | 出现空状态说明 || 缩窄浏览器窗口，再用 Tab 和回车操作 | 按钮可见，键盘可以完成主要操作 || 添加一条任务后刷新 | 初版任务清空，与页面提示一致 |
5. 出错时，反馈到具体动作
请基于我附上的当前完整 HTML 文件修复问题，保留已经正常的功能。复现步骤1. 输入“买牛奶”，点击添加。2. 再输入一次“买牛奶”，点击添加。3. 点击第一条任务的删除按钮。实际结果两条任务一起消失了。预期结果只删除点击的那一条，另一条保留。请检查是否错误地用任务文字识别条目，并使用独立标识修复。交付修复后的完整 HTML 文件，简要说明改动，并列出需要我重新检查的操作。
6. 最后补上保存与备份
请基于当前已经通过功能检查的 HTML 文件，补上保存和备份能力，仍然交付独立 HTML 文件。1. 尝试使用 localStorage 保存任务和完成状态。读取或写入失败时显示中文提示，不能让整个页面停止工作，也不能显示保存成功。2. 加入“导出备份”按钮，把当前任务、独立标识和完成状态下载为 JSON 文件。3. 加入“导入备份”按钮，只允许用户主动选择本地文件。4. 导入前检查数据结构、文字类型、完成状态以及标识是否重复。错误文件要明确报错，原任务保持不变。5. 导入采用整体替换，确认框必须明确说明会替换当前列表。用户取消时不能改变任何任务。6. 页面说明浏览器保存只针对当前环境，不提供跨设备同步；重要任务需要导出备份。7. 保留原有添加、勾选、删除和输入校验功能，不引入外部依赖。请交付完整文件，并给出保存失败、备份导出、恢复与错误文件导入的检查步骤。
