独立开发周记 104：如何在 24 小时内一行代码都不写用 AI 开发并上线一个工具类网站

[vulgur]

2025,0203-0209

周四自己去看了哪吒 2 ，周六晚上陪娃在家看了哪吒 1 ，这么一对比，哪吒 2 的画面、动作、剧本提升太多了，完全值得 100 亿票房！

第一次用 AI 写网站

我作为一个前端小白，在一行代码都没写的情况下，尝试让 AI 编程，在 24 小时内开发并上线了一个极简主义的专注计时器，FlowFocus。这篇公众号文章就是在这个工具下写完的。

动机

我多年前用 Vue 开发过两个小项目，但是从那以后就没再学习过前端开发了。为了满足国内安卓市场的要求，极简系列 App 的官网我都是找了个模板替换一下文字和图片就应付了。也曾用 vercel 搞过个人 blog ，但是 Next.js 是基于 React 的，我都不会改。

看到现在各种 SaaS 层出不穷，而且国内专门有个门派是做出海 SaaS 的，收益颇丰，很是羡慕。一直想着自己也去尝试一下这个领域，但是前端苦手，现在正好有了 Windsurf 和 Cursor 这样的 AI IDE ，我觉得应该是可以入门了。

本来是想写一个极简时钟的网页版，顺便推荐下载 App ，但是我的水平根本无法做出来，就算是用 AI 来实现估计也很困难极简时钟各个主题，索性就先做出来一个最简单的番茄钟来练手。

过程

一开始我并没有用 Windsurf 和 Cursor ，而是使用了 v0.dev 。我让它生成一个番茄钟页面，直接就成功了，但是我又尝试多次让它生成一个翻页时钟样式的番茄钟，它就死活搞不定了，我也放弃了翻页时钟这个想法。v0.dev 我是第一次使用，还不太习惯，然后就把工程 clone 到本地，用 Windsurf 来继续开发。

番茄钟已经烂大街了，我就想着能不能搞点特殊功能和设计，然后我就发现了有一个和番茄工作法相关的另一个时间管理法，叫做 Flowdoro （ Flow+Pomodoro ），原理就是自己掌控专注时长，休息时间是专注时间的五分之一。番茄钟是倒计时，而这个是正计时，所以它不会主动打断你的心流状态，只有你觉得累了或者从心流状态中走出来就可以主动进入休息状态。这样你会找到更适合你自己的专注和休息节奏，不会像番茄钟那样被固定的倒计时打乱心流。

我感觉这个概念非常棒，也很简单，于是就推翻了之前的番茄钟设计（这里留下了隐患），全面改成了这个 Flowdoro 。然后整个开发里最耗时的工作出现了：选域名。我一开始想从 flowdoro 这个词为基础寻找相关域名，.ro 这个罗马尼亚的域名无法注册，其他相关的无奈都被注册了。后来就改成了 flowfocus ，域名商建议我拿下 flowfoc.us 这个域名，但是我通过咨询豆包和 DeepSeek ，都不建议 .us 这个域名，最后就选择了最便宜的 flowfocus.site ，反正是练手项目，不需要投入大量金钱在域名上（投入半天时间我已经很后悔了）。

和 AI 的沟通过程就是：

• 让 AI 实现一个功能/修改某个细节
• 运行，测试
• 出现问题的话把问题直接交给 AI
• 如此循环反复

最终还真就在 24 小时内弄出了这么一个简单的工具型网站。虽然我一行代码都没写，但是和 Claude 交流下来也是颇费功夫。它总是会在修改其他细节时擅自改动计时规则，导致我几次差点破口大骂……还有字体，我想让它修改计时数字的字体，但它总是修改其他文案的字体。除此之外，下面的很多调整都花费了我大量的 credit 才调整好：

1. 按钮的布局和大小
2. 中英文本地化
3. 移动端上的自适应

为了让网站看起来更专业，我还自己用 Figma 设计了一个 favicon 。一开始的想法就是和网站标题一样的设计，两行文字，首字母突出颜色，但是这个图标在浏览器里太小了，根本看不清文字。索性就改成了 FF ，简单直接。

推广

网站发布后，先是在几个微信群里发了一下，然后又在 V2EX 、X 、小众软件、w2solo 上都发了贴，前两天访问增长很多，但是到了第三天就无人问津了。所以，想要指望这个小东西就带来收入，还是不太可能的。

第二次用 AI 写网站

有了第一次的经验，第二次做网站的速度就快了很多。

我一直想给国内安卓市场的 app 的写一个 Dashboard ，收入统计展示和订单操作，但是一直懒得写，现在通过 AI 仅仅 4 小时就做出来了。

最后剩余的 credit 不多了，我就试着用 Gemini 2.0 Flash 和 DeepSeek V3 来写，但是发现都不如 Claude 。Gemini 很快，不适合写代码，适合提交 git ，而 DeepSeek 压根都没反应。

心得体会

1. 截止到目前，在 AI 编程领域，Claude 还是最好的模型，没有之一
2. 频繁提交 git ，最好每一次向前推进都要提交，即使实现是不完整的。千万不要等到攒了一堆修改，结果一次出错，就只能从头来过，白白浪费很多 credit 。
3. AI 经常无视 rules ，所以对话里语气可以强硬些，多加叹号！移动端适配的问题我和 AI 对话了好多轮都没解决，最后我加了三个叹号，AI 一下子就解决了。
4. 可以通过 rules 让 AI 自动执行工作流。我好多次提交到 Vercel 都因为 ESlint 的问题而部署失败，也好多次 AI 修改代码后，本地服务器就出错，所以我就让 AI 每次修改后都执行 lint & build ，有错误就自动修复，没错误才能提交 git 。
5. 需求描述还是要具体一些，也最好定位到具体文件或者具体代码位置。不然 AI 会自己搜一遍代码，还有可能会忽略已有的代码而新写一大堆，你不说它就不会复用。库库库写了一大堆反而不能用，费时费力又费 credit 。
6. AI 会自己根据文件夹名称、文件名、你的描述自己瞎猜变量名和功能实现，所以关键名词和参数一定要统一规定。比如我上面说的番茄钟留下的隐患，一开始网站是想做成番茄钟的，AI 就建立个页面叫做 Pomodoro.tsx，后来虽然改成了不同的计时规则，但是 AI 时不时地还会因为这个文件名把计时规则改回番茄钟……好多次！还有，第二个网站里统计三个 app 的数据，AI 给极简时钟、极简日记、极简便签的变量名起的就是 minimal-clock 、minimal-diary 、minimal-notes ，但是数据里对应的其实是另外三个名字，一开始在我的纠正后 AI 自己建立了一个名称映射，但是随着功能越来越多，每次新增从数据库读取数据的代码都会出现错误，后来我索性把所有名称和参数统一了。
7. 贵有贵的好处，便宜有便宜的用途。目前 Gemini 2.0 Flash 和 DeepSeek V3 在 Windsurf 里每次只消耗 0.25 credit ，虽然写业务代码不行，但是总结修改提交一个 commit 还是绰绰有余的，像这种非业务逻辑的工作完全可以交给这些便宜的模型来做。

---

独立开发不易，但道哥飞蛾投烛。

感谢各位支持，助道哥飞黄腾达。

欢迎赏脸阅读我的独立开发周记，如果你觉得这一篇写得还不错的话，以下回应会令我无比开心，开了又开：

• 点赞，开心一晚 😉
• 在看，开心一天 😁
• 分享，开心三天 😆
• 赞赏，开心一周 😘

也欢迎大家能与我交流关于独立开发的一切，更欢迎大家下载使用我的 App😄。

• 极简时钟，极简主义的翻页时钟、番茄钟和正计时
• 极简日记，用时间轴随手记录生活
• 极简便签，支持 Markdown ，自定义分享图片，多种主题和布局
• Nut Goals，像小松鼠一样记账、存钱、管理愿望清单

[summerwar]

这个时间也太久了，现在都是三个小时就上线了