惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
爱范儿
爱范儿
WordPress大学
WordPress大学
博客园 - 三生石上(FineUI控件)
J
Java Code Geeks
Vercel News
Vercel News
aimingoo的专栏
aimingoo的专栏
T
Tailwind CSS Blog
罗磊的独立博客
B
Blog
博客园_首页
A
About on SuperTechFans
有赞技术团队
有赞技术团队
V
V2EX
U
Unit 42
I
InfoQ
IT之家
IT之家
博客园 - 司徒正美
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Stack Overflow Blog
Stack Overflow Blog
The Cloudflare Blog
H
Help Net Security

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
我的 Vibe Coding 的第一个项目 - 少数派
2025-06-22 · via 少数派

大家好,我是 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 是什么?

可以直接翻译为“氛围编程”,不是简单的让 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 项目!