title: "11个月用AI开发7个应用，踩过的坑、技术栈对比和最终心得全记录" date: "2025-10-14" excerpt: "这是一篇长文，记录我过去11个月的AI编程之旅，包括所有的失败、工具与框架的使用经验，以及最终的心得体会。" tags: ["AI编程", "Claude Code", "技术栈", "开发经验"] categories: ["教程及案例"]
标题：11个月用AI开发7个应用，踩过的坑、技术栈对比和最终心得全记录
摘要： 这是一篇长文，记录我过去11个月的AI编程之旅，包括所有的失败、工具与框架的使用经验，以及最终的心得体会。在这段时间里，我参与了7个项目，其中大多数使用了Claude Code。
时间：2025-10-14
来源：转载
这是一篇长文，记录我过去11个月的AI编程之旅，包括所有的失败、工具与框架的使用经验，以及最终的心得体会。在这段时间里，我参与了7个项目，其中大多数使用了Claude Code。
简版总结：AI编程并非万能之法，我失败了很多次，但每次失败都让我学到了东西。过去一年积累的知识量惊人。虽然每个工具和技术栈各不相同，但某些组合确实更优秀。最关键的两点是充分的规划和上下文管理——掌握好这两点，你才能真正驾驭AI编程。
关于我：
大学时期我用Java和Eclipse学过编程，后来也跟着教程学过基础网页开发（Orion项目），不过最终发现自己缺乏手工编码所需的耐心。目前我运营着两个小有成就的TikTok和YouTube频道，其中有好几个视频的播放量超过100万。
项目一：AI工作平台（Cline-Svelte/Next.js+Supabase）
项目愿景：现有的求职平台往往提供过于通用的搜索结果，而我认为AI技术（尤其是向量嵌入）能帮助提供更精准的职位匹配。应用应该保持简洁的界面，同时支持移动端和网页端。作为额外的功能，我还计划在社交媒体上分享用户找到工作的故事——这正是我擅长的领域。
这是我第一次尝试真正意义上的项目开发，结果可想而知。项目以相当壮观的方式失败了。那时我使用的是Cline配合Claude Sonnet 3.5，同时也在用claude.ai网页版聊天，主要是因为成本更低。后端选择了Supabase——这个选择至今仍然不错。
第一次迭代：前端优先
这次完全是个灾难。在和claude.ai交流了几天后，我们选定了Svelte作为技术栈的核心，理由是它"显然优于React"。凭着年少无知，我让Cline从前端开始构建，几个提示语之后界面看起来确实很漂亮。太简单了！现在只需要接上后端就万事大吉了，对吧？结果整个项目最后还是成了废品，还白白花掉了大约100美元的API调用费用。
第二次迭代：后端优先，再开发前端
经过第一次失败，我意识到必须改变策略。我学习到了"元框架"的概念，并切换到了Next.js14和React18。这一次，我先在Supabase中搭建后端。所有数据库迁移都是我手工操作的，通过Supabase CLI和从claude.ai复制过来的代码完成——这个过程让我学到了很多。在自以为聪明的情况下，我选择了Redux进行状态管理，却完全不懂该如何编写合理的.clinerules文件来指导AI助手。经过整整6周的开发，应用总算基本可用，而且确实能返回向量嵌入的搜索结果！但问题随之出现：每点击一个按钮都会引发严重的状态管理问题，代码本身也是层层叠叠的补丁。最后又成了垃圾代码。
第三次迭代：App Router+Zustand+React Query
我花了另外6周时间，将残破的Next.js Pages Router实现迁移到了一个全新的技术栈。过程是在claude.ai上规划，然后复制到Cline里再一边祈祷一边执行。正是在这个阶段，我真正体会到了拥有完整文档和合理.clinerules的重要性。但技术债已经太沉重，耗尽了我的精力。另外一个问题是，想要重用现有的代码为React Native构建一个移动应用，难度远比想象的要高...
项目的结果如何呢？我花掉了大约1000美元的API费用——确实是个昂贵的开局。虽然后端已经删除，但你仍然可以在这里看到一些项目的痕迹：https://www.ai-jobboard.fyi/
给你的建议：你的第一个项目几乎必然会很糟糕，接受这个现实吧，因为这个过程中你会学到大量东西。在整个项目中，最重要的部分就是在你敲第一行代码之前完成规划——任何后期的改动都会付出沉重的代价。
项目二：本地体育俱乐部网站（Lovable）
项目愿景：我所在的本地乒乓球俱乐部急需一个现代化的新网站，我自告奋勇用Lovable来开发——因为有一个月的免费试用期。
虽然用几个精心设计的提示语就能生成一个不错的网站，但后续的迭代工作却相当耗时。最初的那个提示语能否表达得清晰准确就显得尤为关键。俱乐部团队需要一个定制的CMS后端，以便他们能够轻松登录并更改比赛时间、队伍名称等信息。虽然Supabase确实提供了集成方案，但任何稍微深入一点的集成工作都会变得异常困难。老实说，Supabase让我没有留下好印象——它宣传得比实际要容易用得多。最终，我用Astro构建了一个简洁的静态页面，把CMS方案彻底放弃了。
项目三：AI语音听写Chrome扩展（Claude Code，Chrome OS）
项目愿景：我的父亲看到我在Mac Book上使用的自定义快捷键进行语音转文字功能（这个功能基于Whisper Larger Turbo 3和Groq上运行的推理模型），他问我能否在他的Chrome Book上也实现同样的功能。
这一次，我采取了更加谨慎的规划方式，在新发布的Claude Code中创建了一份详尽的CLAUDE.md文件。长话短说：原本计划用一天就完成的代码迁移，最终演变成了为期两周的权限和操作系统噩梦。我需要在Mac Book上进行开发，然后在Chrome Book上进行测试。整个过程简直是场折磨。
我得告诉大家一件事：别花39美元每月去订阅某个AI听写工具，你自己几个小时就能搭建一个。如果你对这个Chrome扩展感兴趣，这是链接：https://chromewebstore.google.com/detail/ai-voice-dictation/mjnncebdojjoikdjhommpnngaddlefjk
项目四：VRAI语言学习应用（Claude Code-Python、Svelte Kit、Capacitor、Unity）
项目愿景：我已经掌握了4种语言，目前正在学习日语。但我意识到市面上缺少一款能够帮助使用者真正练习口语的应用。正好我非常喜欢我的Meta Quest 3 VR头显，灵感就此产生——我想为这个平台开发一款AI辅助的口语学习应用。有趣的是，市场上还没有真正的竞争对手，这是一片蓝海。
我将之前所有学到的经验全部应用到了这个项目中，但构建一个包含实时AI模型（使用Gemini 2.5 Flash的原生音频对话功能）的Python后端绝非小事，即使有新版的Claude Opus 4.0也不例外。我的初步策略是用Svelte Kit快速开发一个"临时"前端来验证后端的功能，然后再考虑迁移到Meta Quest。我评估了多个后端托管方案，最终选定了Google Cloud Run，多亏了gcloud命令行工具，设置过程相当顺利。但当开发进行到一半时，我才意识到用目前现有的AI编程工具来构建VR应用完全不可行——Claude Code几乎无法与Unity进行有效交互（虽然理论上存在一个MCP）。那现在该怎么办呢？是直接发布Svelte Kit网页版？还是用Capacitor把它包装成移动应用？我认为后者更合理——因为我自己在笔记本上学语言时的体验并不理想，所以我决定试试Capacitor，这个工具能够把任何网站转换成真正的移动应用。用Capacitor来包装现有的Svelte Kit确实能行得通，但实现方式并不够干净整洁，理想情况下应该完全重构。还有另一个实际问题：相比praktika.ai这类竞争产品，我的独特优势究竟在哪里？
从这个项目的心得：Claude Code是目前最好的工具，毫无疑问。如果你想要构建移动应用并且已经有网页开发基础，Capacitor会给你不少惊喜。规划的重要性再次得到验证。这个项目很有可能在未来继续推进。
项目五：Gemini MCP+Claude Code开发工具包+规范起草工具
项目愿景：我逐渐发现自己的能力存在瓶颈，需要开发出更好的工具来突破限制。正好那个时期市面上还没有我需要的这类工具，所以我决定自己设计。
Gemini MCP：
在尝试Gemini 2.5 Pro后，我立即意识到拥有一个"第二意见"的巨大价值。那时还没有Gemini CLI可用，所以我自己开发了一个MCP，这样Claude就能够求助Gemini。虽然现在仍然有用，但已经有更好的替代方案出现了。https://github.com/peterkrueck/mcp-gemini-assistant
Claude Code开发工具包：
这是一个文档框架系统，主要由自定义提示语组成，采用子任务的方式，通过结构化的方法来加载和维护上下文。这套工具至今仍然很实用，目前在GitHub上获得了1.1k个星标。https://github.com/peterkrueck/Claude-Code-Development-Kit
规范起草工具：
这是一个被严重低估的工具，社区的关注度不高，但在我看来，它是目前为新项目起草规范的最优方案。原理很简单：两个Claude Agent SDK相互协作，共同帮助你得到最佳的规范输出。https://github.com/peterkrueck/SpecDrafter
开发这些框架和工具的过程让我更深刻地理解了AI工具的运作机制——系统提示与用户提示的区别、工具调用的原理、上下文管理的技巧等等。我想再次强调，如果你要启动一个新项目，一定要看看规范起草工具。
项目六：Freigeist-在线编程工具（Claude Code、Astro）
项目愿景：在使用Lovable的过程中，我发现了它的局限性。基于之前积累的经验，我领悟到一个道理：认真起草和充分评估规范要重要得多，同时也必须对上下文进行极其谨慎的管理。我还意识到，用网页开发工具完全可以在浏览器中直接构建移动应用。基于这些认识，我萌生了一个想法：建立一个工具来实现这一切——一个比Lovable更强大的版本。
我创建了一个虚拟网页和一个邮件列表，用来收集感兴趣用户的邮箱地址。结果出人意料，吸引了相当多的人注册，大约每周有2个新用户加入，尽管除了几个几个月前发在Reddit上的帖子外，我几乎没有做过任何宣传。https://www.freigeist.dev/
Astro是构建超快网站的绝妙框架，响应速度和用户体验都优秀得多。我对它的评价很高。但Freigeist本身是一个野心太大的项目，需要真正的风险投资资金才能推进。市场需求明确存在，技术方案也已经成熟，时机也恰到好处。唯一的问题是，你需要身在旧金山、纽约、新加坡或伦敦这样的地方，才能获得那笔珍贵的VC资金，然后组建一支充满能力的团队。
项目七：Pocket Gym（Claude Code、Supabase、Svelte Kit、Expo+React Native）
项目愿景：你是否有过这样的经历：前往一个陌生国家时想去健身房锻炼，却因为日卡购买的不便和复杂的注册流程而感到烦恼？Pocket Gym的目标就是解决这个问题——让用户轻松找到附近的健身房，并用已注册的账户快速完成签到。
这是我真正意义上的第一个移动应用项目，所以我选择了Expo+React Native这套技术栈。很快我就发现，建立一个可工作的开发环境所耗费的时间几乎和实际开发应用一样长。但一旦环境配置完毕，应用的开发进度突飞猛进。当时的Claude Opus 4.1版本也给了我很大帮助，它是一个非常优秀的模型。
这一次发生了对我来说全新的情况：功能蠕变。你是否看过YC的某个视频，其中创始人强调只应该开发用户真正需要的功能？我看过，但真正做起来简直太容易偏离初心了。让我详细讲讲后来发生的事情：Pocket Gym一开始拥有基本的账户设置、健身房搜索、签到和支付流程——功能齐全，运行良好。接下来，加点游戏化元素如何？比如成就系统和经验值？听起来不错。顺便说一下，如果用户忘记带了钥匙或钱包，让他们能给健身房发送消息不是挺有用的吗？所以我又加了实时聊天功能。那再加一个Google Maps风格的评价系统如何？当然可以。既然已经有了成就和经验值系统，为什么不让用户看看自己和其他人相比的排行榜呢？看起来酷极了！你知道什么会更酷吗？让用户在应用上交朋友！有了朋友后，难道不该让他们在Instagram风格的信息流中看到我什么时候在健身房签到吗？肯定应该！还需要说，每个健身房都应该有一个Reddit风格的讨论区域，让用户发布公告和进行讨论吗？
就这样，Pocket Gym变成了一个功能众多、运行流畅、打磨精细的应用，准确的用户数是零...更糟的是，一个充满空荡社交功能的健身房预约应用，使用体验会有多古怪？最后我只能把这个应用归档，放弃了这种双边市场模式。那这段时间我是不是浪费了？完全不是！这四周的集中开发让我彻底掌握了Expo+React Native的各个方面，现在我对用这套技术栈开发真正有市场的产品充满信心。
11个月过去了，我对自己学到的东西数量感到震惊。从那个时候的我——几乎不会用VSCode，不知道怎么初始化git，到现在能够构建功能完整、运行稳定的应用——这段进步相当令人印象深刻。回顾早期那种从claude.ai网页版复制粘贴SQL代码的工作流，对比现在根本不需要打开文件的高效流程，进度堪称飞速。我最大的体会是这样的：虽然AI确实有助于降低代码实现的门槛，但它永远替代不了合理的架构设计能力，也无法处理商业层面的决策。如果你现在才刚刚开始，放心去动手构建吧。接受你的第一个项目不会很出色——这是很正常的。
我目前使用的技术栈：
移动应用：Expo+React Native
网页应用：Svelte Kit+Svelte 5 Runes
数据库与身份认证：Supabase
Python后端：Google Cloud Run
AI工具：Claude Code+Context7+Supabase MCP
最后的建议：给你的AI编程助手准备一份高质量的CLAUDE.md/GEMINI.md/.clinerules文件，这样AI才能真正发挥出应有的作用。同时，再准备一份详尽的project-structure.md文件，完整记录你的技术栈和文件树结构，并为每个部分加上简要说明，这样AI就能清楚了解你项目的整体情况。这两个文件是绝对必需的基础文档。如果你想看我是如何使用它们的，可以在这里找到模板：https://github.com/peterkrueck/Basic-AI-docs