全專案五階段開發流程

從產業想法到可測試外掛、網站前後端、會員權限、金流權益與送審準備

開發助手是給不同產業開發者使用的產品化系統，要站在整個專案規劃設計：免費評估＋五個送審前階段＋選購第六階段；第一階段先完成 ChatGPT App／MCP 外掛、Logo、專案 ZIP、GitHub／Render 交接與測試證據；第二階段接續產生網站前後端、後台、素材與文件；第三階段建立 Google 登入、會員、管理者後台與外掛/MCP 權限；第四階段才建立 PAYUNi、付款、訂閱、額度、權益與對帳；第五階段送審準備；第六階段維運必須驗證後定價。

查看五階段交付 查看測試文件 管理者後台
第一階段外掛交付 第二階段網站接續 第三會員權限／第四金流權益
PlugIn 拼外掛路線／證據

PlugIn 拼外掛

全流程路線圖

  1. 第一階段需求、工具、Logo、ZIP、MCP、部署交接
  2. 第二階段網站、後台、素材、方案、測試文件
  3. 第三階段Google 登入、會員、管理者後台與 MCP 權限
  4. 第四階段PAYUNi、方案、付款、訂閱、額度、權益與對帳
  5. 第五階段ChatGPT 公開送審資料、原生測試與審查準備
  6. 第六階段上架後維運、資料同步、監控與回滾規劃
需求理解　→　MCP 工具　→　網站前後端　→　會員權限　→　金流權益　→　送審準備　→　維運回滾　→　

給不同產業開發者的使用入口

先在 Codex 連接開發助手，再用自然語言建立自己的外掛、網站與素材

1. 在 Codex 串接開發助手 到 Codex 設定 → 外掛程式 → 新增 MCP 伺服器 → 可串流 HTTP，填入開發助手名稱與 MCP 網址並儲存；回到對話按「＋」即可選用。
2. 說出想做什麼 例如餐飲點餐、房地產查詢、課程報名、客服 FAQ、商品搜尋；不用先會寫程式。
3. 依階段取得成果 第一階段先做可測試外掛；第二階段再接網站、後台、教學、素材與 R2 圖片管理。
4. 驗證後再上線 系統會分層檢查本機、網站、MCP、ChatGPT 原生測試、客服知識、使用說明與部署證據。
5. 讓自己的 Codex 接手維護 第一階段就把本機 Codex 維護入口放進你的專案；Codex 開啟自己的 repo 即可找錯、修復與測試。第三階段才增加由你專案自己的 Google OAuth 守門的遠端 MCP 維護。
你可以直接問： 我想做一個寵物美容預約外掛，請先評估能不能做，並告訴我該從哪個階段開始。 我已上傳 Logo，請在第二階段幫我存到我的 R2，並更新我的外掛網站。
查看 Codex 串接步驟 查看完整使用教學 讓 Codex 當 AI 工程師

第二階段介面設計規則

不是放進元件名稱，而是要在頁面上看得出設計與互動層次

這些設計規則會由第二階段工具依產業選用，轉成首頁、方案、文件、後台能被看見的區塊；第三方範例品牌與文案不可進入正式交付。

背景光暈

首頁背景層次

首頁主視覺要有層次，不只是單色區塊。

重點分區

重點分區卡片

把服務、情境、流程與交付重點拆成可掃讀的卡片。

重點聚焦

重點聚焦卡片

讓使用者一眼看到下一步與完成狀態。

動態標題

動態標題效果

用細緻動效承接科技感，但不喧賓奪主。

互動卡片

互動回饋卡片

滑過卡片能看出可點、可比較、可追蹤。

驗證矩陣

驗證分層表

把本機、部署、MCP、原生與送審分層講清楚。

介面再分析強化層

56 個介面候選都要能被第二階段分析、安排與驗證

第二階段不再只說「已整合」。產生網站後會再讀一次頁面目的、行銷目標、使用者引導、色彩對比、動效舒適度與污染清單，然後把介面效果對應到首頁、方案、文件、後台、串接與素材頁。旋轉眩暈類不預設啟用，但仍以安全替代方案納入能力。

首頁

立體深度＋重點總覽＋動態標題

首頁負責讓訪客快速理解整個專案，不只講單一功能；適合重點標記、卡片總覽、立體卡片、打字效果與文字切換。

方案

動態邊框與主要按鈕

方案頁要把價格、階段、權益與不可承諾的邊界放在同一張可比較的視覺裡。

文件

追蹤線與終端面板

測試文件要看得懂驗證路線，適合進度追蹤線、測試面板、鍵盤提示與驗證分層表。

後台

側欄、頁籤、表格與稽核時間線

後台用側邊選單、分頁、狀態卡與管理資料表，讓管理者知道目前狀態與下一步。

素材

3D 圖片牆與上傳狀態

素材頁負責標誌、主視覺、網站壓縮檔、替換槽與公開網址證據，不再只有文字說明。

完整介面對應表

已納入 56 個候選元件，公開首頁只呈現摘要

完整候選、適用頁面、未選用原因與動態舒適度規則會放在素材與後台管理面；公開首頁不應顯示工程清單，也不應讓訪客看到第三方元件名稱造成理解負擔。

查看素材與設計系統 →

免費評估

先學會在哪裡使用，再判斷能不能做

免費階段先教你在 Codex 連接開發助手並用自然語言提出需求，再確認產業需求、資料來源、外掛目標、第三方授權與後續階段。

查看串接方式 →

第一階段

先得到可測試外掛

產出需求摘要、MCP 工具、Skill、Logo、專案 ZIP、GitHub/Render 交接與自然語言測試句。

第二階段

再接成可營運網站

依第一階段產物建立首頁、方案、文件、素材、後台、Next.js/React/Tailwind 來源與網站 ZIP。

後續階段

需要時再接登入、金流與送審

第三階段處理 Google 登入、會員角色、管理者後台與 MCP 權限；第四階段才處理 PAYUNi、方案、付款、訂閱、額度、權益與對帳；第五階段整理原生測試與送審資料。

內容來源守門

網站文字必須來自第一階段產物、五階段 catalog、對話決策 trace 與驗證紀錄

如果第一階段對話紀錄不足，第二階段至少要讀 project.yaml、需求摘要、工具清單、交付包、Logo、MCP 與測試結果，不能拿通用查詢文案或其他產品內容混充。

第一階段外掛、Logo、ZIP、MCP
第二階段網站、後台、素材、文件
第三階段登入、會員、角色與 MCP 權限
第四階段PAYUNi、付款、訂閱與權益
第五階段送審、原生測試與資料包
第六階段維運、同步、監控與回滾
免費評估
第一階段外掛
第二階段網站
第三階段會員權限
第四階段金流權益
第五階段送審
第六階段維運

依需求選出的頁面元件

Plug-in 外掛開發助手 的專屬操作區

產業元件

條件搜尋

依產業欄位篩選資料

產業元件

結果卡片

整理重點、狀態與下一步

產業元件

來源與更新狀態

顯示資料來源與更新時間

產業元件

管理資料表

提供管理者查詢與維護紀錄

免費評估確認能不能做、缺什麼、預估階段
第一階段產出可測試外掛、Logo、ZIP、MCP 連結與交接
第二階段自動銜接建立可營運網站前後端與後台預覽
第三階段依本人授權接 Google 登入、會員、角色、管理者後台與 MCP 權限
第四階段依本人 PAYUNi 授權接付款、訂閱、權益、額度、期限與對帳
第五階段整理 ChatGPT 公開送審資料、原生測試與審查準備
第六階段上架後維運、資料同步、錯誤監控與版本回滾

開發者得到什麼

可修改、可部署、可交付的專案

包含前端頁面、後端 API、資料 schema、圖片素材規格、部署設定、測試紀錄與交接文件。

系統自動做什麼

讀取第一階段，建立正式網站架構

第二階段正式網站前後端以 Next.js、React、TypeScript 與 Tailwind 為基礎；靜態頁只作為預覽與交接 fallback，不能宣稱是最終 SaaS 架構。

不能假裝完成

本機、GitHub、Render、MCP、原生測試要分層

每一層證據都要分開；不能用開發助手本體 MCP URL 混充外部產業專案。

怎麼開始使用

  1. 先提出產業想法、已有資料與希望 ChatGPT 能完成的動作。
  2. 第一階段產生可測試外掛、Logo、專案 ZIP、MCP 與部署交接。
  3. 第二階段訂閱確認後，自動接續第一階段產物建立網站前後端與後台。
  4. 需要 Google、GitHub、Render 或 Cloudflare 時，由目前 Codex/開發者帳號本人授權。

測試問句

手機也要看得懂

第二階段產出的網站要能在手機上閱讀、滑動導覽、點擊行動按鈕、檢查方案與查看測試文件；不能只在桌機版看起來可用。