简历 →

AI Product Design · Case 01

✦ AI 辅助设计 Vibe Coding 真实上线 ChatGPT · Claude · Cursor · v0

AI 辅助羽毛球
预约系统

Rainbow Town Badminton · Venue Booking

这是一个从 0 开始、全程由 AI 工具驱动完成的真实上线产品。使用 ChatGPT 进行需求拆解与信息架构， Claude 输出交互方案，Cursor + v0 完成 React 组件开发，最终交付可在线预约羽毛球场地的完整 SaaS 预约系统。

项目类型 SaaS 预约系统
技术栈 React · Tailwind · Pisell
状态 ✅ 正式上线
AI 参与度 全链路 AI 辅助
⚠️

正式环境提示 · Live Environment Notice

下方按钮将跳转至真实营业环境，该系统目前正在正式运营中。 请勿下单、请勿支付、请勿预约——如需体验完整交互，请使用下方嵌入的 Demo 版本。

查看正式版 →
6+
场地资源管理（羽毛球 + 匹克球）
100%
AI 工具辅助从需求到交付全链路
Real
真实客户 · 正式上线 · Pisell 平台

AI 工具链 · 全链路参与

🔍
ChatGPT
需求拆解
对话式挖掘业务场景，输出信息架构与用户流程
🎨
Claude
交互方案
生成交互逻辑、状态设计与 UX 文档草稿
⚡
v0.dev
UI 原型
描述 → 生成 React + Tailwind 可交互组件
💻
Cursor
代码精修
AI 辅助调试、逻辑补全与组件优化
🚀
Pisell
正式上线
集成 Pisell SaaS 平台，真实客户正式运营

交互 Demo · 可完整体验

Demo 环境 · 数据仅供展示

以下为完整可交互的 Demo 版本，数据为模拟数据。可自由选择日期、场地、时间段，添加附加项目并查看报价流程。
如需体验真实预约流程，请点击上方橙色按钮跳转至正式环境（⚠️ 正式环境请勿下单）。

📱 Demo 演示版 · 数据模拟

技术实现

AI 工具
ChatGPT — 需求 & 架构
Claude — 交互 & 文档
v0.dev — UI 生成
Cursor — 代码精修
前端技术
React 18
Tailwind CSS
JavaScript (JSX)
响应式布局
核心功能
周历时间轴预约
多场地资源管理
动态定价（峰 / 非峰）
附加项目选购
平台 & 交付
Pisell SaaS 平台
真实客户上线运营
Rainbow Town 场馆
在线支付 & 订单

体验完整正式版

这是一个真实运营的羽毛球场馆预约系统，如需了解完整功能和购买流程，
可访问正式环境（⚠️ 请不要在正式环境下单或支付）

🖥 全屏体验 Demo 查看正式版 →

⚠️ 正式环境为真实营业系统，请仅浏览，请勿下单、请勿支付