本文首发于公众号 极客枫哥 ，日更分享各种好玩的软件、编程知识和个人成长故事
最近工作比较忙，也没有好的主题来分享，所以公众号断更了一段时间。最近看到一个很火的 AI 对话代码编辑器 cursor，体验了一下，觉得还是很不错的，对于不懂编程的人来说，可以利用这个工具实现一些自己想要的简单的网页。
这篇文章我们就结合一个实际的案例，和大家一起从 0 开发、上线一个网站。
我们要做的是一个待办事项的清单，首先新建一个 todoList的目录，然后使用 cursor打开。
在 mac 中唤起 AI 对话的快捷键是 Command + L。
我们输入以下内容，先让 AI 帮我创建一个 html 页面。
貌似没有自动帮我创建 index.html，那我手动新建一个文件，然后把生成的代码复制进去。
然后直接使用浏览器打开这个 html 文件，预览一下，效果还真不错。
测试了一下，功能也是可以正常使用的，添加 todo 项，完成 todo 项都是没问题的。
但是我觉得这个页面太俗了，我们尝试让 cursor来对它做一些美化。
选中 index.html，然后唤起对话，输入对应的美化提示词，待 AI 输出完成后，点击右侧的 Apply 按钮，就可以查看修改的内容，如果没有问题的话，可以再点击 Accept接收修改。
我们再来查看一下美化后的页面，这样就舒服多了。
但是我发现一个小问题，添加 todo 项的时候只能点击"添加"按钮，最好能支持回车事件，我们再来给 cursor提需求，看看效果如何。
同样的，我们接收代码后，再来看看效果。测试了下，确实已经支持回车事件了。
有添加 todo，那么最好还能支持删除，继续对话。
经过测试，删除功能也是可以正常使用的，但是"完成"和"删除"两个按钮的配色是一样的，我们再来调整一下。
再来看一下实现的效果
现在基本功能已经完成了，但是如果我操作后，一刷新浏览器，那么内容就不见了，因为我们没有保存数据。
我们继续对话 cursor，让它使用浏览器自带的 localStorage来存储我们操作的数据。
接收代码，再来测试一下，非常完美，刷新后内容依然存在。
最后我们如何把开发好的功能可以让所有人使用呢？我们可以利用 Vercel来快速部署我们的网页。
Vercel的官网地址是：vercel.com/。
我们进入网站，然后登录，通常可以使用 github 账号直接登录。
然后我们在 github中新建一个名为 todoList的仓库
接着把我们写好的 index.html直接提交到这个仓库中。
然后回到 Vercel中，添加一个新的项目
然后找到 todoList的仓库，点击右侧的 import按钮
点击 Deploy，如果能看到下面这个页面，就说明部署成功了
回到项目的看板，可以看到这里有一个 Domains的字段，我们点击这个地址就可以在线访问到我们的网页了，非常完美。
这里我也贴一下我的地址吧，大家有兴趣可以去测试玩玩，todo-list-sigma-five-76.vercel.app/