摘要

以往用 AI 辅助前端开发，往往只能得到一个“花架子”——界面好看，但数据是假的（Mock）。对接后端时还得重写逻辑。本文记录了一次突破性的实践：通过 Gemini Conductor 的跨项目上下文能力，突破工作区限制，让 AI 直接读取 Spring Boot 后端源码。在没有 UI 设计稿的情况下，AI 反推并生成了包含完整状态管理、路由守卫和真实接口调用的 React 登录模块。从 Mock-First 到 Real-First，AI 正在重塑全栈开发流程。

1. 痛点：为什么我们总是摆脱不了 Mock？

在传统的前后端分离开发中，甚至是早期的 AI 辅助编程中，我们习惯了先用 Mock 数据。但这往往不是因为我们喜欢假数据，而是因为获取“真数据”的成本太高了：

• 场景一：接口还是“薛定谔”的状态 后端还在改，文档还没出。你问后端同事，他可能只给你一个模糊的口头约定。这时候为了不阻塞开发，只能先 Mock。
• 场景二：人工“搬运”上下文太痛苦 即使后端代码已经写好了，要让 AI 理解这些接口也是个体力活。你得一个个打开文件，手动复制粘贴代码或 Swagger 文档。 喂少了，AI 瞎编参数； 喂多了，容易超 Token 上限，或者把 AI 绕晕。

这就导致了一个痛苦的后果：AI 写的代码往往只是“看起来能跑”，实际上线时还得对着后端代码重构一遍。

这次，我决定挑战一下：能不能省去人工整理接口的麻烦，不写一行 Mock，不画一张设计图，直接让 AI 自己去“读”后端源码，产出能连数据库跑的真代码？

2. 破局：发现关键指令 /directory

我的开发环境结构如下：

• 前端项目： xiaoyu-agent (当前工作目录)
• 后端项目： ../xiaoyu (同级目录下的 Spring Boot 项目)

起初，我想当然地以为直接输入 @ 就能像引用组件一样引用隔壁的代码。

但现实打脸很快： 当我敲下 @ 键试图召唤文件列表时，我发现了一个硬伤——列表里只有当前项目 xiaoyu-agent 里的文件。Conductor 的自动补全机制被严格限制在当前工作区（Workspace）内，我根本无法在下拉列表中选中上级目录里的后端代码。

“怎么样才能让 AI 的手伸到项目外面去呢？”

带着这个问题，我开始探索工具的命令边界。这时，我发现了一个关键指令—— **/directory**。这个命令就是专门用来扩展 AI 视野的。

我立刻执行了添加操作：

> /directory add ../xiaoyu

系统提示成功添加。为了确认 AI 真的“看见”了后端，我再次检查了状态：

看到这一幕我明白稳了：AI 的“任督二脉”打通了。现在，它不再局限于前端文件夹，而是成为了一个同时拥有前后端代码权限的“全栈工程师”。

3. 逆向工程：后端代码就是 UI 设计稿

准备工作完成后，我下达了指令。请注意，我没有手动整理任何接口文档，也没有复制粘贴任何后端代码片段给它，只是告诉它“去哪里找”：

/conductor:newTrack 添加一个登录功能，使用 @../xiaoyu 里面已有的登录接口

AI 没有因为缺 UI 稿而卡壳，它通过阅读后端代码，完成了一次完美的逆向推导：

1. 扫描 Controller： 它扫描了后端目录，精准找到了 PublicAuthController.java，确认了真实接口地址是 POST /api/auth/login。
2. 推导 UI 元素： 它分析了后端 DTO ( LoginRequest)，发现需要 username 和 password。于是它自动决定： 既然后端要这两个字段，那界面上我就给你画两个输入框。
3. 推导业务逻辑： 它解析了后端的 Security 配置，发现返回的是 JWT Token。于是它自动在前端规划了 useAuthStore (Zustand) 来存取 Token。

这一步彻底解放了我的双手——我不再充当“代码搬运工”，AI 自己成了“阅读者”。

4. 见证奇迹：一次性跑通

代码生成完毕后，我直接运行了 npm run dev。

1. 界面：AI 凭空设计的 UI

这是 AI 生成的登录页面。虽然我没有给设计稿，但是根据接口信息生成UI需要的元素，并且它生成了一个非常干净、标准的登录卡片，甚至贴心地把“Password”输入框做成了掩码显示，按钮配色也符合现代审美。

2. 交互：真实的 HTTP 请求

最关键的时刻来了。我没有写任何 Mock 数据，直接输入了数据库里真实的账号密码。 点击 "Sign in" 后，控制台捕获到了真实的各种请求头和 Token 交互：

curl 'http://192.168.60.65:5173/api/auth/login' \
  -H 'Content-Type: application/json' \
  -H 'Referer: http://192.168.60.65:5173/login' \
  --data-raw $'{"username":"wsl.net@hotmail.com","password":"12345678!"}'
  
  Response:
{
    "accessToken": "eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDAwMDAwLCJpYXQiOjE3Njc5NjE5NDIsImV4cCI6MTc3MDU1Mzk0Mn0.TgBMDw3dk77XcqYZTHWEJAdZJR1nzeKwj46pJDHRiw8",
    "refreshToken": null,
    "userAbilityRules": [
        {
            "action": "manage",
            "subject": "all"
        }
    ],
    "userData": {
        "id": 100000000,
        "email": "hupeng.net@hotmail.com",
        "username": "wsl",
        "phone": "15800356456",
        "fullName": "wsl",
        "avatar": "/images/avatars/avatar.jpg",
        "role": "[1]",
        "abilityRules": [
            {
                "action": "manage",
                "subject": "all"
            }
        ]
    }
}

请求结果：

• 前端成功将 JSON 发送给后端。
• 后端验证通过，返回 accessToken。
• 前端拿到 Token，存入 Cookie ( JSESSIONID, accessToken) 并完成了页面跳转。

这一刻，前端和后端真正打通了。 没有中间商赚差价，没有 Mock 数据在自欺欺人。

5. 避坑指南：贪吃蛇的教训 (Context Explosion)

当然，过程也不是一帆风顺的。第一次操作时，我因为太贪心，直接引用了整个后端根目录： @../xiaoyu

结果 AI 试图吞下 55,643 个文件！终端里的进度条卡了半天，原来它在拼命读取 .git 历史和 node_modules 里的垃圾文件。

血泪经验：

• 精准投喂： 尽量不要给根目录，只给 @../xiaoyu/src/main/java/.../controller。
• 配置忽略： 确保 CLI 工具能通过 .gitignore 过滤掉非代码文件。
• Context is Money： 精简上下文不仅跑得快，还能省 Token。

6. 结语

这次实践让我看到了 "Real-First Development" 的可能性。

通过 /directory add 打破项目边界后，AI 能够跨越前端与后端的物理隔阂。它不再是一个需要你手动整理文档、手动喂料的代码补全工具，而是一个能理解完整系统架构的协作者。

只要后端业务逻辑（Domain Logic）是清晰的，Gemini Conductor 这样的工具完全可以充当“全栈设计师”，帮我们填补从 API 到 UI 的最后一公里。