vibecoding了一个博客编辑器

  一直觉得在电脑上写博客有些麻烦，于是前段时间vibecoding了一个移动端的博客编辑器。

  这并不是我第一次vibecoding了。前段时间学校任务繁重，再加上各种各样的课设，这种情况下如果再靠半古法编程的话那就太不够用了。

  于是我就体验了一下强大的codex。那种感觉就像是土老帽进了城一样，之前一个人要花好久时间才能完成的一个项目，它三下五除二就做好了，而且做的还不错。不得不说，五月底购买的codex将会是我这个学期以来最值的一次花销。现在看来，如果没有codex的帮忙的话，我整个六月根本不知道要怎么过。

  也正是因为codex的出现，我觉得我现在的身份从底层的实现者逐渐转变成了上层的架构者、组织者、设计者。我甚至已经有好些时间没有手写过代码了。就拿六月份刚结束的嵌入式课设举例，它的要求是让我们在学校提供的stm32开发板上制作一个贪吃蛇游戏。在这个项目中，我和我的组员没有写过一行代码，开发过程中存在的交互只有在codex的输入框中写下我们的需求。然后就是等上一段时间后，刷一会手机后检查它给出的结果就行。因此，我们不再需要管底层是如何实现的，我们不再需要弄明白mcu是如何通过控制哪根管脚来让OLED屏幕上哪个像素点发光的，我们只需要将需求清晰明确地告诉ai就行。

  在实验室做课设的过程中，我注意到几乎，应该是没有几乎，就是所有人，都在使用各种各样的code agent来完成任务。那么在这种情况下，原本用来检测大家学习成果的课设任务变成了一场需求描述大赛，或者说是游戏创意大赛。因为在code agent的帮助下，我相信不可能有任何小组会出现无法实现基础功能的情况，所以如果想要脱颖而出的话，那必须要在游戏玩法和创意上要有过人之处。事实也确实如此，我看到其它小组也有各种各样与众不同的游戏玩法。

  总之，vibecoding的出现，让开发过程变成了黑盒。开发者不必再理会具体的代码实现了，输入需求然后审查结果。

  说回我前段时间做的博客编辑器。由于之前一直觉得在电脑上写博客好麻烦，每次都要在博客源文件里面写，然后写完还要敲命令构建，最后还要敲命令部署。所以我就想，能不能借助ai神力做一个移动端的博客编辑器，然后让它帮我自动构建加部署。

  在查阅了一些解决方案后，发现github上有一个叫action的东西非常合适。借助在github仓库里面配置工作流就可以实现远程自动构建加部署，这样一来就不需要我自己在电脑上手动构建加部署了。具体来说，我需要将我的博客源文件创建为一个github仓库叫做blog-source，然后在这个仓库中创建工作流，每当我在blog-source中进行提交文章时候，工作流就会自动帮我完成构建加部署。

  这样一来我就只需要关心需要如何在手机上通过github api来对我的blog-source仓库进行操作就行了。好吧，实际上这也不是我要关心的内容，我只需要告诉ai我想要在手机上对我的仓库进行操作，然后它自动就会帮我完成的。

  由于我的codex到期了，并且没有续费，因此我的vibecoding工具变成了claude code。不过并不是真正的claude code，而是接入deepseek api的，毕竟ds真的真的太便宜了。前两天接入kimi-k3试了一下，我在cc里面发了一句你好，要了我四毛钱。看来穷玩车富玩表，鼎富还得玩kimi-k3。

  我将我的需求告诉ds后，它咔咔咔迅速给我做出了一个原型，或许是得益于谷歌原生的UI风格，效果还真不错。该有的基础功能都有，连接仓库、获取文章、编辑文章、发布等等。ds做出来的效果出乎我的意料，而且这个原型只花了我一块多点。

  那么接下来的工作就是在这个原型的基础上进行优化修缮工作了。我发现在code agent的帮助下，前端的工作重心将不再是代码设计了，因为ai会帮你写好所有代码。前端的工作我认为更应该放在以用户体验为中心的交互设计以及审美设计上。由于ds没有视觉能力，因此如何描述清楚我心里的想法成了一个需要关注的问题。

  在文章编辑界面的优化过程中，我遇到了一个看似简单却难以解决的一个问题。具体来说，当我在编辑文章时候，由于设备自带键盘的弹出会让编辑区向上回缩，而编辑区容器并不会向上滚动，这将导致较下方的光标会被遮挡。这个问题对于编辑者来说不是一个好的体验，必须优化。

  最初我尝试把这个现象告诉ds，让它自己分析并尝试解决，但是做了几轮后效果始终不理想。我怀疑是ds能力不够，因此我借来舍友的codex一用，我将同样的提示词输入给codex，试图让其自己分析并尝试解决。效果也不佳，甚至有些时候还不如ds。

  看来让ai自己想解决方法是不行了，我需要为其提供一种解决思路。一顿深度思考后，我想到一种基于用户屏幕点击位置的遮挡检测算法。首先我需要让软件能够获取用户在编辑界面的光标点击位置，并设定一个界限值。每次用户电击时候，检测光标位置是否低于这个界限值。若低于，则表示可能会被遮挡，因此在弹出键盘后需要让编辑区容器向上滚动一段距离。滚动的距离由当前光标位置和编辑区顶部三分之一处的差值决定。

  当我直接将这个解决方案告诉ds后，我发现它的实现效果很差，需要一步步引导它去完成。实际上在第一步让软件获取编辑界面的光标位置就遇到了难题，ds总是获取光标在编辑容器中的位置，而不是相对于屏幕的全局位置。好在我循循善诱下，可算是完成了。

  对于这个vibecoding的小项目，我从始至终几乎都没有看过代码，因为我之前从未接触过安卓的开发。但是借助ai，的的确确完成了一个不错的小编辑器。不得不说，现在在ai的帮助下，编程的门槛大幅降低。导致网上出现了一些言论，例如文科生+codex>工科生。对于这句话我认为并不成立，虽然借助codex等ai工具，确实可以让之前从未接触过开发的人可以做出一些有趣的小项目。但是在缺少专业知识的情况下，也会闹出一些笑话，例如本地做了个网站，但是却分享了一个127.0.0.1的地址。所以去看网上那些所谓vibecoding的项目，总是充斥着大量的同质化严重的垃圾作品。

  总之vibecoding虽然vibe，但它毕竟还是coding，还是需要懂一点东西的。此外，还需要一点绝妙的创意。