因為去年有考到救生員證照，所以今年想要在假日時間去排班就想到了一個解決排班問題的APP，接下來我就想要請AI幫我畫一個頁面原型圖設計，所以首先我請 ChatGpt 幫我規劃規格書，以下是 ChatGPT產生的內容，並且我覺得很不錯就請v0.dev 幫我寫程式並且部屬上去

產品概念與規劃

1 App 目標

本 App 旨在透過 智能媒合機制，幫助 救生站、救生員 及 救生訓練協會 有效管理排班與訓練課程，提升人力運用效率。

  • 救生站：設定排班需求，自動媒合適合的救生員。
  • 救生員：登錄可上班時段，媒合工作並接收排班通知。
  • 訓練協會：管理救生訓練課程，提醒救生員複訓，統計報名數據。

2 主要功能

  1. 救生站管理：

    • 設定排班需求（時段、時薪、人數）
    • 查看缺人時段統計（圖表顯示）
    • 媒合救生員並發送通知

  2. 救生員端：

    • 設定可上班時段，媒合排班
    • 查看地圖模式，尋找附近救生站
    • 請假或代班媒合，支援 Google 日曆同步

  3. 救生訓練協會：

    • 管理救生訓練課程
    • 自動提醒救生證即將到期者
    • 報名與完訓統計分析

請依照以上內容幫我設計app 產品原型圖，我把這部分請v0.dev 幫我往下開發

開發過程：用 AI 生成 UI

在設計 App 介面時，我選擇使用 v0.dev，這是一款 AI 生成 UI / UX 的工具，它能快速產生 Next.js 代碼，並支援 Vercel 部署。

ChatGPT + v0.dev 開發流程

  1. ChatGPT 產生 UI/UX 規格書：先定義好功能與畫面需求。
  2. v0.dev 生成 UI 界面：根據需求快速生成 Next.js 代碼。
  3. Vercel 部署 Demo：直接將代碼部署，快速驗證效果。

這是 v0.dev 生成的初版 UI：
image

Demo 連結：救生員排班 App v0.dev 產生的 UI

整體來說，v0.dev 產生的 UI 結構不錯，讓我能夠迅速進入開發階段。不過還有一些地方需要優化。

結語

整體使用下來我覺得v0.dev 開發的效果是很棒的，而且感覺是對 next.js 很熟悉的AI，部屬起來很順利可以快速地產生一個Demo 頁面。

目前，我還計劃進一步優化 UI 介面、智能媒合機制與通知系統，也許會加入資料庫功能來處理即時數據。

如果你也對 AI 幫助開發有興趣，推薦試試這個流程！ 🚀