先说一下背景，我相信很多前端可能有这样的情况。来了一个比较大的新的需求，暂时就先说PC web端吧。很多系统的设计都在后台有一个菜单管理，然后大致会讲过下面几个步骤。
- 1、后台配置菜单：在管理后台添加新菜单的基本信息，有时也包括具体操作按钮的配置。
- 2、前端配置路由：在 Vue 或 React 路由配置中，添加对应的页面路由映射信息。
- 3、前端新建视图：在 views或 pages目录下，创建实际的页面文件。
- 4、角色权限绑定：找到当前角色，手动勾选刚才新增的菜单和按钮权限，使功能对当前账号可见。
- 5、增量迭代配置：开发中途若需新增按钮，需再次重复上述"后台配置"与"权限勾选"的动作。
当然各种系统的配置可能不尽相同，有些系统可能更灵活一些，很多东西都考虑到了，都进行了自动化操作。
接下来我们的MCP登场了
通过截图可以看出来，我的MCP服务工具，有查询菜单列表、查询单个菜单、创建菜单、修改菜单、删除菜单、查询角色和为角色添加菜单权限，这里我MCP工具就是调用了后台管理的接口，有些接口不适配我又新增了适配（这个也没关系）。
再来看我在聊天回话框中的内容。
首先我上传了一张截图，里面包含了几个按钮（当然之前页面已经有了三个操作按钮了），截图下我的意思也很明显了，生成按钮代码，根据按钮名称生成了code,然后让他添加菜单（这里它的理解就是调用我的MCP工具生成菜单）。
继续看我下面的截图，很清楚的就展现了先是先是调用search-menu来查找父级菜单的菜单ID，然后再调用create-menu插入菜单的过程。
中间还有截图太长了我就没继续截图了......
这是这个对话最后一部分的截图，可以看到一次性帮我把九个按钮操作全部调用MCP写入到了数据库，真的太棒了。
其实最开始，我的想法就是每次执行一步。查找父级菜单==>写入导入按钮操作==>根据角色名称查找角色Id=>为当前角色写入导入按钮操作，这样一个过程。
这样我不用在PC后台进行操作其实已经很爽了（个人觉得，因为我们的后端系统相对复杂，路径也比较深，数据量也比较大，导致维护菜单非常的浪费时间）。但是没想到这里它可以一次性就写入9个按钮的菜单信息，我当时就惊讶了。下面还有更令我happy的。
继续看上图，就是把上面所有的九个按钮操作权限全部添加到某个角色ID。当然这个角色是我单独查询出来的，然后写在上面的。（里面有一个提示500了，因为我之前已经添加过权限了，可以忽略）。
这就是最终把九个按钮操作权限都添加到该角色上了。
但是我在检查需求的时候发现少了一个按钮。
看我提示词非常简洁的对话。但是他就分析了一下，然后首先在页面上添加按钮生成code,然后生成菜单，并且把权限也添加上了。
真的让我大开眼界。通过截图可以发现后面两个还有多余的处理，就是修改菜单的按钮顺序报错了，其实是我写的接口有问题（后面接口问题我自己修改）了，不是他多余了。
所以MCP在现在AI Agent的强大下，让我大开眼界。好了本文就介绍到这里，好让前端的loster们都来尝试一下吧，，要不然2026年下一个被淘汰的可能就是你了。同时如果你看到了那就大胆的去玩吧。没有什么比实践更重要的了。
最后我现在使用的工具是Google Antigravity。
当然了电脑上也装了Claude code、Codex和OpenCode。
最近vibe coding对部分程序员的冲击非常大。尤其是在Claude Opus4.5的加持下，真的要变天了。