Vibe Coding学习笔记(第八篇):开发游戏大厅页面

📅 进度: Vibe Coding实战营 - Day 8

🎯 目标: 学会用AI开发页面组件

💡 核心: 把需求说清楚,按步骤验证效果,记录问题并让AI帮忙排查

大家好,欢迎来到 Vibe Coding实战营 Day 8!👋  上一篇我们完成了项目初始化,今天要进入真正的开发环节——游戏大厅页面。

接下来几天是"代码量较多"的阶段,但可以完全依赖AI来生成和改写代码。我们主要负责:①把需求说清楚；②按步骤验证效果；③记录问题并让AI帮忙排查。

为什么让AI开发页面组件?

在传统开发中,开发一个游戏大厅页面可能需要:

• 手动创建数据结构
• 逐个编写组件
• 调试布局和样式
• 处理响应式适配
• 配置路由跳转

但有了AI,你只需要:

• 描述清楚需求和规范
• AI生成组件代码
• 你验证效果并微调

实测下来,整个过程可以在10-20分钟内完成。

实战步骤:开发游戏大厅页面

Step 1:创建故事数据

首先,我们需要创建故事数据。在src目录下创建stories.ts文件。

• 明确数据结构的类型定义
• 每个字段的含义和用途
• 故事的数量和难度分级要求
• 需要包含哪些具体字段

例如,你可以这样描述需求:创建一个包含故事ID、标题、难度、汤面、汤底的数据结构,生成3-5个示例数据。

AI会根据你的描述生成完整的TypeScript类型定义和示例数据。

Step 2:创建GameCard组件

接下来,创建游戏卡片组件。在src/components目录下创建GameCard.tsx。

向AI说明组件需求时,要包含:

• 组件接收的props参数
• 每个元素的显示方式
• 交互效果(hover效果、点击行为)
• 样式风格(颜色、布局、间距)
• 需要集成的功能(路由跳转等)

基于之前PRD和设计文档中的规范,让AI生成符合整体风格的组件代码。

Step 3:创建Home页面

现在创建游戏大厅页面。在src/pages目录下创建Home.tsx。

告诉AI页面需要实现:

• 页面标题和介绍文字
• 使用GameCard组件展示故事列表
• 网格布局和响应式设计
• 整体的视觉风格和调性

参考之前设计文档中关于游戏大厅的布局要求,让AI生成完整的页面代码。

Step 4:配置路由

最后,配置React Router。打开src/App.tsx。

需要明确告诉AI:

• 不同路径对应的页面组件
• 路由参数的使用方式(如:game/:id)
• 路由的整体结构设计

同时创建Game页面作为占位,为后续开发做好准备。

验证与调试

完成开发后,需要验证效果:

1. 启动项目

npm run dev

2. 浏览器打开本地项目

✅ 完成游戏大厅页面

✅ 能正常显示故事列表

✅ 点击卡片能跳转到游戏页面

心得体会

今天完成游戏大厅页面的开发,让我深刻体会到AI辅助开发的核心价值:

不是AI替代你的思考,而是AI加速你的实现过程。

你负责:

• 设计产品功能
• 定义交互体验
• 把需求说清楚

AI负责:

• 编写组件代码
• 实现样式效果
• 处理技术细节

这种协作模式,让开发变得更加高效和专注。

下一步预告

明天我们将进入Day 9:开发游戏页面(上)——界面布局。

我们将学习如何用AI开发聊天界面,包括消息组件、聊天框和整体页面布局。关注我,持续更新AI产品实战营学习笔记,带你一步步用AI开发出完整产品。