我零基础,用AI搭了个小工具

上篇文章说了，这次要真刀真枪干一个。

不是教你理论，不是给你画饼。

是我自己，从零开始，像直播一样，全程记录怎么跟AI对话，怎么从一个想法变成一个真正能用的东西。

来了。

先说为什么做这个工具。

我每天给自己列任务——读书30分钟、运动、写稿、背单词。

列完就没然后了。

到了晚上复盘，脑子一片空白：今天到底完成了几个？这周整体执行得怎么样？

根本不知道。

用app吧，不是要注册就是要付费，要么功能臃肿得像坦克，我只想要一辆自行车。

所以我决定：自己做一个。

一个打开浏览器就能用的「每日打卡+完成度统计」小工具。

不需要服务器，不需要下载，不需要任何编程基础。

就一个HTML文件，双击就能跑。

第一步：让AI帮我写需求文档。

很多人上来就说”帮我写个打卡工具的代码”。

这就是踩坑的开始。

你得先当产品经理，把需求想清楚，再让AI这个”程序员”动手。

我给AI发了这段话——

我的prompt：

“我想做一个本地运行的网页小工具，功能如下：1）每天可以添加多条任务；2）每条任务可以点击打卡标记完成；3）页面底部实时显示今日完成率；4）数据用浏览器本地存储，刷新不丢失；5）界面简洁好看，适合手机浏览器使用。请先不要写代码，先帮我整理一份结构清晰的需求文档。”

AI回了一份非常清晰的文档：功能模块、数据结构、页面布局、交互逻辑，全部拆好了。

这一步花了2分钟。

但它帮我省掉了后面80%的返工。

第二步：让AI模块化生成代码。

注意，我没说”把代码一次性全写出来”。

那样出来一坨东西，出了bug你根本不知道哪里有问题。

我是这么说的——

我的prompt：

“根据上面的需求文档，请分模块输出代码。先给我HTML基础结构和CSS样式部分，暂时不写JS逻辑。”

AI输出了一个干净的页面骨架。

我存成一个`.html`文件，双击打开——

页面出来了。

虽然还不能交互，但样子已经有了：顶部标题，中间任务列表区，底部一个完成率进度条。

然后我接着说：

“现在加上JS逻辑：添加任务、点击完成打卡、实时计算完成率、数据存到localStorage。”

30秒后，完整代码到手。

复制，粘贴，保存，刷新浏览器。

能用了。

第三步：踩坑时刻。

我加了三条任务，打卡了两条，关掉页面，重新打开——

任务还在。

但打卡状态没了。全部变回未完成。

我心里咯噔一下。

但没慌。直接把问题甩给AI——

我的prompt：

“我关闭页面重新打开后，任务还在，但每条任务的完成状态丢失了，全部变回未完成。请检查localStorage存储逻辑，找出问题并修复。”

AI秒回：问题出在存储时只保存了任务文本，没有把每条任务的`completed`状态一起存进去。

给了修复后的代码。

替换，刷新，测试。

完美。关掉再开，打卡状态还在。

整个修复过程，90秒。

最终成品长什么样？

打开就是一个清爽的页面。

顶部输入框，敲任务名，点”添加”。

任务出现在下方，点一下就打卡，变绿，划掉线。

底部进度条实时跳动——”今日完成率：66.7%”。

关掉浏览器明天打开，数据还在。

整个工具就是一个文件。10KB。

从想法到能用，全程不到20分钟。

有人会问：这也太简单了吧？

对，就是这么简单。

但我想说的重点不是这个工具本身。

而是这件事背后的思维方式——

你不需要学编程。

你需要学会的是：像产品经理一样思考，像甲方一样提需求。

AI是你的程序员，它能力很强，但它需要你给方向。

需求越清楚，它交付越精准。

出了bug不要怕，描述现象，让它自己查。

你负责想清楚”要什么”，AI负责搞定”怎么做”。

这才是普通人用AI最正确的打开方式。

今天这个工具的完整代码，我放在公众号后台了。

回复「打卡」直接领取，双击就能用。

你也可以在这个基础上让AI加功能——每周统计、数据导出、主题换肤，随便折腾。

做完了截图发评论区，我想看看你们能玩出什么花来。

下一篇预告：

见上一篇评论区