剑客精翻：Claude Code官方教程(03)-界面功能扩展与MCP工具

剑客精翻：Claude Code官方教程(03) 界面功能扩展与MCP工具 剑客精翻：Claude Code官方教程(03) 界面功能扩展与MCP工具 Modified August 29, 2025 按照之前的开发模式，在构建新功能时同样采用计划模式。针对当前应用程序的具体需求，计划在界面中添加新聊天功能。这个功能的目标是让用户无需手动刷新页面，而是通过点击按钮就能够重置对话历史并开始全新的交互会话。 在开始实际开发时，首先激活计划模式并提供具体的功能需求描述。该需求包括在界面中添加一个新聊天按钮，要求该按钮在被点击时能够执行多个操作：清空当前聊天窗口中的对话历史、初始化新的交互会话，以及处理相关的数据清理工作。 在提供需求说明时，如果需要添加更多的上下文信息，可以使用 \+Enter的组合键 来创建新行。这种方式使得需求描述在格式上更加清晰易读，也使得整体的交互界面更具视觉吸引力。 系统将根据提供的需求进行分析并制定相应的开发计划。按照之前的工作模式，如果需要进行前端更改，系统会自动定位相关的文件和目录结构，同样地，对于后端逻辑的修改也会进行类似的分析和规划，最终形成一个全面的实施计划。 这种在正式执行之前先进行全面计划和分析的方法，对于构建理想的用户界面具有重要价值。通过对计划内容的快速审查，可以了解系统的实施意图和具体步骤。在确认计划内容符合预期后，就可以继续进行实际的开发工作。 在开发过程中，如果对当前的操作方向不满意，可以随时按 ESC键 来中断当前操作，并重新指引Claude Code的工作方向。 MCP服务器集成：自动化测试 在计划获得确认后，系统将展示需要完成的待办事项列表，并开始对相关文件进行更新。由于已经开启了自动接受编辑功能，修改过程将自动进行。随着开发进展，可以观察到系统正在添加JavaScript代码来处理按钮点击事件、初始化新对话、清空输入框并设置焦点，同时构建与现有界面风格一致的样式。 尽管新聊天按钮功能已经可以正常工作，但在视觉表现上可能还不完全符合预期效果。除了传统的截图交流方式外，还可以利用MCP服务器来扩展Claude Code的内置功能，实现更加高效的界面优化流程。 MCP（模型上下文协议）为Claude Code等工具提供了访问外部数据源和系统功能的能力。在这个案例中，将为Playwright配置一个MCP服务器。Playwright是一个功能强大的浏览器自动化工具，具备打开浏览器、截取屏幕截图和分析界面内容的能力。 Playwright MCP地址（源码）： https://github.com/microsoft/playwright mcp smithery.ai（可一键安装）： https://smithery.ai/server/@microsoft/playwright mcp 通过MCP服务器的集成，可以实现完全自动化的界面测试和优化流程，而无需手动进行截图和交互。 在设置过程中，需要先退出Claude Code并添加相应的MCP服务器 。添加操作的基本命令格式为 claude mcp add ，后面跟上服务器名称（如playwright），以及启动该服务器所需的具体命令。 具体的启动命令为npx @playwright/mcp@latest。 对于其他类型的MCP服务器，都可以在各自的文档中找到相应的连接和配置说明，每个MCP服务器都会提供连接所需的具体命令信息（上smithery.ai可以一键安装主流MCP，非常实用方便）。 完成MCP服务器的添加后，重新打开Claude可以查看MCP服务器的集成状态。通过 /mcp 命令可以验证已经成功连接到Playwright MCP服务器，并查看playwright服务器提供的各种可用功能工具。 这些功能包括JavaScript代码执行、文件上传、键盘操作、页面导航、返回操作等多个方面。这意味着原本需要手动进行的各种测试操作，现在都可以通过Playwright以编程方式自动完成。 自动化界面优化 现在可以请求Claude Code使用Playwright MCP服务器来访问当前页面并分析新添加的聊天按钮。针对按钮的视觉表现，需要达到与页面中其他课程链接相一致的效果，具体包括实现左对齐布局并移除不必要的边框效果。 在执行自动化操作之前，系统会要求对这些特定工具的使用进行授权确认。授权后，系统将自动访问目标页面、捕获屏幕截图并执行相应的分析操作。为了提高效率，可以选择不在每次使用这些工具时都要求重复授权。 可以观察到，浏览器已经通过编程控制自动打开了目标页面的新标签页。系统会要求Claude Code对当前页面进行屏幕截图捕获，并对截图内容进行分析和理解。 通过分析，系统能够准确识别界面中存在的具体问题，实现真正的自动化问题识别和修复，无需手动截图和人工分析。在识别出问题后，还可以提供更加具体的优化建议，让Claude Code进行针对性的界面改进。 由于没有开启自动接受模式，可以在VS Code中预览正在进行的代码修改。通过检查可以发现，新的修改已经成功移除了不必要的边框和背景效果，整体视觉效果符合预期。在确认这些修改后，可以继续进行其他方面的界面优化。 在检查布局效果时，可以看到左对齐效果已经得到正确实现，同时其他需要调整的细节也在正常处理范围内。为了验证修改效果，系统会再次截取屏幕截图进行确认，确保按钮具备了与页面其他部分相匹配的正确图标元素。 在完成初步优化后，可以通过刷新页面来查看实际效果。整体来看，按钮的视觉表现已经得到明显改善。然而，在细节检查中发现了一个小问题：出现了重复的加号图标。尽管左对齐效果和图标样式都符合预期，但还需要进一步调整以消除多余的图标元素。 针对发现的重复图标问题，可以提出具体的修正请求，说明当前存在两个加号图标，需要删除靠近“新聊天”文本的那个图标。通过分析HTML结构可以发现，在按钮内容中确实存在一个多余的加号元素，需要对其进行清理。 在这个过程中，可以观察到Claude Code的智能化自我调整能力。当系统发现没有可用的浏览器标签页时，会自动重新打开相关页面并执行必要的截图操作。最终的效果显示，按钮的视觉表现得到了显著改善！ 通过这个案例可以看到，将MCP Playwright等先进工具集成到开发流程中，能够显著简化复杂界面的构建、设计和测试工作，实现真正的高效率开发体验。 后端工具扩展 在完成了前端界面的优化修改后，接下来可以转向后端功能的开发工作。为了保持开发的清晰度并避免上下文混杂，在开始新的后端开发任务之前，同样需要清除对话历史并开始全新的交互会话。 在后端功能开发方面，计划增加一个新的工具功能。这个新工具的主要目标是实现对特定课程信息的精确访问，包括获取每个课程的编号、标题和详细描述信息。这将使得用户能够获得更加具体和精确的课程内容。 目前在查看课程信息时，系统返回的数据相对比较简略和概括。为了实现更加详细的课程信息查询，需要对系统的SearchTools.py文件进行相应的修改和扩展。通过检查这个核心文件，可以了解当前的功能实现状态。 通过分析现有文件结构可以发现，目前系统仅配置了一个基础的搜索工具，主要用于内容搜索和获取特定课程的基本信息。而即将添加的第二个工具将显著扩展这一功能，使得系统能够为每个课程提供更加详尽和具体的描述性信息。 接下来需要评估Claude在这个任务上的实现能力。按照之前已经验证有效的开发模式，首先会制定一个详细的实施计划，在确保计划的可行性和完整性后，才会进入具体文件的修改阶段。 Claude Code能够全面分析当前系统的技术架构，包括了解现有大纲工具的实现机制。由于之前在Claude.md文件中已经记录了相关的上下文信息，系统能够更加高效地理解当前的开发需求。这使得计划制定过程更加精准，同时能够确保在正确的文件中实施合适的修改。 在计划实施过程中，可以观察到整个流程包含多个关键步骤：创建新的搜索工具、更新系统提示以确保能够获取更丰富的数据，以及在RAG系统中注册这个新工具。在计划审查阶段，如果发现任何需要调整或改进的地方，可以及时提出建议。但在当前情况下，可以直接评估Claude Code的实际执行能力。 如果新功能能够按计划正常实现，用户就能够在查询课程相关问题时获得更加详尽和具体的信息反馈。在开发过程中，可以观察到系统正在同时进行多层面的修改：不仅包括Python后端代码的核心逻辑实现，还包括系统提示的更新和新工具在RAG系统中的注册配置。 在完成整个开发任务列表后，就可以返回浏览器界面来检验实际效果。如果后端新功能已经正确实现，用户将能够看到系统对所查询内容提供的高质量摘要和详细信息。当然，在功能使用过程中发现任何需要改进的地方，都可以随时进行调整和优化。 返回浏览器界面后，可以通过询问课程相关信息来测试新功能的实际效果。如果后端新工具能够按计划正常运行，用户将能够获得较之前更加丰富和详细的课程信息，包括相关课程的直接访问链接。 在测试结果中可以看到系统现在能够提供清晰的课程名称和相关信息。在未来的开发中，还可以进一步扩展功能，为每个课程添加更加丰富的信息源和参考资料。在下一课的学习中，将深入探讨当开发过程中遇到问题时的处理方法，以及如何使用Claude Code进行系统调试、编写测试用例，并建立对与Claude Code协作开发的软件产品的充分信心。 课代表学习笔记 📖 本节课核心内容 本节课深入讲解了Claude Code的实战开发技巧，重点介绍了两大核心策略：精确的文件引用和计划模式的应用。通过实际案例演示了如何为聊天机器人应用添加源链接功能和新聊天按钮，展示了从需求分析到功能实现的完整开发流程。课程还深入探讨了视觉化迭代优化方法，包括截图分析和MCP服务器的集成应用，最终实现了前后端功能的全面扩展，为AI辅助开发提供了完整的实践指南。 🎯 重点掌握 精确文件引用策略 ：使用@符号精确引用需要修改的文件或文件夹，通过Tab键自动完成文件名，确保Claude Code获得正确的上下文信息，这是提升开发效率的关键技巧。 计划模式的应用 ：通过连续按两次Shift+Tab激活计划模式，让Claude在编码前制定详细的开发计划，避免直接分析需求就编写代码，确保复杂功能开发的系统性和完整性。 MCP服务器集成 ：掌握如何配置和使用MCP服务器（如Playwright）来扩展Claude Code的功能，实现自动化的界面测试、截图分析和视觉优化，显著提升开发效率。 ⚠️ 难点解析 计划模式与自动执行的平衡 ：在使用计划模式时容易混淆何时需要手动确认，何时可以开启自动接受编辑模式。 解决思路 ：初期建议对每次修改都进行确认，随着对Claude Code信任度的提升，可以逐步启用自动接受功能。对于复杂功能开发，始终先用计划模式制定方案，确认无误后再执行。 💡 实践要点 • 使用 @符号 引用文件时，善用Tab键自动完成确保引用准确性 • 连续按两次 Shift+Tab 激活计划模式，一次 Shift+Tab 激活自动接受编辑模式 • 利用 反斜杠加回车 创建多行需求描述，提高交互界面的可读性 • 通过 claude mcp add 命令集成外部工具服务器，扩展开发能力 • 使用 截图分析 功能进行视觉优化时，提供具体的问题描述和优化方向 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 按照之前的开发模式，在构建新功能时同样采用计划模式。针对当前应用程序的具体需求，计划在界面中添加新聊天功能。这个功能的目标是让用户无需手动刷新页面，而是通过点击按钮就能够重置对话历史并开始全新的交互会话。 在开始实际开发时，首先激活计划模式并提供具体的功能需求描述。该需求包括在界面中添加一个新聊天按钮，要求该按钮在被点击时能够执行多个操作：清空当前聊天窗口中的对话历史、初始化新的交互会话，以及处理相关的数据清理工作。 在提供需求说明时，如果需要添加更多的上下文信息，可以使用 \+Enter的组合键 来创建新行。这种方式使得需求描述在格式上更加清晰易读，也使得整体的交互界面更具视觉吸引力。 系统将根据提供的需求进行分析并制定相应的开发计划。按照之前的工作模式，如果需要进行前端更改，系统会自动定位相关的文件和目录结构，同样地，对于后端逻辑的修改也会进行类似的分析和规划，最终形成一个全面的实施计划。 这种在正式执行之前先进行全面计划和分析的方法，对于构建理想的用户界面具有重要价值。通过对计划内容的快速审查，可以了解系统的实施意图和具体步骤。在确认计划内容符合预期后，就可以继续进行实际的开发工作。 在开发过程中，如果对当前的操作方向不满意，可以随时按 ESC键 来中断当前操作，并重新指引Claude Code的工作方向。 MCP服务器集成：自动化测试 在计划获得确认后，系统将展示需要完成的待办事项列表，并开始对相关文件进行更新。由于已经开启了自动接受编辑功能，修改过程将自动进行。随着开发进展，可以观察到系统正在添加JavaScript代码来处理按钮点击事件、初始化新对话、清空输入框并设置焦点，同时构建与现有界面风格一致的样式。 尽管新聊天按钮功能已经可以正常工作，但在视觉表现上可能还不完全符合预期效果。除了传统的截图交流方式外，还可以利用MCP服务器来扩展Claude Code的内置功能，实现更加高效的界面优化流程。 MCP（模型上下文协议）为Claude Code等工具提供了访问外部数据源和系统功能的能力。在这个案例中，将为Playwright配置一个MCP服务器。Playwright是一个功能强大的浏览器自动化工具，具备打开浏览器、截取屏幕截图和分析界面内容的能力。 Playwright MCP地址（源码）： https://github.com/microsoft/playwright mcp smithery.ai（可一键安装）： https://smithery.ai/server/@microsoft/playwright mcp 通过MCP服务器的集成，可以实现完全自动化的界面测试和优化流程，而无需手动进行截图和交互。 在设置过程中，需要先退出Claude Code并添加相应的MCP服务器 。添加操作的基本命令格式为 claude mcp add ，后面跟上服务器名称（如playwright），以及启动该服务器所需的具体命令。 具体的启动命令为npx @playwright/mcp@latest。 对于其他类型的MCP服务器，都可以在各自的文档中找到相应的连接和配置说明，每个MCP服务器都会提供连接所需的具体命令信息（上smithery.ai可以一键安装主流MCP，非常实用方便）。 完成MCP服务器的添加后，重新打开Claude可以查看MCP服务器的集成状态。通过 /mcp 命令可以验证已经成功连接到Playwright MCP服务器，并查看playwright服务器提供的各种可用功能工具。 这些功能包括JavaScript代码执行、文件上传、键盘操作、页面导航、返回操作等多个方面。这意味着原本需要手动进行的各种测试操作，现在都可以通过Playwright以编程方式自动完成。 自动化界面优化 现在可以请求Claude Code使用Playwright MCP服务器来访问当前页面并分析新添加的聊天按钮。针对按钮的视觉表现，需要达到与页面中其他课程链接相一致的效果，具体包括实现左对齐布局并移除不必要的边框效果。 在执行自动化操作之前，系统会要求对这些特定工具的使用进行授权确认。授权后，系统将自动访问目标页面、捕获屏幕截图并执行相应的分析操作。为了提高效率，可以选择不在每次使用这些工具时都要求重复授权。 可以观察到，浏览器已经通过编程控制自动打开了目标页面的新标签页。系统会要求Claude Code对当前页面进行屏幕截图捕获，并对截图内容进行分析和理解。 通过分析，系统能够准确识别界面中存在的具体问题，实现真正的自动化问题识别和修复，无需手动截图和人工分析。在识别出问题后，还可以提供更加具体的优化建议，让Claude Code进行针对性的界面改进。 由于没有开启自动接受模式，可以在VS Code中预览正在进行的代码修改。通过检查可以发现，新的修改已经成功移除了不必要的边框和背景效果，整体视觉效果符合预期。在确认这些修改后，可以继续进行其他方面的界面优化。 在检查布局效果时，可以看到左对齐效果已经得到正确实现，同时其他需要调整的细节也在正常处理范围内。为了验证修改效果，系统会再次截取屏幕截图进行确认，确保按钮具备了与页面其他部分相匹配的正确图标元素。 在完成初步优化后，可以通过刷新页面来查看实际效果。整体来看，按钮的视觉表现已经得到明显改善。然而，在细节检查中发现了一个小问题：出现了重复的加号图标。尽管左对齐效果和图标样式都符合预期，但还需要进一步调整以消除多余的图标元素。 针对发现的重复图标问题，可以提出具体的修正请求，说明当前存在两个加号图标，需要删除靠近“新聊天”文本的那个图标。通过分析HTML结构可以发现，在按钮内容中确实存在一个多余的加号元素，需要对其进行清理。 在这个过程中，可以观察到Claude Code的智能化自我调整能力。当系统发现没有可用的浏览器标签页时，会自动重新打开相关页面并执行必要的截图操作。最终的效果显示，按钮的视觉表现得到了显著改善！ 通过这个案例可以看到，将MCP Playwright等先进工具集成到开发流程中，能够显著简化复杂界面的构建、设计和测试工作，实现真正的高效率开发体验。 后端工具扩展 在完成了前端界面的优化修改后，接下来可以转向后端功能的开发工作。为了保持开发的清晰度并避免上下文混杂，在开始新的后端开发任务之前，同样需要清除对话历史并开始全新的交互会话。 在后端功能开发方面，计划增加一个新的工具功能。这个新工具的主要目标是实现对特定课程信息的精确访问，包括获取每个课程的编号、标题和详细描述信息。这将使得用户能够获得更加具体和精确的课程内容。 目前在查看课程信息时，系统返回的数据相对比较简略和概括。为了实现更加详细的课程信息查询，需要对系统的SearchTools.py文件进行相应的修改和扩展。通过检查这个核心文件，可以了解当前的功能实现状态。 通过分析现有文件结构可以发现，目前系统仅配置了一个基础的搜索工具，主要用于内容搜索和获取特定课程的基本信息。而即将添加的第二个工具将显著扩展这一功能，使得系统能够为每个课程提供更加详尽和具体的描述性信息。 接下来需要评估Claude在这个任务上的实现能力。按照之前已经验证有效的开发模式，首先会制定一个详细的实施计划，在确保计划的可行性和完整性后，才会进入具体文件的修改阶段。 Claude Code能够全面分析当前系统的技术架构，包括了解现有大纲工具的实现机制。由于之前在Claude.md文件中已经记录了相关的上下文信息，系统能够更加高效地理解当前的开发需求。这使得计划制定过程更加精准，同时能够确保在正确的文件中实施合适的修改。 在计划实施过程中，可以观察到整个流程包含多个关键步骤：创建新的搜索工具、更新系统提示以确保能够获取更丰富的数据，以及在RAG系统中注册这个新工具。在计划审查阶段，如果发现任何需要调整或改进的地方，可以及时提出建议。但在当前情况下，可以直接评估Claude Code的实际执行能力。 如果新功能能够按计划正常实现，用户就能够在查询课程相关问题时获得更加详尽和具体的信息反馈。在开发过程中，可以观察到系统正在同时进行多层面的修改：不仅包括Python后端代码的核心逻辑实现，还包括系统提示的更新和新工具在RAG系统中的注册配置。 在完成整个开发任务列表后，就可以返回浏览器界面来检验实际效果。如果后端新功能已经正确实现，用户将能够看到系统对所查询内容提供的高质量摘要和详细信息。当然，在功能使用过程中发现任何需要改进的地方，都可以随时进行调整和优化。 返回浏览器界面后，可以通过询问课程相关信息来测试新功能的实际效果。如果后端新工具能够按计划正常运行，用户将能够获得较之前更加丰富和详细的课程信息，包括相关课程的直接访问链接。 在测试结果中可以看到系统现在能够提供清晰的课程名称和相关信息。在未来的开发中，还可以进一步扩展功能，为每个课程添加更加丰富的信息源和参考资料。在下一课的学习中，将深入探讨当开发过程中遇到问题时的处理方法，以及如何使用Claude Code进行系统调试、编写测试用例，并建立对与Claude Code协作开发的软件产品的充分信心。 课代表学习笔记 📖 本节课核心内容 本节课深入讲解了Claude Code的实战开发技巧，重点介绍了两大核心策略：精确的文件引用和计划模式的应用。通过实际案例演示了如何为聊天机器人应用添加源链接功能和新聊天按钮，展示了从需求分析到功能实现的完整开发流程。课程还深入探讨了视觉化迭代优化方法，包括截图分析和MCP服务器的集成应用，最终实现了前后端功能的全面扩展，为AI辅助开发提供了完整的实践指南。 🎯 重点掌握 精确文件引用策略 ：使用@符号精确引用需要修改的文件或文件夹，通过Tab键自动完成文件名，确保Claude Code获得正确的上下文信息，这是提升开发效率的关键技巧。 计划模式的应用 ：通过连续按两次Shift+Tab激活计划模式，让Claude在编码前制定详细的开发计划，避免直接分析需求就编写代码，确保复杂功能开发的系统性和完整性。 MCP服务器集成 ：掌握如何配置和使用MCP服务器（如Playwright）来扩展Claude Code的功能，实现自动化的界面测试、截图分析和视觉优化，显著提升开发效率。 ⚠️ 难点解析 计划模式与自动执行的平衡 ：在使用计划模式时容易混淆何时需要手动确认，何时可以开启自动接受编辑模式。 解决思路 ：初期建议对每次修改都进行确认，随着对Claude Code信任度的提升，可以逐步启用自动接受功能。对于复杂功能开发，始终先用计划模式制定方案，确认无误后再执行。 💡 实践要点 • 使用 @符号 引用文件时，善用Tab键自动完成确保引用准确性 • 连续按两次 Shift+Tab 激活计划模式，一次 Shift+Tab 激活自动接受编辑模式 • 利用 反斜杠加回车 创建多行需求描述，提高交互界面的可读性 • 通过 claude mcp add 命令集成外部工具服务器，扩展开发能力 • 使用 截图分析 功能进行视觉优化时，提供具体的问题描述和优化方向 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 我是蓝衣剑客，谢谢你看我的文章。 🔗 原文链接： https://mp.weixin.qq.com/s/EPmfOZWT... https://mp.weixin.qq.com/s/EPmfOZWT... 原创 蓝衣剑客 蓝衣剑客AI2025年08月29日 08:05 河北 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 微信 微信 公众号 公众号 本课概览 在前两课的基础上，这节课将带你进入实战开发阶段，学习如何为聊天机器人应用添加实用的界面功能和后端工具。你将掌握两个核心开发技巧：精确的文件引用策略和计划模式的应用，这些技巧能够显著提升Claude Code的工作效率。课程通过实际案例演示如何实现源链接功能、新聊天按钮，以及如何集成MCP服务器实现自动化测试。学完这节课后，你将具备独立开发界面功能、进行视觉优化迭代、以及扩展后端工具的能力，真正体验到AI辅助开发的强大威力。这节课是从理论学习向实践应用转变的关键一课，为后续的高级功能开发奠定了坚实基础。 在前两课的基础上，这节课将带你进入实战开发阶段，学习如何为聊天机器人应用添加实用的界面功能和后端工具。你将掌握两个核心开发技巧：精确的文件引用策略和计划模式的应用，这些技巧能够显著提升Claude Code的工作效率。课程通过实际案例演示如何实现源链接功能、新聊天按钮，以及如何集成MCP服务器实现自动化测试。学完这节课后，你将具备独立开发界面功能、进行视觉优化迭代、以及扩展后端工具的能力，真正体验到AI辅助开发的强大威力。这节课是从理论学习向实践应用转变的关键一课，为后续的高级功能开发奠定了坚实基础。 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 核心需求分析：源链接功能 在前面的课程中，这个RAG机器人程序已经能够为课程大纲提供详细的信息，甚至还会显示所引用的信息源。然而，当用户看到这些被引用的信息源时，如果能够直接点击这些链接并跳转到真实的数据来源，用户体验将得到显著提升。 因此，当前的开发目标是构建一个完整的界面系统，使前端和后端能够正确地渲染链接，清晰地展示数据的来源，从根本上改变仅显示纯文本信息的现状。 开发策略：文件引用与计划模式 在实际开发过程中，使用Claude Code来实现这些功能时，不会直接要求Claude实现具体功能，而是采用两个关键技巧：精确的文件引用和计划模式的应用。 文件引用的精确性直接决定Claude Code的工作效果，因为工具的性能完全依赖于提供的上下文质量。在要求Claude Code进行修改时，确保找到需要修改的正确文件是成功的关键。尽管Claude Code可以尝试自主寻找相关文件，但如果能够事先明确需要修改的文件并立即提供相关上下文，将显著提升工具的工作效率。 具体的操作方法是在Claude Code中使用@符号来引用文件或文件夹。对于文件夹，可以引用其中的具体文件；对于直接的文件，还可以使用Tab键来自动完成完整的文件名，这样可以确保引用的准确性。 在文件引用的基础上，第二个关键技巧是计划模式的应用。在构建复杂功能或进行大范围修改时，与其让Claude直接分析需求并立即编写代码，更优的做法是采用分阶段的开发模式。 这种模式的核心是首先制定详细的开发计划，让Claude在正式编码前分析需要进行的更改和所涉及的文件。在获得计划确认后，再让Claude Code对多个文件进行系统性的修改。对于需要进行较大范围更改的开发任务，计划模式可以确保在实际修改之前对整个开发流程有清晰的认知。 计划模式的激活方法是 连续按两次Shift+Tab组合键 ，激活后可以看到系统已经进入计划模式。 实践演示：源引用界面实现 在实际操作中，需要向系统提供源引用界面构建的具体需求。在提交需求时，必须引用相关的目标文件和需要修改的其他相关文件。这样Claude就能够针对这个特定问题制定相应的解决方案。 系统会逐一阅读认为最必要的文件，从前端组件追溯到后端逻辑，并全面理解需要实现的功能内容。在完成计划制定后，开发者可以对计划进行批准，或者针对可能需要调整的内容给出Claude相应的反馈意见。 在计划阶段，Claude并不会直接编写任何代码。系统提供了多种操作选项：可以接受计划并继续自动接受后续编辑（这样就不必重复请求许可），也可以手动逐步批准编辑内容，或者要求Claude对计划进行调整修改。 经过对计划内容的快速审查，确认计划方案符合预期目标后，可以采用自动接受编辑模式来执行计划。需要注意的是，如果希望单独启用这个功能，只需按一次Shift+Tab即可。系统将展示需要构建的任务列表和具体的修改计划，然后让Claude Code按照计划对相关文件进行修改。 完成修改后就可以测试实际功能是否正常工作。在这个过程中，可以观察到系统正在对相关文件进行修改，由于开启了自动接受功能，无需一次又一次地手动授权。在实际使用中，常见的工作流程是用户最初会对每次修改都要求授权确认，随着对Claude Code信任度的提升，自动接受编辑功能会被更频繁地使用。 在代码修改完成后，系统可能会提示启动应用程序来测试实现效果。但如果开发服务器已经在运行，就可以直接告知Claude服务器已经在运行，无需重复启动。 如果希望Claude Code总是采用这种处理方式，可以在Claude.md文件中添加相关配置说明。在明确告知Claude Code这一需求后，系统会相应地报告已经完成的修改内容。 功能测试与界面优化 接下来需要对新实现的功能进行测试验证。可以尝试提问与之前相同的问题，比如请求一个课程的大纲。如果源引用功能实现正确，应该能够在每个特定功能说明下方看到可点击的链接。 在测试结果中可以发现，链接功能确实能够正确地引导到相应的数据源，但界面显示效果不够理想，主要是蓝色链接颜色的可读性问题。如果需要改善这个问题，可以继续请求Claude Code进行界面优化。 在这个过程中有两种方法可以选择：一种是直接向Claude说明具体的优化需求，另一种是利用Claude的视觉分析能力，通过屏幕截图的方式让它自主识别需要改进的内容。 视觉化迭代：截图分析功能 采用视觉分析的方法时，需要对当前界面进行截图，然后将截图上传到Claude Code中。在提供截图的同时，可以给出具体的问题描述，比如“这些链接在视觉上难以辨识，请优化界面的视觉吸引力”。 系统将调用Claude的图像分析能力，对提供的截图进行分析并识别前端需要调整的具体位置。在分析过程中，Claude能够准确识别问题所在，比如发现链接使用的是默认蓝色样式，然后自动进行相应的代码修改。 在需要进行视觉相关的界面优化时，通过截图分享的方式让Claude Code分析当前状态并进行改进，这是一种高效的迭代优化方法。 完成界面优化后，可以返回浏览器查看实际效果。再次请求课程大纲信息，如果优化改进按预期完成，应该能够看到链接的视觉效果得到明显改善。 在查看信息源的显示效果时，可以明显感受到界面的改善效果非常显著。Claude Code的视觉分析和自动优化能力是其最常用的应用功能之一，对于快速迭代和构建高质量产品具有重要价值。 如果需要查看具体的文件修改内容，可以在VS Code中打开相关文件。Claude Code能够感知当前的工作环境和文件上下文，因此可以在此基础上提出相关问题并获取这些文件的详细信息。 新功能开发：新聊天按钮 在源引用功能得到优化后，可以继续开发其他新功能。为了避免上下文的干扰并获得更充裕的工作空间， 建议清除对话历史并重新开始 。这样做的目的是确保有更充裕的上下文窗口来处理新任务，同时避免Claude受到之前无关信息的干扰。