沉迷Vibe coding中,2小时搞了个“怼人助手”的机器人
2025-12-29 10:17:30

最近一周时间又“浪费”了。


比较佛系,想到哪打到哪儿。半个月过去,内容策略还没有完全开始进行,需要尽快推进下。


最近的时间基本上都在不断的输入新知识,智能体相关、AI编程相关(或者说是氛围编程)、以及一些其他AI相关的资讯。


总的来说,收获颇丰,也产出了一些内容(智能体方面的文档,以及3个小的应用)。


下面是利用HatchCanvas搭的“怼人助手”机器人🤖,应该算是入了Vibe Coding的大门了。




怼人助手


成品长这样👇




怼人助手的主要功能是:针对用户输入的文本进行回怼


使用场景是:当你在微信群或者评论区battle不过别人的时候,就可以搬出你的AI助手,教你如何优雅的回怼别人。可以是“高情商反击”、“致命一击”,也可以是“文艺型反击”。


当然,这些反击类型的提示词,也是由AI输出的。




因为使用到了Deepseek的api,如果直接将key放在应用内,有暴露秘钥的风险。


在大哥的帮助下,成功将key封装到了后台,这样就可以开心的玩耍,也不用担心被有心之人薅羊毛了。



“怼人助手”整个的产品构思、Vibe coding、部署上线过程,大概耗时两个钟头。


其中产品构思(提示词、功能设计)耗时大概1小时。


Vibe coding(适配API调用、UI调整)耗时大概1小时。


部署上线大概5分钟(打包、插入数据统计代码、部署)。





产品构思



参考了大哥“咪蒙标题生成器”的模板,将标题生成的部分,更改为“回怼别人”的内容。


产品的功能大致列为5点,分别是:回怼类型、文案展示、文本框提示、加载提示、以及参考“咪蒙标题生成器”的功能代码部分


另外的就是之前提炼出的通用模板,包括:UI风格、交互反馈、以及常规的广告资源


实际上有很多未列出/未考虑的点,AI都能很好的进行补全。


所以氛围编程的其中一个魅力就在于此:你只需要给个框架,AI能够帮助你尽可能的考虑完善






Vibe Coding





将准备好的提示词,直接丢给HatchCanvas。


抽根烟的功夫,初版大概就会展示出来。


然后根据产品的功能点,进行逐一测试。


如果有bug或者UI、交互上面优化的需求,再挨个告诉它,让他麻溜改一下。



来回拉扯3-4轮,抽2根烟的时间,差不多就搞定了。





部署上线




把HatchCanvas提供的可编辑文档,复制粘贴到本地。


从百度统计或者微软统计创建一个数据监测的代码,复制粘贴。


然后域名解析、宝塔一键部署,完事儿。





朋友圈发了一波,群里发了一波,带来了100多访问量,挺有意思的,自嗨型选手,哈哈。





感觉很神奇,虽然应用的价值并不是很大,但是给自己打开了一扇新的大门。


近一段时间总的体验是:AI一天,人间半年


因为根本学不完。


还是期待一下能够尽快地消化新的知识,学以致用,给产品带来流量的同时能够给变现带来一定的帮助,通过不断的正反馈激励自己前行。





附件:什么是Vibe coding?看下面比较通俗的解释:



什么是 Vibe Coding?——人人都能听懂的通俗解读

🌟 一句话定义

Vibe Coding(中文常译作“氛围编程”或“随性编码”)是一种全新的编程方式:你用说话指挥 AI,AI 帮你写代码。就像你对一个“超级懂技术的搭档”说:“做个能左滑右滑的商品页面”,几秒钟后,完整的代码就出现在屏幕上——这就是 Vibe Coding 的日常。

🤖 核心原理:自然语言驱动

  1. 你说人话,AI 写代码:开发者用英语、中文等自然语言描述需求(比如“把登录按钮变大”“给购物车加个动画”),AI 自动翻译成可运行的代码。
  2. 即时生成 + 实时修改:代码生成后,你测试效果,发现不满直接说:“颜色太丑,换成蓝色”,AI 立刻重写。
  3. 全流程沉浸式对话:整个过程像聊天,不需要离开编辑器,也不需要手动敲代码细节。

🛠️ 工作方式:四步循环

  1. 1. 你描述需求(“做一个支持滑动删除的待办清单 App”)
  2. 2. AI 生成代码(自动输出 React 或 Python 代码)
  3. 3. 你测试反馈(“删除动画太卡,优化一下”)
  4. 4. AI 迭代优化(生成更流畅的动画代码)
  5. 这种循环可能每分钟发生多次,直到功能完美。

🌈 典型使用场景

  1. 快速做原型:2 小时做出一个 App 雏形,过去要花 2 周。
  2. 调样式改 UI:“侧边栏内边距缩小一半”——AI 秒改,省去翻 CSS 文件的麻烦。
  3. 写小工具:自动生成爬虫脚本、数据整理工具等一次性程序。
  4. 学习新技术:新手让 AI 解释代码逻辑;老手快速上手新框架。
  5. 消灭重复劳动:自动写模板代码(比如增删改查接口)。

🔧 常用工具

  1. Cursor:最流行的 AI 编程助手,像“智能版 VS Code”,支持语音输入。
  2. Windsurf:能理解超大型项目,适合团队协作。
  3. GitHub Copilot:写代码时自动补全,如同编程搭档。

✅ 优势 vs ⚠️ 局限

优势

局限

闪电般的开发速度

🤖 代码质量可能不稳(需人工审查)

🚪 编程门槛大幅降低(非程序员也能参与)

🔒 不适合安全敏感场景(如支付系统)

💡 释放创造力(专注设计而非语法)

🧩 复杂项目可能失控(AI 难理解超大代码库)

🔄 实时迭代(改需求像聊天一样简单)

📚 开发者需懂“提示技巧”(如何准确描述需求)

👨‍💻 开发者角色大转变

过去程序员是“码农”,亲手敲每行代码;现在更像 “AI 指挥家”

  1. 导演:规划功能、设计体验、把控质量
  2. 教练:用自然语言训练 AI 理解需求
  3. 质检员:测试 AI 的代码,确保逻辑正确

💬 总结:像对话一样编程

Vibe Coding 的本质是 “对话式开发”。你不再埋头写 if-else,而是抬头说:“我要这个功能,你来实现。” 它让编程变得更直觉、更人性化——就像教一个聪明实习生写代码,只不过这个“实习生”学习速度是光速,且 24 小时待命 😉。








声明:该内容由作者自行发布,观点内容仅供参考,不代表平台立场;如有侵权,请联系平台删除。
标签:
技术栈
大模型
多模态大模型
社交媒体营销