周末朋友聚会想玩“额头扑克”，结果没人带牌？视频喝酒玩不了？

其实我以前喝酒时经常会玩一些线下小游戏，一直想把它们做成 App 记录下来。但每次一想到要写后端服务、设计 UI、梳理产品逻辑，作为一个前端开发工程师，我的“懒癌”就犯了 —— 总是有各种理由不去做。

但现在，AI 的进化速度让我震惊。有什么想法，真的可以快速实现并落地。
这次，我决定不再拖延，拉来了 Trae (搭载 Gemini-3-Pro) 做我的编程搭子。

结果？真香。 复杂的“全栈开发”，现在触手可及。

一、 “一人成团”：我如何用 SOLO 模式解决产品和设计

我是一个纯前端，对于产品规划和 UI 设计其实是“门外汉”。如果按传统流程，我可能得先画原型、找素材，还没开始写代码热情就耗尽了。

但在 Trae 里，我玩了一把**“智能体工作流”**，强行把单人开发玩成了团队作战。

1. 自定义智能体：我的虚拟团队

我利用 SOLO 模式 自定义了两个智能体角色：

• 角色 A：资深产品经理。指令：“你是一个逻辑严密的产品经理，帮我拆解‘额头扑克’的核心玩法，输出一份极简的 PRD。”
• 角色 B：赛博朋克 UI 设计师。指令：“你是一个前卫的 UI 设计师，擅长霓虹风格，请根据 PRD 设计一套高对比度、适合昏暗环境（酒吧/KTV）的界面方案。”

2. 工作流闭环

我的操作流程非常丝滑：

1. 产品梳理：先调用“产品经理”智能体，把我想象中模糊的玩法变成了清晰的功能列表（创建房间、发牌逻辑、惩罚机制）。
2. 视觉设计：拿着需求去找“UI 设计师”智能体，它直接给了我配色方案（#00f0ff 搭配 #7df9ff）和关键元素的布局建议。
3. 老板验收：我作为“Boss”确认方案无误后，才正式进入开发阶段。

通过这种方式，我避开了自己不擅长的领域，只做决策，不扣细节。

二、 后端开发：前端也能轻松 hold 住 NestJS

需求和设计有了，剩下的就是落地。
对于我这个前端来说，NestJS 的 WebSocket 服务端虽然会，但是写起来没有那么得心应手。

这次我直接对 AI 说：

“基于刚才确定的产品逻辑，给我写一个 NestJS 的 Gateway，支持创建房间、加入房间、自动发牌，要有心跳检测和断线重连机制。”

它不是给我一段代码，而是给了我一套完整的房间管理逻辑。

核心逻辑：软离线保护（Soft Disconnect）

最让我惊喜的是，当我提到“用户切后台”的问题时，AI 建议我实现一个“软离线”机制。

代码逻辑大致如下（核心思路）：

// GameGateway.ts
@WebSocketGateway({ cors: { origin: '*' } })
export class GameGateway {
  
  handleDisconnect(client: Socket) {
     // AI 的建议：不要立刻删除玩家，而是标记为离线，保留 60 秒现场
     // 如果 60 秒内重连，直接恢复数据
     this.gameService.markOffline(client.id, 60 * 1000); 
  }

  handleConnection(client: Socket) {
      // 检查是否携带了旧的 token，如果有，尝试恢复房间状态
      const userId = client.handshake.query.userId;
      this.gameService.tryReconnect(userId, client);
  }
}

这种策略直接解决了我最担心的用户体验问题。以前我写这种逻辑要掉几根头发，调试半天，这次 AI 一次性给出的方案就非常成熟。

三、 前端落地：从设计稿到代码，甚至不需要 Ctrl+V

有了“UI 设计师”智能体定下的基调，样式开发就轻松多了。
我给 AI 的指令是：

“根据刚才的设计方案，实现一个五彩斑斓的黑，赛博朋克风格，按钮要会呼吸，文字要有故障风（Glitch Effect）。”

30秒后，它直接在编辑器里生成并修改了代码。

霓虹呼吸灯效

// AI 生成的呼吸动画
@keyframes neon-breath {
  0% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }
  50% { box-shadow: 0 0 20px #0ff, 0 0 30px #0ff; }
  100% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }
}

.cyber-button {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #0ff;
    animation: neon-breath 2s infinite ease-in-out;
}

我连 Ctrl+C Ctrl+V 都不用，只负责点击 “Accept”（接受变更），代码就自动写入了文件，效果出奇的好。

最终落地效果

这是最终实现的三大核心页面，从首页的视觉冲击，到大厅的备战氛围，再到房间内的沉浸式对局，AI 完美还原了我对这个游戏的想法：

结语

这款小程序已经上线了。回头看这次开发，与其说是在“写代码”，不如说是在“指挥”。

以前我们总说“全栈工程师”很难，难在人的精力有限，没办法同时精通产品、设计、前端和后端。但 AI 的出现，实际上是给了每个人一个外挂级的补全能力。对于我这个前端来说，AI 补齐了我对后端架构的不足，也弥补了我相对于设计师审美的短板。

技术栈的边界正在消失，取而代之的是“想法”的价值回归。

未来的开发者，可能不再单纯比拼谁背得住 API，而是比拼谁能更好地定义问题、拆解需求，并指挥 AI 去落地。

有一种感觉，年初还像是在骑自行车，年底就坐在了高铁上。

---

🍻 项目演示入口

本文开发的小程序已上线，可微信搜索“酒别相逢喝酒游戏大全”进行体验