使用教學

如何使用本網站

跟隨以下步驟,快速掌握 Vibe Coding Wizard 的所有功能。

網站功能概覽

六步驟引導精靈

核心功能

從專案概述到進階設定,六個步驟幫你整理所有開發需求,每步都有清晰的表單和範例。

AI 智慧推薦

需要登入

登入後可使用 AI 自動推薦技術棧、UI/UX 設計方案和進階設定,根據你的專案需求量身定制。

自動生成文檔

一鍵生成

完成填寫後自動生成 PRD 文檔、AI Coding Prompt、Mermaid 開發流程圖和系統架構圖。

雲端同步

需要登入

登入後專案資料自動同步到雲端,跨裝置存取,不怕資料遺失。未登入則存在本地瀏覽器。

步驟教學

1

建立新專案並填寫專案概述

在首頁點擊「開始打造我的產品」或「新增專案」,進入六步驟引導精靈。第一步填寫專案基本資訊。

  • 填寫項目名(簡稱)、項目名(詳細)和口號
  • 選擇專案類型(如全端 Web 應用、行動應用等),系統會自動勾選對應平台
  • 描述專案目標——你希望這個產品解決什麼問題
  • 可選填背景動機和目標使用者
2

選擇平台與語言

第二步選擇你的產品要支援哪些平台和語言。

  • 勾選目標平台:Web、iOS、Android、桌面等
  • 勾選支援語言:繁體中文、簡體中文、English 等
  • 可填寫自訂平台或語言
3

定義功能需求

第三步列出你的產品需要哪些核心功能和使用者故事。

  • 新增核心功能:每個功能有名稱、描述和優先級
  • 新增使用者故事:以「作為...我想要...以便...」的格式描述
  • 每個功能和故事都有具體範例可參考
  • 可隨時新增或刪除功能項目
4

技術選型(AI 智慧推薦)

第四步選擇技術棧。登入後可使用 AI 根據你的需求自動推薦最佳方案。

  • 前端框架、後端框架、資料庫、部署方案
  • 點擊「AI 根據專案需求推薦技術方案」一鍵填充
  • 未登入也可手動填寫
  • AI 會根據專案類型、功能需求和規模綜合推薦
5

UI/UX 設計(AI 智慧推薦)

第五步定義設計風格。AI 可根據你的產品類型推薦適合的設計方案。

  • 設計風格、色彩方案、字體方案、佈局方案
  • 點擊「AI 根據專案需求推薦設計方案」一鍵填充
  • AI 會參考專案目標和目標用戶群體來推薦
6

進階設定(AI 智慧推薦)

最後一步設定效能、安全、測試等進階需求。完成後即可生成文檔。

  • 效能需求、安全需求、測試策略、CI/CD、監控與日誌
  • 點擊「AI 根據專案需求推薦進階設定」一鍵填充
  • 完成後點擊「生成文檔」進入文檔輸出頁面
  • 可下載 ZIP 壓縮包,包含所有開發文檔

常見問題

Q:我完全不懂程式碼,可以使用嗎?

A: 當然可以!本工具專為非技術人員設計。你只需要用自然語言描述你的想法,AI 會幫你處理技術細節。生成的文檔可以直接交給 AI 代理(如 Cursor、Windsurf、Manus)開始開發。

Q:AI 推薦功能需要付費嗎?

A: AI 推薦功能完全免費,但需要登入才能使用。登入後,步驟 4(技術選型)、步驟 5(UI/UX 設計)和步驟 6(進階設定)都可以使用 AI 一鍵推薦。

Q:生成的文檔可以直接給 AI 使用嗎?

A: 是的!生成的 AI Prompt 文檔專門為 AI Coding Agent 設計,可以直接複製到 Cursor、Windsurf 或 Manus 中使用。PRD 文檔則提供更詳細的需求規格供參考。

Q:我的專案資料會保存在哪裡?

A: 未登入時,資料保存在瀏覽器的 localStorage 中(僅限當前裝置)。登入後,資料會自動同步到雲端數據庫,可跨裝置存取。

Q:可以同時管理多個專案嗎?

A: 可以!你可以建立多個專案,每個專案獨立管理。在首頁可以看到所有專案的進度,也可以複製或刪除專案。

開始使用

立即建立你的專案藍圖

關於網站

了解 Vibe Coding 理念

關於作者

認識 Ivan Wong