用AI写网页小工具

约 2739 字大约 9 分钟

2026-06-24

你将用30分钟做出一个能用的待办清单网页应用

这个项目能帮你什么

你想要一个小工具。

可能是一个待办清单。可能是一个计算器。可能是一个番茄钟。

你去搜，要么是功能太多太复杂，要么是界面丑到不想用。找个完全符合自己需求的？不存在的。

找人做？一个简单的小工具报价好几百。

自己学编程？你只是想要个小工具而已，又不是要当程序员，学一门编程语言也太夸张了。

说白了，这就是普通人的困境：需求很简单，但实现门槛不低。

好消息是，现在你完全可以用AI做出来。你不需要写一行代码，只需要描述"我想要什么"，AI帮你把代码全部写好。这个东西有个名字叫 Vibe Coding——氛围编程。

你不需要懂代码，你只需要会"说"。这个项目带你从零做出一个待办清单网页应用，完整体验Vibe Coding的全过程。

你需要准备

准备什么	干嘛用的	大白话解释
Claude Code 或 Cursor 或 ChatGPT	写代码的AI	三选一，都能用
一个浏览器	看效果用的	你电脑上肯定有
30分钟时间	跟着做一遍	第一次做可能要久一点

工具怎么选

Claude Code：在终端里用，功能最强，适合想认真学的。推荐！
Cursor：一个代码编辑器，界面友好，适合有点基础的人
ChatGPT：直接在网页对话框里用，最简单，生成的代码自己复制到文件里

三个都能做出这个项目，选你最顺手的。

手把手做一遍

我们要做的项目：一个待办清单（Todo List）网页应用。

功能：添加任务、标记完成、删除任务。

外观：简洁好看，有交互效果。

先看Vibe Coding的核心循环，整个项目就是不断重复这个过程：

就这么转圈圈，转到你满意为止。这就是Vibe Coding的全部精髓。

第1步：描述你想要什么

打开你的AI工具，把下面这段话发给它。

第一个Prompt——描述你的需求：

帮我做一个待办清单网页应用，要求：

功能：
1. 可以输入任务，按回车添加到列表
2. 每个任务前面有勾选框，点一下标记为已完成（加删除线）
3. 每个任务右侧有删除按钮，点击可以删除
4. 顶部显示总任务数和已完成数量
5. 底部有三个筛选按钮：全部、未完成、已完成

外观：
1. 整体居中，宽度不超过500px
2. 风格简洁现代，用圆角和柔和的阴影
3. 配色用蓝灰色系，主色调用柔和的蓝色
4. 完成的任务显示删除线和灰色文字
5. 加一点过渡动画，勾选和删除的时候有动效

技术要求：
- 用单个HTML文件实现，包含HTML、CSS和JavaScript
- 不需要任何框架，纯原生就行
- 确保在手机上也能正常显示

请帮我创建这个文件，文件名叫 todo.html。

为什么要说得这么细

你描述得越具体，AI做出来的东西越接近你想要的。颜色、布局、动画，能说就说。你不说，AI就按它的"默认审美"来，不一定是你喜欢的。

第2步：AI生成代码

如果你用的是Claude Code，它会直接帮你创建 todo.html 文件。如果你用的是ChatGPT，它会把代码显示在对话框里，你复制粘贴到一个新建的文本文件里，把后缀名改成 .html 就行。

AI生成的代码大概长这样（不用看懂，AI写的）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办清单</title>
    <style>
        /* 这里是一大段CSS样式 */
        body { ... }
        .todo-app { ... }
        /* ... */
    </style>
</head>
<body>
    <div class="todo-app">
        <h1>我的待办</h1>
        <input type="text" placeholder="输入任务，按回车添加">
        <div class="stats">总计 0 / 完成 0</div>
        <ul class="todo-list"></ul>
        <div class="filters">
            <button>全部</button>
            <button>未完成</button>
            <button>已完成</button>
        </div>
    </div>
    <script>
        // 这里是一大段JavaScript逻辑
        // 添加任务、勾选完成、删除、筛选等
    </script>
</body>
</html>

第3步：在浏览器看效果

如果你用Claude Code：

> 帮我在浏览器里打开 todo.html 看看效果

如果你用ChatGPT或Cursor：

在电脑上找到 todo.html 文件，双击打开。它会用你的默认浏览器打开。

你应该能看到一个简洁的待办清单界面。试着输入一个任务，按回车，看看能不能添加。

第4步：告诉AI哪里要改

第一版出来后，你肯定会发现有些地方不太对。没关系，这就是Vibe Coding的乐趣。

以下是一段真实的迭代对话：

> 我看了效果，有几个地方想改：
>
> 1. 输入框太矮了，想高一点、大一点
> 2. 添加任务的时候，列表项有一个从上往下滑出的动画
> 3. 删除任务的时候，先淡出再消失，不要直接没掉
> 4. 底部筛选按钮当前选中的那个要有明显的高亮效果
> 5. 整体加一个浅灰色的背景，让白色卡片更突出

AI会帮你改好，刷新浏览器看效果。

继续迭代：

> 再改几个地方：
> 1. 添加一个"清除已完成"的按钮，放在筛选按钮旁边
> 2. 空状态的时候（没有任务），显示一个提示文字"还没有任务，添加一个吧"
> 3. 任务文字太长的时候，我想让它换行显示，不要被截断
> 4. 给页面加一个favicon，就用一个emoji作为图标

就这样，一轮一轮地改。每次只改几个小地方，很快就能达到你满意的效果。

心态建议

看不懂代码完全没关系！就像你开车不需要懂发动机原理一样。你只需要知道"怎么用"——告诉AI你想要什么效果，它会帮你搞定代码部分。

效果对比

对比项	以前的做法	现在用AI做
耗时	学编程：几个月。找外包：几天沟通	30分钟出第一版
成本	学费几百到几千。外包几百块	AI使用费，几乎为零
定制化	用别人的模板，改不了	每一个细节你说了算
改起来	改一行代码搞半天	跟AI说一句话就行
成就感	"这是我找的/买的"	"这是我自己做的！"
学到的东西	啥也没学到	理解了网页应用是怎么回事

进阶变种

待办清单做完了，你已经掌握了Vibe Coding的基本套路。同样的方法，你可以做更多小工具。

计算器

帮我做一个计算器网页应用：
1. 支持加减乘除四则运算
2. 支持连续计算（比如 1+2+3=）
3. 有清除按钮和退格按钮
4. 外观模仿iOS计算器的风格
5. 按键有按下的动画效果

倒计时

帮我做一个倒计时网页：
1. 可以输入倒计时的时间和事件名称
2. 大字号显示剩余时间（天、时、分、秒）
3. 倒计时结束有提醒（闪烁+提示音）
4. 外观要大气，适合全屏展示
5. 支持保存多个倒计时

番茄钟

帮我做一个番茄钟网页应用：
1. 25分钟工作 + 5分钟休息的循环
2. 大圆环进度条显示当前进度
3. 工作/休息切换时有不同的颜色主题
4. 完成一个番茄钟有提示音
5. 显示今天完成了几个番茄钟
6. 可以自定义工作和休息的时长

常见问题

Q1：我真的不需要懂任何编程吗？

对，不需要。你只需要会描述你想要什么。AI负责把你的描述变成代码。当然，如果你以后想自己改一些小地方，学一点基础的HTML和CSS会更有帮助，但不是必须的。

Q2：生成的代码安全吗？会不会有问题？

这种运行在浏览器里的网页代码非常安全。它不能访问你的文件系统，不能联网（除非你特意要求），不会对电脑造成任何伤害。放心用。

Q3：AI做出来的东西在手机上能用吗？

在Prompt里加一句"确保在手机上也能正常显示"就行。AI会自动做响应式适配。做完后在手机浏览器里打开 todo.html 试试。

Q4：做出来的工具怎么分享给别人？

最简单的方式：把HTML文件直接发给对方，对方双击就能打开。如果你想放到网上让别人通过链接访问，可以免费部署到Vercel或Netlify，告诉AI你想部署，它会教你。

Q5：AI有时候改了这里，那里又坏了怎么办？

这是Vibe Coding常见的情况。告诉AI："你改X的时候把Y弄坏了，请修复Y，同时保持X的改动。"它会帮你修好。如果越改越乱，可以让AI"回退"到之前能用的版本，重新来。

小结

要点	一句话总结
核心方法	Vibe Coding——说需求，看效果，提改进，循环
不用懂代码	你是产品经理，AI是程序员
描述要具体	颜色、布局、动画，能说就说
迭代是王道	第一版不完美很正常，一轮轮改
从小做起	先做简单的，熟练了再做复杂的
想深入学	Claude Code课程带你从入门到精通

学到了？更多AI实战项目在知识星球，每周更新 → 加入星球