使用AI IDE从0到1开发五子棋对战项目(vibe coding)

前言

本项目用的AI用的是IDEA的Qoder插件(极致模型), 总共消耗积分5000+(30美元左右), 制作不易, 点个赞+收藏, 感谢个位

一.背景

在人工智能技术快速渗透软件开发领域的当下，Cursor 、Codex、 Claude Code 等 AI 辅助工具正在重塑开发流程。

五子棋作为一款历史悠久的策略游戏，规则看似简单，实则蕴含复杂的博弈逻辑。在传统开发中，开发者往往需投入大量精力在底层算法设计与代码调试上。本项目旨在利用 AI 能力，打破这一局限，让开发者从繁琐的编码中解放，聚焦于系统架构设计 与用户体验优化。

2. AI 驱动的开发模式

本项目采用 "自然语言提示词（Prompt）驱动开发" 的创新模式：

自然语言交互 ：开发者只需描述需求（例如*"实现五⼦棋胜负判定算法"或"设计基于 WebSocket 的双人对战通信模块"*），AI 即可快速生成高质量的基础代码框架。
人机协作优化：在 AI 生成代码的基础上，通过人工进行细节调整与逻辑校验，完成核心功能的落地。
降低技术门槛 ：借助 AI 的辅助，显著降低了网络通信 、多线程同步 、图形界面（GUI）设计等高难度技术模块的实现成本。

3. 技术架构与功能实现

本项目采用 Java 语言开发，构建了稳健的客户端-服务器（Client-Server）系统。

核心功能模块

用户管理：支持用户注册、登录及个人信息管理。
在线匹配：基于算法的实时对手匹配系统。
实时对战：低延迟的在线落子与棋局同步

为了更好的使⽤AI帮助我们完成整个项⽬的落地，设计出了：

• 设计部分：模板+提示词

• 开发部分：rules+提示词

AI + 好的提示词可以有1 + 1 > 2 的效果本质上也就是提示词工程

传统的开发自下而上

AI辅助开发自上而下

二.AI IDE的选择

可以根据自己的喜好和经济实力选择, 我选择的是Qoder的Idea插件市面上也有更好的比如cursor，codex， claude code，antigravity，trae等...

三.项目需求文档(PRD)

1.项目功能点

包含用户登录注册功能，仅支持账号密码登录。
仅支持在线双人对战功能，不支持人机对战
用户登录成功，进入游戏大厅页面。游戏大厅中，显示用户的名字，比赛场数，获胜场数与分数流水详情
用户登录成功，进入游戏大厅页面。还需同时显示 "在线匹配" 按钮。点击匹配按钮则用户进入匹配队列，且支持取消匹配。如果匹配成功，则跳转进入到游戏房间页面。
用户每获胜一场加5分，输了减3分。对应用户需要显示 "你赢了" 或 "你输了" 了的提示，并支持返回大厅
匹配算法基于用户积分进行就近匹配，尽量保证对局公平性

由于产品的需求文档是产品经理等职位的任务, 我们在此根据产品的需求文档的模板用AI生成PRD

由于不能上传文件以及图片太大模板及以后的文档可看链接↓

PRD模板链接

2.接下来生成PRD 提示词如下

由于每个人的IDE不同 AI模型不同就算相同每次生成的PRD也可能不同所以生成的PRD可以看我的也可以用你自己的但还是要审查逻辑以免出错

PRD文档链接

四.UI界面的设计

模板链接↓

UI界面模板链接

生成UI设计文档的提示词↓

可以新开对话以免干扰 但是一定要添加好相关的上下文很重要

文档生成好之后要检查可以人工检查也可以用AI检查这里我用AI检查

审查提示词(切记要添加好上下文)

看一下发现的差异

让AI改进

最终的UI设计文档链接↓

UI设计文档链接

然后根据异同选择接受

接下来可以根据UI设计方案试着生成一个纯前端的界面

一共有注册登录大厅游戏界面

我这生成的UI（部分）

如果有出入还可以再提出修改

我生成的UI代码链接

https://gitee.com/lywynl/gomoku-battle-project/tree/master/gomoku/UI

五.项目技术方案的设计

1.项目业务模块的划分

依旧根据模板+提示词的方式生成业务模块划分文档

模板链接

业务模块划分模板链接

提示词

对生成的文档检查(AI检查)

最后人工审查(必要)

后端代码的生成很大一部分都是基于此

最终一共分为如图的六大模块

大体的架构图（手画简略版）

生成的模块划分文档链接

模块划分文档链接

2.环境说明

前端：使用 JavaScript 管理各界面的动态性，使用 AJAX 技术从后端API获取数据。
后端：采用 Spring Boot3 构建后端应用，实现业务逻辑。JDK 版本使用 JDK 17。
通信协议：使用 WebSocket、HTTP RESTful API，进行项目通信部分。
数据库：使用 MySQL 作为主数据库。
缓存：使用 Redis 作为缓存层，减少数据库访问次数。
消息队列：使用 RabbitMQ 处理异步任务。
日志与安全：使用 JWT 进行用户认证，使用SLF4J+logback完成日志。

接下来生成环境说明文档(后续用AI开的的环境都基于此文档)

环境说明文档模板链接

环境说明模板链接

提示词

最后建议根据自己的实际环境情况进行人工修改

环境文档链接

环境说明文档链接

3.系统架构

系统架构图模板链接

提示词

可以使用AI进行检查

最后人工检查一下

系统架构文档链接

4.数据库设计

数据库设计模板链接

提示词

先用AI进行初步检查

提示词

结果

提示词

结果

接下来进行人工审核(尤其必要)

在我这我发现AI只生成了用户表和积分流水表但是我觉得还得加上一个游戏房间表让AI继续改进也可以手动修改

企业设计中数据库表的字段也要考虑到未来的业务需求(避免改字段)

最后再检查一下

数据库设计文档链接

5.模块技术实现与数据库对应关系分析

我们已经自上而下把整个项目大体规范定下来了接下来实现每个业务模块(用户模块, 游戏模块等等...)

实现每个模块也要加入精准的约束 AI才能生成的更符合我们的预期

模块技术实现与数据库对应关系分析模板链接

模块技术实现与数据库对应关系模板链接

生成文档提示词

先用AI审查是否都符合需求

人工检查

大体上看一下哪里有不合理哪里的功能还能拓展一下用更好的技术选情

模块技术实现与数据库对应关系分析文档链接

在此项目设计就全部完成了接下来开始项目搭建

六.项目搭建

开发部分采用的是**：rules+提示词**的方式

1.什么是Rules?

刚开始使用 AI IDE 时，感觉这工具很厉害的，很快就可以做出一个小东西出来，比如做个简单小游戏，做一个简单网页之类的。

但是随着使用深入，虽然在一定程度上能做出复杂点的项目，但是经常会遇到这样的情况：Cursor 刚开始输出的代码还挺正常，但随着交互越来越深入，突然开始"乱飞"了，生成的内容让人抓狂！

如果想让 AI 帮你完成工作，又不希望它随意发挥，就需要使用Rules功能！！！

Rules ：充当我们与大模型交互的提示词（prompt），是用户和底层沟通的桥梁。你不必每次都要告诉 AI 怎么做，它会自动按照这些规则执行。

相当于你既想 AI 发挥它的创造力，又想要求它在你需要的约束范围内。

2.添加Rules

我使用的是qoder(IDEA的插件前面有提到过)

点击个人设置

有个添加规则然后可以选择触发时机这里我选的的always 也就是始终生效

添加好后会自动生成一个markdown文档此时就可以在里面添加规则建议英文

这里我添加的规则是cursor官方对JAVA开发的规则毕竟cursor还是很强大(贵)

开发规则链接文档

开发规则链接

3.搭建并启动项目

提示词

生成的最后经过人工检查修改一下就完成了也可以用IDEA的spring插件来创建项目可跳过这一步

添加相关依赖和yml文件配置

提示词

注意这添加好后项目才能启动成功因为yml文件配置了相关组件但是还没用到

项目初步搭建完成

启动测试项目

提示词

前后端联调测试通过

3.搭建项目基础框架

为什么要有这一步呢？

我们在vibe coding的时候应该也会有发现AI生成的文件不会放到我们想放的目录下面然我们不得不调整或者必须要在提示词中加以说明一次两次还行但是每次提问都要加确实让人很恼火因此我们要初步规划好项目的基础框架

大体的目录架构

先简单搭建一下目录可以手动也可以AI 但是建议手动我体验下来AI对建目录不是好经常建错还要修改浪费token

代码的初步结构后面肯定是要改的

提示可以复制图片交给AI来创建目录效果不错

以后AI生成代码就会参考此目录

4.通用代码设计

提示词

目录结果生成了状态码异常处理以及分页查询的配置和mybatis的配置

修改(调整文件所在的位置以及删除不必要的文件夹)

跟我的不一样没事这只是前期大体生成的后期少的则添加多的则删减类里面的各种方法变量也是如此这里还是建议看一看生成的代码的逻辑有很多值得学习的地方也有很多不可取的地方

5.日志框架的搭建

用xml的文件配置日志(扩展性更高)

提示词

可以看到修改了yml文件

生成了XML文件

以及也成了测试代码

最低级别是debug 所以没有打印trace级别的日志

具体我生成的可以看我的原码仓库

原码仓库

6.中间件环境的搭建

这里我用的是远程服务器的docker搭建的中间件

你也可以在本地安装中间件也可以本地docker搭建也可以服务器安装也可服务器docker搭建

以下所有的搭建都要注意宿主机的端口以及镜像的版本还有你要设置的密码

要提前拉好镜像这里我直接使用我已有的镜像启动容器

搭建mysql

复制代码

docker run -d --name mysql-g -p 3406:3306 -e MYSQL_ROOT_PASSWORD=你的密码 mysql:8.0.40

这里我为了防止与我宿主机的端口冲突我改了端口也注意不要与已经有的容器名字冲突在我我统一把名字加了后缀-g

搭建redis

复制代码

docker run -d --name redis-g -p 6479:6379 redis:7.0.15 redis-server --appendonly yes --requirepass "你的密码"

搭建rabbitmq

复制代码

docker run -d --name rabbitmq-g -p 6672:5672 -p 16672:15672 -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=密码 rabbitmq:3.8.30-management

用docker ps命令看一下是否都启动成功

最后测试以下链接是否都能正常连上 一定要提前开放防火墙的端口

我使用的是navicat 和 Another Redis Desktop Manager

rabbitmq可视化界面直接访问远程主机的端口就行

环境搭建初步完成就可以在代码中配置连接了

生成代码配置

提示词

**请根据提供给你的MYSQL、Redis、RabbitMQ基本配置信息，在项目代码中接入它们，接入后能够确保我正确的启动项目(不需要你来运行，我自己会运行)。以下是配置信息与对应说明：

MySQL:
主机: 你的ip(本地或远程服务器)
端口: 你的端口
用户名: root
密码: 你的密码
说明: 参考数据库设计中的MySQL表，创建所有表实体，并生成所有Mapper。**

2. Redis:
主机: 你的ip(本地或远程服务器)
端口: 你的端口
密码: 你的密码
说明: 参考数据库设计中的Redis表，创建所有键值对，并生成Redis基本操作方法，使用 StringRedisTemplate，设计成通用工具类。

3. RabbitMQ:
主机: 你的ip(本地或远程服务器)
端口: 你的端口
用户名: admin
密码: 你的密码
说明: 创建一个测试队列即可。

给我生成相关的类(里面的各种操作方法肯定不全后期还是要添加的)

生成测试连接提示词

接下来测试接口看是否能连上中间件就行了

可以看到数据库连接失败了看后端日志就可以看出相关的库表还没建立所以我们就可以让AI生成建表建库的sql脚本也可以手动将数据库设计文档里面的sql复制粘贴执行

提示词

生成之后就可执行建库建表了

重启服务重新测试

可以看到都连接成功测试通过了

7.约定开发规范

可以直接把项目根目录给到AI 但是前提项目足够小, 涉及到大一点的项目还是生成一些开发规范的文档来充当AI的上下文

生成规范文档的提示词

让AI检查以下有没有遗漏的

后端开发规范文档连接（仅供参考以你的为准）

后端开发规范文档链接

七.后端开发

1.模块优先级的划分

依旧用模板+提示词的方式来生成文档

模块优先级的划分模板链接

模块优先级划分模板链接

模块划分优先级的提示词

注意好上下文

AI检查

修改

多余设计检查

这些可以全部保留

优先级图

模块开发优先级规划文档链接

2.生成全量的接口文档

提示词+模板的方式

后端接口文档模板链接

提示词

AI检查

上述是检查需求文档的时候未检查出来的东西现在可以加上

检查以下有没有多余的设计

采纳建议

人工检查(尤其必要)

a) 检查能否符合页面(UI)功能需求 b) 出入参是否符合要求

以下是我检查出来的遗漏

后端全量接口文档链接

上述准备准备工作已经完成接下来根据模块的优先级逐个完成

3.用户管理模块开发

开发之前还是要进行方案设计依旧是模板+提示词

模块开发技术方案设计模板链接(每个模块通用)

模块技术开发方案设计模板链接

提示词每个模块通用(改一下模块名字注意上下文)

生成文档

请仔细阅读需求文档，完全根据：

1.开发规范文档

2.业务模块划分设计文档

3.模块技术实现与数据库对应关系文档

4.系统架构图

5.后端接口文档

6.已经实现的前置模块开发技术方案，在模块方案目录下。

7.完全依据已经实现的代码

根据以上内容，设计 用户管理模块 的详细开发技术方案，内容参考模块开发技术方案模板，最终生成的文档保存在模块方案目录下。

这些前期生成的文档就可以很少的充当上下文约定开发（让大模型直到该干嘛具体细节是什么）

AI校验(每个模块的提示词也大致通用的如下只改下加粗的地方就够)

校验是否满足能力

请校验生成的用户管理模块开发技术方案 ，是否可以满足以下文档中用户管理模块的部分内容：

1.需求文档

2.业务模块划分设计文档

3.模块技术实现与数据库对应关系文档

4.后端接口文档

5.开发规范

若不满足，请进行说明。

采取方案B

检查模块设计超出范围的内容

提示词每个模块也是通用的

继续校验 用户管理模块 设计超出其职责范围的内容

人工审核（上下过一遍）

是否有不合理的地方以及合理的地方有哪些值得我们学习的

我检查发现了生成给我的文档根本没用到缓存

检查一下缓存逻辑设计

再检查是否冗余

用户模块管理技术方案文档链接(仅供参考)

用户模块管理技术方案设计文档链接

可以学习一下涉及到的缓存的延迟双删以及BCrypt加密算法

代码生成

提示词

依据模块优先级开发计划，当前需要实现用户管理模块的开发，请严格根据用户管理模块开发技术方案，生成该模块的项目代码。代码生成要注意：

1.遵守开发规范

2.必须注意模块边界

最后生成文档可以参考一下

最后将生成的代码人工上下审核一遍

我这边发现的问题注册时缓存穿透防护导致的数据不一致,等问题

最后测试一下接口

postman aipfox

这里用户管理模块就已经开发完成

4.认证授权模块开发

开发之前还是要进行方案设计依旧是模板+提示词

提示词（参考用户开发方案设计文档提示词）添加了第六点

模块技术开发方案模板通用

提示词

AI检查

主要还是错误码的定义错误前面没有发现的接口文档跟生成代码的错误码冲突

让AI修改选取B

让AI继续校验

人工审核

发现没什么问题

代码生成

人工审核

发现设计文档有个不合理的地方 websocket鉴权认证放到了实时通信模块改正并且同时修改代码

接口测试

再测试一下获取用户信息接口(要鉴权的)

5.积分管理模块开发

生成方案文档

AI检查

发现问题修改

再次校验

人工审查

没什么大问题

代码生成

人工检查代码

我这里发现更新积分的接口为内部接口不应该再controller层暴露接口

接下来让AI修改

测试接口

测试查询积分流水列表接口更新积分是内部接口由后面开发的模块一并测试

6.实时通信模块

方案生成

AI检查

全部解决

二次检查

全部采纳

人工检查

无误

生成代码

把代码过一遍

我觉得有一些扩展的地方比如服务端向客户端发送心跳的机制以及定时任务清理超时连接

测试接口

由于使用的websocket的通信的stomp通信协议, 而apifox仅支持原生协议, 也因有很多TODO代码未完成, 所以可以用AI写一个前端页面测试接口测试部分功能, 也可以等其他模块开发完成再一起联调

7.匹配系统模块

生成模块方案

AI校验

全部采纳

采纳

生成代码

人工检查

测试接口

先生成建立websocket连接的前端页面因为apifox仅支持原生的websocket连接协议

用户匹配先准备两个用户分别登录获取token 再建立socket连接最后都加入匹配队列

第一个用户

第二个用户

匹配成功

取消匹配的接口可以自测

8.游戏核心模块

生成技术开发方案

校验

二次检查

修正

人工检查

没什么问题

生成代码

接口测试等前端写完再联调

八.前端开发

提示词

前后端联调

我测试的匹配成功后没有跳转游戏页面

AI修正

九.项目部署

由于redis rabbitmq 以及mysql已经是线上环境了不需要部署了只需要部署jar包

还是用docker部署先将jar包构建成镜像再启动容器

Dockerfile文件

复制代码

FROM openjdk:17.0.2

ADD ./gomoku.jar ./gomoku.jar

CMD ["java", "-jar", "gomoku.jar"]

将打包的jar包改名为gomoku

docker-compose.yml文件

复制代码

version: '3.8'

services:
  gomoku:
    image: lyw/gomoku:0.0.1-SNAPSHOT
    build:
      context: ./
    container_name: gomoku
    environment:
      TZ: Asia/Shanghai
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/gomoku?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
      SPRING_DATA_REDIS_HOST: redis
      SPRING_DATA_REDIS_PORT: 6379
      SPRING_RABBITMQ_HOST: rabbitmq
      SPRING_RABBITMQ_PORT: 5672
    ports:
      - "8080:8080"
    networks:
      - gomoku-net
    privileged: true

networks:
  gomoku-net:
    external: true

将jar包和这两个文件上传至服务器(在一个目录下面)

创建docker内网(加快访问速度)

复制代码

# 1. 创建网络
docker network create gomoku-net

# 2. 将已运行的容器加入网络
docker network connect --alias mysql gomoku-net mysql-g
docker network connect --alias redis gomoku-net redis-g
docker network connect --alias rabbitmq gomoku-net rabbitmq-g

# 3. 验证容器已加入网络
docker network inspect gomoku-net

运行docker compose up -d命令开始编排构建

docker ps看一下是否启动成功

最后通过ip访问页面

使用AI IDE从0到1开发五子棋对战项目(vibe coding)

前言

一.背景

2. AI 驱动的开发模式

3. 技术架构与功能实现

二.AI IDE的选择

三.项目需求文档(PRD)

1.项目功能点

2.接下来生成PRD 提示词如下

四.UI界面的设计

生成UI设计文档的提示词↓

审查提示词(切记要添加好上下文)

看一下发现的差异

让AI改进

接下来可以根据UI设计方案试着生成一个纯前端的界面

我生成的UI代码链接

五.项目技术方案的设计

1.项目业务模块的划分

模板链接

提示词

最后人工审查(必要)

大体的架构图（手画简略版）

生成的模块划分文档链接

2.环境说明

环境说明文档模板链接

提示词

环境文档链接

3.系统架构

系统架构图模板链接

提示词

系统架构文档链接

4.数据库设计

数据库设计模板链接

提示词

先用AI进行初步检查

接下来进行人工审核(尤其必要)

数据库设计文档链接

5.模块技术实现与数据库对应关系分析

模块技术实现与数据库对应关系分析模板链接

生成文档提示词

先用AI审查是否都符合需求

人工检查

模块技术实现与数据库对应关系分析文档链接

六.项目搭建

1.什么是Rules?

2.添加Rules

开发规则链接文档

3.搭建并启动项目

提示词

添加相关依赖和yml文件配置

启动测试项目

3.搭建项目基础框架

为什么要有这一步呢？

4.通用代码设计

提示词

5.日志框架的搭建

提示词

6.中间件环境的搭建

搭建mysql

搭建redis

搭建rabbitmq

生成代码配置

生成测试连接提示词

提示词

7.约定开发规范

生成规范文档的提示词

后端开发规范文档连接（仅供参考 以你的为准）

七.后端开发

1.模块优先级的划分

模块优先级的划分模板链接

模块划分优先级的提示词

AI检查

模块开发优先级规划文档链接

2.生成全量的接口文档

后端接口文档模板链接

提示词

AI检查

检查以下有没有多余的设计

人工检查(尤其必要)

后端全量接口文档链接

后端开发规范文档连接（仅供参考以你的为准）

提示词每个模块通用(改一下模块名字注意上下文)

AI校验(每个模块的提示词也大致通用的如下只改下加粗的地方就够)

我检查发现了生成给我的文档根本没用到缓存

代码生成

代码生成