我的 Vibe Coding 的第一个项目

大家好，我是 Immerse，一名独立开发者、内容创作者。

关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新）
个人网站：https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

作为一名开发者，大家都会面临长时间 Coding 忘记休息，忘记喝水。我们也都知道这其中的危害，但在工作中却很难自觉地执行这些健康习惯。已经有多位同事因长期久坐出现肾结石等健康问题。

基于这个真实的小痛点，尝试用 Vibe Coding 方式开发一个健康提醒插件

Health Reminder：一个极简的 VS Code 插件，提供久坐和喝水的强制提醒功能。

这个项目的价值不仅在于插件本身，更在于展示如何利用 AI 从零开始快速构建有实际应用价值的工具。

GitHub：https://github.com/yaolifeng0629/Health-Reminder

插件市场：https://marketplace.visualstudio.com/items?itemName=Immerse.health-reminder

Vibe Coding 开发全流程详解

Vibe Coding 是什么？

可以直接翻译为“氛围编程”，不是简单的让 AI 按照你的命令去写代码，而是结合你的规划、直觉和迭代的一种新型开发方式。

但我个人觉得它是一种通过自然语言与AI共同协作完成编程任务的一种新的开发方式。不同于之前的的" Ctrl C、V 代码片段"，它更像是你与一个资深的开发小伙伴结对编程，只不过这个小伙伴变成了 AI。

下面我会分享初次体验 Vibe Coding 这个开发流程

1. Requirements & Plan

我用自然语言描述了核心功能，让 Gemini 2.5 Pro 帮我扩展和完善。

这个阶段的关键是将模糊的想法转化为结构化的功能需求。与之前不同的是，我不需要再写详细产品交互文档，只需要描述核心功能和使用的场景

你给我一款VSCode插件，其核心功能：久坐、喝水强制提醒。

**核心功能 (Core Functionality):**

1.  **独立计时器 (Independent Timers):**

    *   **久坐计时器:** 跟踪上次提醒后或开始工作后的时间。

    *   **喝水计时器:** 跟踪上次提醒后或开始工作后的时间。

    *   **自动重置:** 每次提醒触发并被用户“确认”后，对应计时器自动重置。

2.  **强制性全屏提醒弹窗 (Mandatory Full-Screen Reminder Pop-up):**

    *   当任一计时器达到预设阈值时，自动在 VS Code/Cursor 界面上方弹出一个 **全屏或占据大部分屏幕、不可关闭** 的模态窗口。

    *   **UI 锁定:** 此窗口必须完全覆盖编辑器界面，并暂时禁用所有键盘输入和鼠标操作，直到用户进行互动。

    *   **提醒信息:** 窗口内显示明确、简洁的提醒信息：

        *   久坐提醒时显示：“该起身活动了！”或“休息一下眼睛，伸展身体。”

        *   喝水提醒时显示：“该喝水了！”或“补充水分，保持健康。”

    *   **强制确认按钮:** 窗口底部必须有一个明确的按钮，如“我知道了”、“已休息”或“已喝水”。用户 **必须点击** 此按钮，才能关闭弹窗、解除 UI 锁定，并重置相应的计时器。

    *   **（可选但推荐）短暂延迟:** 弹窗出现后，可在确认按钮激活前强制用户等待 3-5 秒，以确保提醒被注意到。

3.  **极简配置 (Minimal Configuration):**

    *   通过 VS Code/Cursor 的设置 (`settings.json`) 或图形化设置界面，仅提供以下关键配置项：

        *   **久坐提醒间隔 (Sit Reminder Interval):** 默认 60 分钟，可调整（单位：分钟）。

        *   **喝水提醒间隔 (Drink Reminder Interval):** 默认 45 分钟，可调整（单位：分钟）。

        *   **启用/禁用提醒 (Enable/Disable Reminders):** 可单独开启/关闭久坐提醒和喝水提醒。

这个步骤 AI 会根据扩展的功能需求，开始给我实现初步的功能代码。

2. Debug & Testing

直接按 F5 选择 VS Code Extension 启动调试，在新 VS Code 窗口中体验和测试功能。

3. 打包与发布

调试验证无误后，使用 vsce 工具打包插件：

npm install -g @vscode/vsce  # 安装打包工具

vsce package                 # 打包插件

生成的 .vsix 文件就是插件安装包。

最后，在 VS Code Marketplace 上创建账号，然后发布插件。

整个过程出人意料地顺利。

Vibe Coding 体验心得

1. 角色的转变

传统开发中，需要在多个角色间切换：需求分析师、架构师、开发者、测试员等。而在 Vibe Coding 中，AI 能够同时扮演多个角色，让开发过程更加流畅。

2. 自然语言的局限

用自然语言描述需求和问题，对于一些小细节地方的处理可能还是不够完善，需要人为多次介入。

GitHub：https://github.com/yaolifeng0629/Health-Reminder

插件市场：https://marketplace.visualstudio.com/items?itemName=Immerse.health-reminder

其他好文推荐

2025 最新！独立开发者穷鬼套餐

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

实战分享】10 大支付平台全方面分析，独立开发必备！

关于 MCP，这几个网站你一定要知道！

做 Docx 预览，一定要做这个神库！！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！