--- title: Vibe Coding分享会纪要20250712 summary: Vibe Coding分享会中，新任管理员张敏分享了两个AI自动化实践：利用n8n和Whisper实现法语字幕的自动翻译，以及通过n8n+Toggle+Google Sheets实现工作计时的自动统计。展示了AI在提高工作效率中的具体应用。 area: tech-engineering category: technology project: [] tags: - code - vibe-coding companies_orgs: [] products_models: [] date: '2025-07-12' author: Lei speaker: 用AI發電 channel: null guest: null insight: null layout: post.njk series: Vibe Coding source: null --- ## 开场与介绍 **Ray:** 我们开始吧。张敏，请你先介绍一下自己，之后Zalera也介绍一下。你们都是我们新加入的小伙伴。今天之所以选择直播，是因为明天Zalera他们有读书会直播，我们不想和他们抢时间。好了，张敏，交给你了。介绍一下自己，然后开始我们今天的议题和分享。 **张敏:** 好的。大家好，我叫张敏，可以叫我敏。我最近刚作为管理员加入了社群。这是我第一次作为管理员和主持人来组织一场直播，心情非常激动，也很感谢Ray给我这个机会。 关于我自己，我目前在北京处于一个间隔年（Gap Year）的状态，距离上一份正式工作已经有三年了。这三年里，我做过各种事情，比如翻译和一些杂活，我自嘲为“摆烂三年”。但实际上，这更像是我在用一种不那么费力的方式去体验人生。在我的间隔生活中，占据最大头的是运动，我非常热爱运动，甚至跟别人说我的职业是“运动员”。同时，我也对健康相关的营养学知识很感兴趣。 我是去年九月份加入我们社群的。我回顾了一下，我能逐渐走出困惑和困境，正是从那个时候开始的：开始读书，与线上的人建立连接，参加线上和线下的见面会等。这次加入社群“用爱发电”的管理板块纯属偶然。我对AI的使用程度可能连0.001%都不到，可以说是一个纯粹的小白和外行。 **张敏:** 两周前，我甚至都不知道**Vibe Coding**（同声共振编程：一种与AI协作，通过自然语言对话来共同完成编程或创造性任务的模式）这个概念。当时Ray问我对“Vibe Coding”感不感兴趣，我一直听成了“Web Coding”，以为他说的是网页设计。所以，上次直播结束后，我才对Vibe Coding有了更清晰的认知，并立刻在电脑上下载并安装了**Gemini CLI**（Gemini Command-Line Interface：一个通过命令行界面与谷歌Gemini模型交互的工具）。我就是从Gemini开始的，但目前还没有用它做出任何成果。 ## 张敏的实践分享：从小白视角看AI自动化 **张敏:** 今天我先抛砖引玉，从“想解决的问题”、“实现过程”、“成果与困惑”这四个方面，分享我的两个小实践。 ### 项目一：AI辅助法语字幕翻译 **张敏:** 我的专业是法语，在我能做的赚钱工作中，翻译是做得最多也最擅长。恰好，这也是AI最擅长的领域之一，从自然语言处理到各种语言的翻译。昨天正好有一个法语字幕翻译的活找到了我。这个任务是处理一个字幕文件和对应的视频文件。 这个字幕文件虽然有法语句子，但法国的影视作品通常没有官方的法语字幕。如果提供，那也是为听障人士设计的，内容非常概括，与实际台词出入很大。我的任务是，首先将这个不准确的法语字幕补全并校正为准确的台词，然后将其翻译成中文，制作成双语字幕。 一部50多分钟的电视剧，大约有800多句台词。如果纯手工操作，我需要反复听译，有些长句甚至要听几十上百遍才能写下来，然后手动打字。完成这样一集字幕，我通常需要花费大约30个小时。因此，我希望能通过AI，特别是Vibe Coding的方式，将这个流程自动化。 我的设想是，利用**n8n**（发音为 N-8-N：一个开源的、可视化的工作流自动化工具）搭建一个工作流。首先，将视频文件（MP4）和原始字幕文件放入一个待处理文件夹。工作流会自动调用**Whisper**（OpenAI开发的一款高精度语音识别模型）模型，从视频中提取出准确的法语文本。然后，对照原始字幕文件的时间轴，用AI将提取出的文本填充进去，生成一份准确的法语字幕。最后，再调用一个翻译模型，将法语字幕翻译成中文，并放置在相应的位置。 **张敏:** 我认为这个方案是可行的。但目前，我的工作流只进行到了从Google Drive下载文件的阶段，并且这个节点还卡住了。所以这还是一个非常初期的探索。 ### 项目二：自动化工作计时与报告 **张敏:** 我的第二个项目相对成熟一些，是关于工作计时的自动化。背景是，Ray邀请我担任社群管理员，我是按时计费的。Ray也明确表示，我和他沟通的每一句话都可以分享给社群的每一个人。我的工作流程是，每次Ray交给我任务，我需要自己计时、记录，然后统一整理好发给他。 对我来说，最麻烦的就是计时。最初我用纸笔记录开始和结束时间，这不仅麻烦（需要将手写记录誊写到电脑表格），而且会打断我的工作流，需要频繁地抬头低头。为了解决这个问题，我找到了一个名为**Toggle**的网页计时工具。但它的问题是，每次计时结束后，我仍需登录官网去导出数据，这依然很繁琐。我希望实现的是，每次计时结束，数据就能自动输出到一个指定的地方。 **张敏:** 我最终达成的效果是：我在桌面的**Toggle**小工具上点击开始计时，工作完成后点击结束。然后，我设置了一个n8n工作流，每天自动运行一次。它会自动将我当天所有的工作记录，包括工作时长、内容、日期、费率以及计算出的总价，全部输出到一个**Google Sheets**表格里。 （现场演示）我现在手动运行一下这个工作流。大家可以看到，刚才那条演示的计时记录已经自动被添加到了这个Google Sheets表格中，时长也自动转换成了以小时为单位。这样，我只需要做简单的开始和结束计时的动作，后续的整理和统计工作就全部自动化了，这也方便了我们双方的核对。如果忘记计时，Toggle也能记录你在各个应用上花费的时间，可以后续进行估算和补充，灵活性很高。 **张敏:** 目前遇到的卡点是，我需要将这个Google Sheets的数据分享到**Milanote**（一个可视化的笔记和协作平台）里，这意味着我还需要手动复制粘贴一次。我希望连这一步也省去，但Milanote没有提供官方的**API**（应用程序编程接口：允许不同软件之间互相通信和交换数据的标准接口）接入n8n，我尝试了一些非官方的API方案，但都未成功。 **张敏:** 我在想，如果这个流程能接入AI，就可以非常快速地分析我过往的工作记录，比如自动识别我的时间都花在了哪些任务上，并生成一份工作报告。这样我能直观地看到自己在哪些工作上投入时间更多，从而思考如何提高效率。我认为这是一个未来可以继续研究的方向。 以上就是我作为一个纯小白的分享。我希望这个直播能每周举办一次，并且这是一个共创的板块。希望大家如果有自己的想法或主题，都可以告诉我们，一起把它做得更好。分享自己遇到的问题和解决方案，不仅能帮助他人，更能让自己快速成长。如果你想担任主持人，也欢迎联系我们，我会协助你。我的分享就到这里，把话筒交给大家。 ## 技术探讨与创作反思 ### Celine的技术难题：React Native调试 **Celine:** 我有一个问题想请教各位技术大佬。我最近在尝试做一个应用，需要将PDF传入App并转换成音频。我发现**Xcode**（苹果公司为其操作系统开发的集成开发环境（IDE））在调试时存在一些局限性。比如，我用到了一个**React Native**（一个由Facebook推出的开源移动应用开发框架）的PDF处理包，但它似乎不在Xcode的调试范围内，导致我无法使用Xcode进行调试。 **Celine:** AI建议我使用“pre-build”的方式来预览，但这非常麻烦。每次我想测试一个小改动，都得重新构建（build）一遍，再安装到手机上，无法进行实时调试。我想问问大家是如何解决这类问题的？ **Alex:** 我不是写React Native的，所以具体细节不清楚。但实际上，你们的开发速度已经非常快了。我们写原生Xcode应用，每次修改后都需要等待构建，大概一分钟左右。React Native已经快很多了。 ### Alex的创作反思：AI是助手还是“老虎机”？ **Alex:** 我现在主要使用**SwiftUI**（苹果推出的用于构建所有苹果平台App的声明式UI框架）。Claude在写SwiftUI方面表现得非常好，你直接告诉它要做什么，它基本都能帮你写出来。 **Alex:** 但我这周主要在思考一个问题：我觉得AI像一个“老虎机”。如果我给的指令不够具体，它每次生成的结果都不一样。我总可以再“拉一次杆”，期待它能给我一个不同的、甚至更完美的应用。这让人很上瘾，但同时，我感觉自己失去了指挥权。做出来的东西感觉不像我的作品，更像是我通过不断“拉杆”随机生成出来的，像是开盲盒。 **Alex:** 这和画画不同。如果我能精确指挥，AI就是我的画笔。但现在，如果我只是模糊地说“帮我画一幅风景画”，它画出来的作品虽然可能很美，但那不是我创作的，我不会想把它发布出去。所以我最近在重新审视我的工作流。我需要更细致地去指定每一个细节，就像一个导演，要对最终的成品有清晰的构想。如果最终结果有任何让我“惊喜”的地方，比如一个按钮被随意放置在某个位置，那这件作品就不是我的。 **Alex:** 最近我试了一个叫Sono AI (一个利用AI通过文本提示生成音乐的工具) 的音乐创作工具，它能根据你的指令（比如“中国风流行乐”）和歌词生成非常好听的音乐。但做出来的东西我一点感觉都没有，因为它不是我亲手创作的。我还是更喜欢以前在**DAW**（Digital Audio Workstation，数字音频工作站）里，自己一个一个点鼓点、调音量的过程。 **Alex:** 所以我的反思是，我必须把握好每一个细节，对最终的执行结果有明确的预期。执行层面可以交给AI，但我必须是那个艺术总监。我需要事先定义好应用的色板、卡片设计、按钮的圆角弧度、页面的标签数量和交互流程，而不是先让AI做出来我再给反馈。否则，我很容易被它带偏，偏离我最初的创作意图。这需要在执行速度和创意控制之间找到一个平衡点。所以我现在又回到了原点，在玩Figma (一个基于云端的协作式UI/UX设计工具)，研究颜色和设计，等我把所有东西都设计好后，再交给AI去实现。 ### Mike的技术见解与工作流 **Mike:** 我来回答一下Celine的问题，也补充一下Alex的观点。关于React Native的构建速度，确实已经很快了。我之前在微软Outlook团队，改一行代码，等它构建可能要15到20分钟，还可能失败，那个反馈循环非常慢。Web开发和移动端开发现在快多了。Expo（一个围绕React Native的开源平台）的pre-build体验确实不好，因为他们主要靠提供构建服务来盈利，所以不会把免费的本地构建体验做得太好。 **Mike:** 关于Alex说的控制权问题，我非常同意需要通过更详尽的prompt来加强控制。我的工作流通常是这样：我用浏览器插件同时问四个AI，比如“我想在App里做一个付费墙（Paywall），帮我看看竞品是怎么做的”。我快速阅读它们的回答，然后用语音输入，给Claude Code (现已更名为 Claude Tools：Anthropic公司推出的AI编程助手) 下达一个至少100到200词的详细指令。AI的输出本质上是随机的，给的限制条件越少，随机性就越强，风格也越不统一。 **Mike:** 我会要求它遵循我们的**设计系统（Design System）**，比如参考某个特定的文件。在这方面，Web开发比iOS原生开发有巨大优势。比如Web上有个叫**Tailwind CSS**的框架，一个文件就能定义整个设计系统，AI非常理解它，所以写Web的速度和设计一致性非常高，可能比iOS快100到1000倍。iOS的设计系统受苹果限制较多，AI写出来的UI也不一定好看。 **Mike:** 关于需求文档（**Product Spec**），我之前也给Alex发过一个视频，讲的是如何构建自己的需求。基本流程就是：问很多AI，用自己的大脑总结，然后在**Notion**或**GitHub**上写一份详细的spec，再把这个spec交给**Claude Code**去执行。昨天晚上，我让Claude Code去我的GitLab issue列表里找了10到20个需求，让它通宵工作。早上起来，它给我提交了10个代码变更请求，质量非常高，我基本都直接合并了。这10个任务，相当于两个全职工程师一周的工作量，它一晚上就搞定了。这让我觉得非常震撼。 ### Bradley的分享：从简单项目看AI编程 **Bradley:** 我也简单分享一下。我是一名刚大学毕业的程序员。我目前在做两个Vibe Coding项目：一个是翻新我的个人网站，另一个是做一个记账App，希望能自动同步我的消费记录。目前我还在做第一个，就是重新设计个人网站。这基本上是一个纯前端的工作，非常简单。 **Bradley:** 我用了一个叫Lovable的软件，它非常方便。你给它一个prompt，它就能帮你生成整个网页应用。当然，prompt的质量决定了最终成品的质量。因为这只是一个简单的个人项目，我不想在UI/UX上花太多时间，所以就直接让它帮我把前端全部搞定了。 **Bradley:** 关于Vibe Coding本身，我的看法和Alex、Mike比较类似。从技术人员的角度来看，用AI生成代码本身没有问题，但关键在于不能完全放手不管，不能给个prompt然后就全盘接受。对于小项目或者个人工具来说，这样做没问题。但如果项目规模变大，文件数量增多，当今的AI可能无法修复其中出现的复杂问题。甚至可能因为前期没有明确的设计，导致后期想做任何修改都变得极其困难，最终只能推倒重来。 **Bradley:** 所以，对于小规模应用，能做出来就是巨大的进步。但如果要设计一个大型的、可扩展的系统，那么从一开始就需要进行大量的设计和思考，然后再让AI去辅助实现。你可以用AI快速构建出**原型（Prototype）**或**概念验证（Proof of Concept）**，但要把它做成一个有大量用户的长期产品，前期的仔细设计是必不可少的。 ## 需求探索与方法论 ### Tracy的提问：Vibe Coding的定义与学习流 **Tracy:** 我想问一个概念问题。**n8n**是一个工作流软件，如果我只是用它来做普通的自动化，那它就是一个自动化工具。但如果我在工作流里加入了大模型，比如用ChatGPT或Gemini去思考和执行任务，这个过程就叫Vibe Coding了吗？ **Ray:** 你的理解是对的。Vibe Coding的核心定义就是用自然语言去操纵工具、实现你的目的。你不是编程专业出身，但你现在通过与AI协作，让它帮你生成解决方案（比如n8n的JSON配置），这个过程就是Vibe Coding。说白了，就是你和AI协作，让它帮你做你原本做不到的事情。 **Tracy:** 好的。那我还有两个现实需求，想看看能否被Vibe Coding。第一个是学英语。我目前的工作流是：先和英语私教上课并录音，然后把录音放到Notebook LM (Google推出的AI笔记工具，可以基于你的资料进行问答和总结) 里总结课程要点。接着，我把要点放到ChatGPT里，让它生成例句和联想记忆法。最后，我再手动把这些内容一个一个输入到Anki (一款基于间隔重复记忆法的卡片制作软件) 中制作记忆卡片。 **Tracy:** Anki虽然支持从Excel批量导入，但我的需求比较定制化，有的单词需要做成填空卡，有的需要做成翻转卡，不是一个完全自动化的流程。我想知道这个过程有没有可能变得更自动化？ **Ray:** 很好的问题。首先，你问我之前，有没有问过AI？这就像以前我们常说的“你Google过了吗？”一样重要。你应该先和AI去沟通。你之所以没问，可能是觉得要把这件事描述清楚很麻烦。但关键点在于，不要用手打字，要用语音输入。我推荐一个叫Voice In的工具，比WhisperFlow更好用。你可以把刚才那一大堆复杂的背景和需求，直接用语音告诉AI，和它去头脑风暴。 **Ray:** 其次，你要思考你的根本目的是什么。你是为了制作精美的Anki卡片，还是为了真正提升英语水平？不要把太多时间花在折腾工具上，而忘了你最初的目标。Vibe Coding应该帮助你直击问题的本质，而不是让你在旧有的思维模式里绕圈子。你花在制作卡片上的时间越多，你真正用嘴说、用耳听的时间就越少。这些步骤中，很多可能是不必要的。Vibe Coding的核心是要专注于真正重要的事情（Focus on what really matters），从第一性原理出发，让AI帮你找到最高效的解决方案。 ### Alina的小白经验：与AI对话的艺术 **Alina:** 我完全是小白，之前是做会计和税务的。最开始和AI语音对话时，我也有羞耻感，会躲在角落里小声说。但后来慢慢沉浸进去，就感觉不到别人的存在了，真正把它当成了一个工作伙伴。我和人对话，就不会觉得尴尬了。 **Alina:** 我最近学到一个技巧。有时我不知道某个界面元素的专业术语叫什么，我就会截个图，然后说“把这一块给我改得更好看一点”。这时我会观察AI在思考时（thinking process）的用词，它会说出最准确的词，比如“你希望我把这个flow（流程）relocate（重新定位）到上面去吗？”。通过这种方式，我反过来在学习如何更准确地与它沟通，未来我就可以直接用它的语言来下指令，而不需要截图了。 **Alina:** 关于UI设计，我也很困惑。比如我想做一个简单的经期记录App，我知道我的最终目标是什么效果，但不知道这个效果具体应该长什么样，也就是用户界面（User Interface）该如何设计。我的方法是去看一些我喜欢的真实产品。我推荐一个网站叫**Mobbin**，它上面全是真实上线产品的截图和**用户流程（User Flow）**，而不是学生的概念作品。看这些成功的产品是如何设计的，能给我很多启发。 **Alina:** 在具体实践上，如果做网站UI，我会用**V0**（Vercel推出的一款AI驱动的UI生成工具）来打底；如果做App UI，我觉得**Bolt**（一个专注于移动应用UI/UX设计的工具）不错。当然，我做出来的东西目前还只是“皮”，骨架还是需要Mike来搭，否则一碰就散。所以我也在学习**Git**等基础知识。总的来说，UI设计可能需要多看多学，见多识广，再利用AI工具去做调研和实现。 ## 高级实践与工作流革新 ### Kat的实践：用AI重构复杂项目 **Kat:** 我是一名有三年多经验的后端程序员。我用Vibe Coding最大的动力是解决公司里的问题。我们公司的项目非常复杂，代码陈旧且混乱。我入手了Claude Code Max版后，体验非常好。我给它一些命令，它就能很快分析出那些“屎山代码”是在干什么，并把分析结果存成文档，以便下次参考。经过几轮迭代，它好像已经“吃透”了我们的项目。 **Kat:** 现在，我的一些日常开发任务就直接丢给它了。我的角色变成了一个产品经理，只需把需求想清楚，分点列出来，它就能完成。我发现，它目前是通过文本搜索来理解项目的。而我们程序员通常使用**LSP**（Language Server Protocol，语言服务器协议）来更智能地理解代码。我下一步想尝试把LSP的能力接入进来，看看效果会不会更好。 **Kat:** 我也用它做了个个人项目，一个学英语口语的软件，两个多小时就做出了原型。我现在的感觉是，我跟不上AI的速度了，瓶颈在于我产生想法的速度。我常常想不出足够的项目来让它运行，感觉需要想些更好的办法去“榨干”这个AI。 ### Ray的总结：从软件到指令，从How到Who **Ray:** Kat提到的让AI理解项目，这点非常重要。现在市面上很多复杂的软件流程，对我们来说，其实就是一个`**Claude.md**`或`**Gemini.md**`的文本文件。这个文件里写清楚第一步、第二步、第三步做什么，把它交给一个新机器上的AI，它自己就能去安装依赖、配置环境并执行。我给张敏和Vivi的工作流就是一个包含这种指令文件的文件夹。它比传统的软件更灵活，因为AI有容错能力，你临时想改动，它也能适应。我以前用n8n做的很多复杂工作流，现在都用这种方式替代了。 **Ray:** 我再分享一个特别重要的技巧。大家用命令行工具和AI进行了大量对话后，一定要把聊天记录保存下来。你可以把这个记录文件（比如一个TXT）再扔给一个强大的模型（比如**Gemini 1.5 Pro**），然后问它：“你看，我是个Vibe Coding小白，分析一下我今天的对话，我学到了什么？我的知识盲区在哪？我应该如何改进我的提问方式？”AI会基于你们的对话上下文，给你一份非常深刻的学习报告和成长建议。这能帮你复盘和快速进步。 **Ray:** 最后，我想强调一个理念，来自一本书《Who Not How》。当你遇到一个问题时，不要问“我该如何解决？(How)”，而要问“谁能帮我解决？(Who)”。在AI时代，你的“Who”就是各种AI助手。你要学会把AI当成你的专家团队，学会去张嘴问，去分配任务。他每次让我做什么事，我都会反问：“不，你应该怎么做？”一定要学会当老板，你雇了员工，就别自己干活。这就是“Who Not How”的精髓。 **Zalira:** 是的，就是反向向AI学习。我之前想做记账软件，也是通过问AI，它给了我很多灵感，比如通过抓取微信或支付宝的支付通知来自动记账，这都是我自己没想到的。只要你问，它就是最好的老师。 **Evan:** 我也是，刚开始接触这些工具，最大的感受就是治愈了我不喜欢问问题的“毛病”。以前觉得问简单问题显得自己傻，问难问题又不好意思打扰别人。现在有了AI，我可以问任何问题，它都会一步步教我，这对我这样的新手来说，体验非常好。 **Ray:** 我再举个例子，Vivi（我的助理）第一次用**Gemini CLI**，她直接把一个3G大的视频文件扔给它，说“你给我生成字幕”。这是一个在我们看来非常“非分”的要求，因为我们知道这背后涉及音频提取、文件分块、上传等复杂流程。但结果是，AI真的做到了！它临时下载了**Whisper**模型，处理完之后就删了，最终成功生成了字幕。所以，千万不要让你的现实认知，限制了你对AI能力的想象力。要敢于提出“非分”的要求，去压榨它，看看它到底能为你做什么。 ## 会议总结与后续计划 **Ray:** 今天的分享会非常有价值。我建议我们后续每周可以设立一个固定的主题，比如下周专门讨论命令行工具（Claude Code和Gemini CLI），再下一周可以聚焦UI/UX设计。我们可以在社群里发起主题帖，让大家围绕这个主题进行讨论、分享和提问。这样会更有组织性。对于今天没有尝试过的朋友，本周的目标就是去试一试这些工具，把你想做的任何事情都扔给AI，看看会发生什么。 **张敏:** 好的，我会根据Ray的建议，从下周开始策划每周的主题。今天我们所有的讨论，都可以利用AI工具整理成文字纪要和学习笔记，提取出其中提到的所有工具和关键观点，发布到社群里，这就是集体智慧的体现。谢谢大家的参与，我们下周再见！