藏师傅 AI 编程全流程教学：Trae重磅更新MCP和Agent能力

藏师傅 AI 编程全流程教学：Trae重磅更新MCP和Agent能力 藏师傅 AI 编程全流程教学：Trae重磅更新MCP和Agent能力 Modified April 23, 2025 No access 0bc3fmafiaaavyafgqyhprufak6dkqvqavaa.f10002.mp4 00:00 Code block Plain Text Copy 网页应用测试计划 功能完整性测试 系统性测试所有交互元素（按钮、链接、卡片点击等），确保每个功能正常运行 验证筛选组件中所有选项的响应正确性，不存在失效选项 检查卡片展开/弹窗功能的一致性表现 数据处理与边界测试 测试筛选组件在各种组合条件下的表现 验证极端情况处理能力（大量卡片、超长提示词内容、空结果等） 确认复制功能在不同浏览器环境下的可靠性 响应式设计验证 在多种屏幕尺寸上测试布局适配性（手机、平板、桌面） 检查不同设备上的交互体验（触控 vs 鼠标操作） 验证在不同分辨率下内容可读性和视觉层次 用户体验反馈收集（可选） 邀请3 5位目标用户群体进行实际操作测试 收集关于导航流畅度、信息查找效率的定性反馈 记录用户在实际使用中遇到的困惑点和建议 如果没有问题的话那最好，你就可以直接发布了，如果你发现了问题或者你的朋友给你提了一些改进建议你觉得挺好应该加一些功能。 那你就需要接下来这些 vibe coding 的迭代优化建议了： 1. 1. 每次解决一个问题： 每次对话只修复一个问题或者只增加一个功能，等待 AI 改完之后验证没问题了再继续下一步操作。 2. 2. 发现模型做出错误决定及时撤回： 如果发现 AI 再修改的过程中曲解了你的意思，已经跑偏了，不要等待 AI 修改完成直接点击上次对话气泡旁边的「回到本次对话发起前」按钮重新开始。 1. 3. 精确指明需要修改的内容: ，如果你知道是哪个文件或者代码的问题可以使用 号选择那个代码或者文件，比如修改颜色的的时候最好说“按钮颜色应为 3366FF”而不是说“按钮是红色的”，也可以给模型看截图。 1. 4. 详细描述问题表现: "点击提交按钮时表单没有响应，控制台没有显示错误信息，网络请求面板也没有捕获到API调用" 2. 5. 请求针对性解释: 如果你只是想要对话的话需要明确要求 AI 解释而不是操作，比如"能否解释一下在这个实现中，页面刷新之间的数据持久化机制是如何工作的？" 3. 6. 保持完整的修改背景: "保留现有的配色方案和动画时长，但需要调整布局实现响应式设计，在768px和1024px处设置断点" 4. 7. 给 AI 提供完整的报错信息： 如果你发现终端或者控制台有红色的报错信息的话，复制完整的报错信息和上下文结合你的问题一起提供给 AI，通常会有助于修复。 5. 8. 安全问题： 如果你的项目涉及到了一些需要在网页填写的 API 或者账号密码之类的话，最好不要让 AI 写在代码里面，把它变成一个需要输入的参数，部署之后使用时你再填写就行。 除了上面这些问题之外这个项目上我们还需要处理数据问题，第一次的时候我是没有提供给 AI 我的提示词数据的，它自己虚拟了一些，放在了 Json 文件里面。 这个时候我需要将真实的提示词放进去，我直接下载了我的几篇文章，然后上传到 ChatGPT，让o3 根据 Trae 写的提示词结构整理了一个新的 Json 文件出来，我直接复制之后替换数据就搞定了。 后续更新也只需要让 AI 生成类似的 Json 片段我复制到文件最后就行。 大家如果后续写的项目如果数据不多而且没那么复杂的的话也可以参考我这个方法，方便维护，也不需要后端服务。 如果你按照上面这些方式基本上可以保证你相对高效而且稳定的让 AI 修复问题或者添加功能。 这里还是提一下上一部分结束时的话，如果你发现越改越差，不要考虑沉没成本，重新开始或许是最好的选择。 部署上线 部署这部分大家都很熟悉了，我这里稍微提一下就行如果你不是专业用户就可以使用类似 yourware 这类快速部署的服务，只需要将我们新建项目时候的文件夹拖到输入框上传就可以快速部署了。 如果你需要自定义域名也可以使用 Netlify 这种服务，让 Trae 将项目上传到 Github 之后直接从 Netlify 链接 Github 就能一键部署了。 从我写 Claude 的网页提示词到现在短短一个月时间整个服务 vibe coding 的生态和工具飞速发展，从 IDE 到专门为 AI 编程服务的前后端组件库、数据库，部署服务等等，距离 Trae 国内办法发布没多久，他就加了这么多能力。 Vibe coding 现在只能做小工具小网页，但是它不会一直只能做小工具小网页。 看完这个教程，我强烈建议你动手试试，真的很简单，每一次实践都会加深你对这种新开发方式的理解，也会让你更加了解AI的能力边界和最佳使用方法。 好了教程到这里就结束了，如果你有什么问题也可以再评论区问，最好带上详细信息，我或者其他大神看到应该会给你解答。 为了方便你记笔记我也把文章中提到的关键建议整理成了 15 条 Vibe coding 建议方便参考： 🎁 藏师傅的 Vibe Coding 15 条建议 ——把本文全部经验压缩成一份「拿来就能用」的清单 1. 聚焦单一核心功能： 第一次动手就先做一个功能点，别妄想一口气复刻完整抖音。 2. 写需求＝写产品说明书： 用「我想开发一个…」模板，把目标用户、场景、功能逐条写清楚，越细越好。 3. 珍惜第一次提示词： 首轮提示词决定成败，别用“帮我写个网页”这种含糊表达。 4. IDE 规则先配置： 在 Trae 的 Rule 面板贴上前端最佳实践规则，让 AI 自动遵守编码规范。 5. 选顶级模型再开干： Claude 3.5 、 GPT o4 mini等大模型才压得住复杂项目，别拿小模型硬撑。 6. 全链路测试清单： 功能完整性 → 边界数据 → 响应式 → 用户可用性，按表格逐项勾。 7. 一次只改一个问题： 每轮对话聚焦单 Bug / 单功能，验证通过再进入下一轮。 8. 发现跑偏立即回滚： Trae 里的“回到发起前”就是 Ctrl‑Z，别让错误分支越走越远。 9. 用 文件锚点精准定位： “ src/components/Card.tsx 第 42 行按钮颜色改为 3366FF”——越精确，AI 改得越准。 10. 报错信息完整贴给 AI： 控制台红字别截半张图，一起贴上上下文和操作步骤。 11. 把业务数据抽成 JSON： 内容与代码分离，后期只维护数据文件，无需频繁重编译。 12. 敏感信息留到运行时填： API Key、密码用环境变量或输入框，别硬写进源码。 13. 越改越糟就重开项目： 成本是时间不是面子，早放弃＝少痛苦。 14. 选最省心的部署方式： 文件拖到 yourware → 自动上线；进阶用户 Netlify / Vercel + 自定义域名。 15. 持续收集真实反馈： 找 3‑5 个目标用户试玩，记录每个“卡壳”瞬间再迭代。 期待在评论区看到各位的作品，如果觉得教程你有帮助可以帮我点个赞👍或者喜欢🩷，也可以转发给 你需要的朋友。 No access 0bc3fmafiaaavyafgqyhprufak6dkqvqavaa.f10002.mp4 00:00 No access 0bc3fmafiaaavyafgqyhprufak6dkqvqavaa.f10002.mp4 00:00 如果没有问题的话那最好，你就可以直接发布了，如果你发现了问题或者你的朋友给你提了一些改进建议你觉得挺好应该加一些功能。 那你就需要接下来这些 vibe coding 的迭代优化建议了： 1. 1. 每次解决一个问题： 每次对话只修复一个问题或者只增加一个功能，等待 AI 改完之后验证没问题了再继续下一步操作。 2. 2. 发现模型做出错误决定及时撤回： 如果发现 AI 再修改的过程中曲解了你的意思，已经跑偏了，不要等待 AI 修改完成直接点击上次对话气泡旁边的「回到本次对话发起前」按钮重新开始。 1. 3. 精确指明需要修改的内容: ，如果你知道是哪个文件或者代码的问题可以使用 号选择那个代码或者文件，比如修改颜色的的时候最好说“按钮颜色应为 3366FF”而不是说“按钮是红色的”，也可以给模型看截图。 1. 4. 详细描述问题表现: "点击提交按钮时表单没有响应，控制台没有显示错误信息，网络请求面板也没有捕获到API调用" 2. 5. 请求针对性解释: 如果你只是想要对话的话需要明确要求 AI 解释而不是操作，比如"能否解释一下在这个实现中，页面刷新之间的数据持久化机制是如何工作的？" 3. 6. 保持完整的修改背景: "保留现有的配色方案和动画时长，但需要调整布局实现响应式设计，在768px和1024px处设置断点" 4. 7. 给 AI 提供完整的报错信息： 如果你发现终端或者控制台有红色的报错信息的话，复制完整的报错信息和上下文结合你的问题一起提供给 AI，通常会有助于修复。 5. 8. 安全问题： 如果你的项目涉及到了一些需要在网页填写的 API 或者账号密码之类的话，最好不要让 AI 写在代码里面，把它变成一个需要输入的参数，部署之后使用时你再填写就行。 除了上面这些问题之外这个项目上我们还需要处理数据问题，第一次的时候我是没有提供给 AI 我的提示词数据的，它自己虚拟了一些，放在了 Json 文件里面。 这个时候我需要将真实的提示词放进去，我直接下载了我的几篇文章，然后上传到 ChatGPT，让o3 根据 Trae 写的提示词结构整理了一个新的 Json 文件出来，我直接复制之后替换数据就搞定了。 后续更新也只需要让 AI 生成类似的 Json 片段我复制到文件最后就行。 大家如果后续写的项目如果数据不多而且没那么复杂的的话也可以参考我这个方法，方便维护，也不需要后端服务。 如果你按照上面这些方式基本上可以保证你相对高效而且稳定的让 AI 修复问题或者添加功能。 这里还是提一下上一部分结束时的话，如果你发现越改越差，不要考虑沉没成本，重新开始或许是最好的选择。 部署上线 部署这部分大家都很熟悉了，我这里稍微提一下就行如果你不是专业用户就可以使用类似 yourware 这类快速部署的服务，只需要将我们新建项目时候的文件夹拖到输入框上传就可以快速部署了。 如果你需要自定义域名也可以使用 Netlify 这种服务，让 Trae 将项目上传到 Github 之后直接从 Netlify 链接 Github 就能一键部署了。 从我写 Claude 的网页提示词到现在短短一个月时间整个服务 vibe coding 的生态和工具飞速发展，从 IDE 到专门为 AI 编程服务的前后端组件库、数据库，部署服务等等，距离 Trae 国内办法发布没多久，他就加了这么多能力。 Vibe coding 现在只能做小工具小网页，但是它不会一直只能做小工具小网页。 看完这个教程，我强烈建议你动手试试，真的很简单，每一次实践都会加深你对这种新开发方式的理解，也会让你更加了解AI的能力边界和最佳使用方法。 好了教程到这里就结束了，如果你有什么问题也可以再评论区问，最好带上详细信息，我或者其他大神看到应该会给你解答。 为了方便你记笔记我也把文章中提到的关键建议整理成了 15 条 Vibe coding 建议方便参考： 🎁 藏师傅的 Vibe Coding 15 条建议 ——把本文全部经验压缩成一份「拿来就能用」的清单 1. 聚焦单一核心功能： 第一次动手就先做一个功能点，别妄想一口气复刻完整抖音。 2. 写需求＝写产品说明书： 用「我想开发一个…」模板，把目标用户、场景、功能逐条写清楚，越细越好。 3. 珍惜第一次提示词： 首轮提示词决定成败，别用“帮我写个网页”这种含糊表达。 4. IDE 规则先配置： 在 Trae 的 Rule 面板贴上前端最佳实践规则，让 AI 自动遵守编码规范。 5. 选顶级模型再开干： Claude 3.5 、 GPT o4 mini等大模型才压得住复杂项目，别拿小模型硬撑。 6. 全链路测试清单： 功能完整性 → 边界数据 → 响应式 → 用户可用性，按表格逐项勾。 7. 一次只改一个问题： 每轮对话聚焦单 Bug / 单功能，验证通过再进入下一轮。 8. 发现跑偏立即回滚： Trae 里的“回到发起前”就是 Ctrl‑Z，别让错误分支越走越远。 9. 用 文件锚点精准定位： “ src/components/Card.tsx 第 42 行按钮颜色改为 3366FF”——越精确，AI 改得越准。 10. 报错信息完整贴给 AI： 控制台红字别截半张图，一起贴上上下文和操作步骤。 11. 把业务数据抽成 JSON： 内容与代码分离，后期只维护数据文件，无需频繁重编译。 12. 敏感信息留到运行时填： API Key、密码用环境变量或输入框，别硬写进源码。 13. 越改越糟就重开项目： 成本是时间不是面子，早放弃＝少痛苦。 14. 选最省心的部署方式： 文件拖到 yourware → 自动上线；进阶用户 Netlify / Vercel + 自定义域名。 15. 持续收集真实反馈： 找 3‑5 个目标用户试玩，记录每个“卡壳”瞬间再迭代。 期待在评论区看到各位的作品，如果觉得教程你有帮助可以帮我点个赞👍或者喜欢🩷，也可以转发给 你需要的朋友。 🔗 原文链接： https://mp.weixin.qq.com/s/ADHNyGj1... https://mp.weixin.qq.com/s/ADHNyGj1... 原创 歸藏的 AI 工具箱 歸藏的AI工具箱2025年04月22日 11:08 北京 在 Claude 3.7 和 Deepseek 之前我很少玩 AI 编程。因为自己是非专业开发者，AI 模型能力不够搞的很痛苦。 Claude 3.7 和 Thinking 模型更新后我看到了新希望，也产出了一 系列网页生成提示词 ，让很多人认识到开发尤其是简单的前端开发没那么难。 系列网页生成提示词 我之前的提示词主要还是让大家生成展示的网页的，涉及到复杂功能还是不太好搞。 最近也用 AI 做了很多小的工具网页，迭代了一套自己的 AI 编程（Vibe Coding）方案。 Trae 发布了四大重磅功能（MCP、自定义规则、智能体、上下文理解），其能力已与 Cursor、Windsurf 看齐、甚至体验更胜一筹 。例如可以自定义智能体，配合上MCP和prompt，能一次集结多个专属AI专家，为我所用。 先介绍一下Trae新增的4个功能： • 智能体创建： 支持基于提示词和MCP工具自定义智能体，@即可使用，不需要每次都输入复杂指令 • 智能工具（MCP）： 支持MCP，而且内置了常用的，只需要点击即可使用 • 更多上下文： 新增联网搜索和文档集上下文理解能力，可以让AI搜索不懂的编码框架和文档了 • 个人/项目规则： 支持配置个人规则和项目规则，不需要反复强调基础的编码要求 所以我觉得是时候了， 这个教程将会用 Trae 教你如何写一个有相对复杂功能的网页，藏师傅精心编排下也融入这四个能力顺便教会你怎么用。 🍁 教程内容&AI 编程（Vibe Coding）步骤： 1. 配置 IDE：设置 IDE 需要的规则文档和后续用到的 MCP 服务 2. 梳理需求：通过提示词模板强迫自己的完成完整需求梳理 3. 生成完整PRD 提示词：根据梳理的需求提示词和开发&设计要求整理完整提示词 4. 测试结果：如果测试生成结果 5. 修复问题：小步迭代和精细化修改 6. 部署上线：用现成工具低成本上线网页 先来看结果 最近我发了很多 AI 编程和 4o 的图片生成提示词，很多朋友让我搞个网页整理一下，刚好这次想找个复杂的，我们就整一下。 支持 LLM 和图片生成提示词的筛选、支持模型筛选、支持点击后展示全部内容、支持快速复制提示词。 这里查看： https://y2dyoxh7mq.app.yourware.so/ 视频详情 什么是 Vibe Coding 我前面写 AI 编程的时候写了一个 Vibe Coding，其实Vibe Coding 是 Karpathy 提出的概念，区别于专业程序员的 AI 辅助编程。 它指通过自然语言描述需求，让 AI 完成所有编码工作，问题修复也仅通过提示词完成。我之前分享的网页生成提示词和流程都属于 Vibe Coding 范畴。 尽管不直接编码，我们仍需高效稳定的完成产品，因此教程将重点介绍提高 Vibe Coding 成功率和效率的技巧。 环境配置 首先当然是下载 Trae（ https://sourl.cn/b2YrxR ），如果你用其他 IDE 也可以，然后选择他让你选择文件夹的时候新建一个新项目的文件夹，最好是英文。 之前我们用 Trae 的时候，Trae 还没有更新规则和 MCP 能力，所以也就不太需要配置，先介绍一下 Trae 的这两个更新。 规则设置：规则主要是为了在整个项目或者所有项目中让 AI 按照你要求的代码书写方式去书写代码，这样你就不需要频繁在对话的时候要求了。 MCP 配置：这次 Trae 终于支持了我们老生长谈的 MCP 配置功能，而且还内置了超级多的常用 MCP，基本上可以做到填写 API 一建添加。 Trae 上次更新增加了模型配置的的能力，不用担心自己用国内版本没办法用好模型了，我这里用 Openrouter 的 Claude，只需要在模型选择这里点击添加模型，然后选择服务商填写你的 API 就行。 然后我们先来配置一下规则，只需要点击对话框右上角的设置图标在里面选择规则就可以看到这个界面，这里我设置了一下个人规则，没有设置项目规则。 其实有很多规则的聚合网站，我在里面 找了一个前端的规则，你要实在懒得找也可以用我这个，复制进去之后记得保存。 然后是配置 MCP，注意这一步不是这个项目必须的，没有也行。 这次我们需要让 AI 参考一个卡片的设计稿，所以需要配置一下 Figma MCP。 Trae 的 MCP 配置也很简单，还是刚才的设置图标，我们选择 MCP，然后点击添加按钮。 在列表中找到 Figma AI Bridge，按照这里的教程： https://help.figma.com/hc/en us/articles/8085703771159 Manage personal access tokens 创建一个 API Key 填写之后确定就可以了。 梳理需求并整理提示词 这部分是最重要的，由于模型编程能力和上下文的问题 vibe coding 进行几轮修改之后注定会越改越差，所以我们必须保证第一次生成的时候 AI 就完成我们需要的完整功能，后面的修改次数越少越好。 首先你需要完成的项目最好只有单个功能，我们现在不可能让 AI 帮你生成一个抖音，比如我最近写的一些网页渐变提取、图片分割、图片色彩调整等，这些都只有一个主线功能，单个页面加上不同的状态。 ❗ 注意：首次编码的结果很大程度取决于我们输入的提示词，珍惜的首次提示词，详细描述你的需求、目标用户、设计和开发要求等。 如果你只是跟 AI 说“帮我写一个展示我提示词的网页”这种话的话，那完了，等待你的只有无尽的更改痛苦。 我跟 Cluade 一起想了一个提示词可以让你写清楚自己的需求： 比如我这提示词网站按照这个提示词的模板思考完成之后的填写结果是这样的： 上面这部分是核心需要你费心填写的部分，当然后面还需要的是设计和开发的要求，这里你就可以省些事情了，藏师傅帮你准备好了，当然你要是不喜欢 Linear 的风格也可以让 AI 根据这个部分更改。 然后我们需要的是将功能需求部分和设计&开发要求结合起来发给 AI。 这次 Trae 更新之后将原来的 Chat 模式和 Builder 模式结合在一起了，你要使用 Builder 模式的话只需要在输入框智能体部分选择 Builder 智能体就行。 这里我们因为需要用到 Figma MCP 来参考设计稿，所以选择 Builder With MCP 就可以调用 MCP 了。 当 然你现在也可以根据自己的需求创建自己的智能体了，自定义提示词和启用需要的 MCP 服务就行。 比如可以把我上面的设计和开发部分提示词做成智能体，你就只需要输入需求的部分，非常省事。 然后你需要做的就是将上面的两部分提示词粘贴到一起，选择 Builder 模式之后按下回车等待 Trae 给你的首次生成结果。 如果你用的模型比较好的话，这套提示词和方法基本可以保证直接完成整个项目，可能偶尔只有几个小 bug，我最极限的一次是用 Claude 3.7 一次生成了 4000 行代码的项目，只有一个侧边栏没办法点开的 bug。 ❗ 如果模型写完发现跟你需求的相差甚远，这个时候不要继续修复了，重新梳理你的需求和提示词，新开一个项目重新开始。 测试和优化 这个时候我们需要点击聊天窗口中的「预览」按钮预览我们的项目，你需要非常全面的测试首次生成的结果，我写了一个简单的测试 todo，你可以按这个来：