Miraclex練習室 — 使用說明

兩種接法 · 挑你在用的

你平常用哪一種 Claude?

✓網頁版 Claude(claude.ai / 桌面 App) ── 不用裝任何東西,貼一個網址就接上。看下面「用網頁版接上」。
✓終端機 Claude(Claude Code) ── 貼一行指令安裝。看下面「用終端機安裝」。

用網頁版接上(Connector)

網

貼一個網址,就接上了免安裝

打開 claude.ai 網頁版,或 Claude 桌面 App。
進到 「Customize」→「Connector(連接器)」。
點 「新增自訂連接器」,把下面這個網址貼進去。
按新增 → 用你的公司 Google 帳號登入並按「允許」。看到 「Miraclex練習室」 就接好了。

連接器網址

https://sandbox.miraclex.com.tw/api/mcp/mcp

把上面這個網址貼進「新增自訂連接器」的欄位即可。

接上之後,直接在對話裡說 「幫我做一頁…,做好發佈」,跟下面終端機版一樣都用講的。

注意:網頁版發佈時,檔案內容要經過對話傳給工具,大檔案(單檔約 100KB 以上)可能發不上去。遇到請改用下面的終端機版 ── 它直接讀你電腦裡的資料夾,沒有這個限制。

用終端機安裝 · 開始前

需要先準備兩樣

✓電腦上裝好 Claude Code(會用 Claude 的人通常已經有;沒有的話先請窗口幫你裝)。
✓用你的公司 Google 帳號登入練習室首頁:sandbox.miraclex.com.tw

用終端機安裝 · 三步開始

1

裝一次「練習室工具」只做這一次

登入練習室首頁,在「我用終端機 Claude」點 「用 Google 登入安裝」,再點 「複製」。
打開電腦的「終端機」,把它貼上、按 Enter。
裝好後,再跟 Claude 說一句 「登入」 ── Claude 會給你一組代碼,並幫你打開 Google 登入頁(沒跳出來就手動開它給的網址)。輸入代碼、用公司 Google 帳號按一次「允許」就完成 ── 跟電視登入 YouTube 同一招,每台電腦只做這一次(不必保管鑰匙)。

終端機

$ claude mcp add yien-sandbox -s user \ --env SANDBOX_CLI_GOOGLE_CLIENT_ID=••••(系統自動帶) \ --env SANDBOX_CLI_GOOGLE_CLIENT_SECRET=••••(系統自動帶) \ -- npx -y @adchengzhi7/sandbox-mcp

指令長這樣(你不用看懂)。複製貼上、按 Enter 就好。

不想用 Google 登入?首頁「▸ 其他安裝方式」還有金鑰版(貼一行、不必登入,但那行有你的鑰匙,別給別人)。

2

開一個資料夾,當作你的頁面

用 Claude Code 開一個新的空資料夾(名字隨你取,例如「中秋禮盒頁」)。之後這次要做的東西就放這裡。

3

跟 Claude 說,做好說一句「發佈」

像聊天一樣告訴牠你要什麼,例如:「幫我做一頁中秋禮盒介紹,要有商品圖和訂購按鈕」。來回調整到你滿意。

滿意了就說一句 「發佈」 ── 約 30 秒,Claude 會給你一個網址,那就是你的頁面,可以分享給同事看。

不確定裡面的東西能不能發?發佈前先說一句 「先幫我檢查能不能發佈」 ── Claude 會列出哪些檔會上傳、哪些放不進來、有沒有需要先處理的問題,先看過再發比較安心。

接上 GitHub,push 就自動發佈

1

連接 GitHub只做這一次

在首頁按 「連接 GitHub」,跳到 GitHub 授權頁,選要開放的 repo(可全部、也可只選幾個)按下確認。回到首頁看到已連線的帳號,就接好了。

GitHub 這段可能跳出「Confirm access」本人確認(手機 GitHub App 按數字或收 email 驗證碼)──驗證碼一分鐘就過期,手機先拿在手上再開始。

2

建立綁定:選 repo、分支、資料夾

在「GitHub 連動」區塊填三樣:repo、分支(例如 main)、資料夾(要發佈的那一層,根目錄留空即可)。可以綁到你現有的某一頁(之後 push 直接更新那頁),也可以發成新頁(第一次 push 時自動建立)。

3

之後 push 就自動發佈新版本

綁定資料夾裡的檔案有變動,一 push 上去,約 30 秒內就會自動長出新版本,不用再手動上傳、不用再說「發佈」。

幾個要注意的地方

✓檔案限制、密鑰掃描跟手動發佈完全一樣 ── 一樣有大小/數量上限,一樣會自動擋真實密碼、API 金鑰。
✓解除綁定不會動到已發佈的頁面 ── 只是不再自動同步,頁面照樣在那裡。
✓發佈失敗的原因,回首頁「GitHub 連動」區塊看 ── 每個綁定會顯示最後一次同步的狀態與原因。
✓同一個 repo 的同一個資料夾只能綁一頁(不分分支) ── 想用 main 和 dev 各發一頁,請放兩個不同的資料夾。

發布前,讓 AI 幫你附上需求包

什麼是「需求包」?

✓manifest.md ── 一份跟頁面一起發佈的說明檔,讓看到這頁的人(包含之後接手做成正式功能的人)知道「資料哪裡來、要跑起來還缺什麼、原始需求在哪」。
✓不是每次都要附,但如果這頁之後要申請上線,審核工單會自動附上這份檔案的連結,先寫好會讓團隊評估快很多。

manifest.md 裡要有這四塊

①資料來源對照表 ── 頁面上每個看得到的欄位,標明是從 ERP 查來、Google Sheet 抄來,還是人工輸入(口頭講的、猜的數字)。範例:

manifest.md 範例

| 欄位 | 來源 | 備註 | |----------------|--------------------------|--------------------| | 商品名稱、價格 | ERP(品號 A1023) | 匯出於 2026-08-30 | | 訂購人清單 | Google Sheet「訂單總表」| 來源說明即可,個資不列入 | | 優惠文案 | 人工輸入 | 業務口頭確認 |

②部署條件與相依檔案 ── 這頁要正常顯示需要哪些檔案(圖片、資料檔、字型…);預期怎麼被用:獨立頁面、嵌入某個系統、要不要登入才看得到。
③截圖與代號 ── 如果附了截圖,列出每張截圖的檔名對應哪個畫面,例如「screenshot-01.png 對應商品列表頁」。
④需求背景連結 ── 這個需求最初從哪裡來:工單編號、對話連結,或是誰跟你口頭說的,方便之後有人接手能追回原始脈絡。

提醒:manifest.md 會跟頁面一起發佈——如果這頁用「公開連結」分享,拿到連結的人也看得到它。只寫「資料來源在哪」,不要把客戶名單、電話、實際金額這類內容貼進去。

AI

貼給你的 AI,請牠幫你生一份

不用自己動手寫,把下面這段複製貼給 Claude(或你在用的其他 AI),牠會照著產出 manifest.md,你只要看過內容對不對。

標準 prompt

我要發布一個網頁原型,麻煩你在發布前幫我多做一件事:在這次要發布的資料夾裡,另外生成一份 manifest.md,內容包含以下四塊,用白話寫、不要用工程術語:

一、資料來源對照表
列出這頁「看得到的每一個欄位」,標明它是從 ERP 查來的、從 Google Sheet 抄來的,還是我口頭跟你說的(人工輸入)。做成表格:欄位｜來源｜備註。

二、部署條件與相依檔案
這頁要正常顯示,需要哪些檔案(圖片、資料檔、字型等);這頁預期怎麼被使用:獨立頁面、嵌入某個系統、要不要登入才看得到。

三、截圖與代號
如果有附截圖,列出每張截圖的檔名對應哪個畫面,例如「screenshot-01.png 對應商品列表頁」。

四、需求背景連結
這個需求最初是從哪裡來的:工單編號、對話連結,或是誰跟你口頭說的,方便之後有人接手時能追回原始脈絡。

注意:manifest.md 只描述「資料來源在哪」,不要把客戶名單、電話、實際金額這類個資或敏感內容寫進去(這份檔案會跟頁面一起發佈)。

寫好之後把 manifest.md 存進這次要發布的資料夾,跟其他檔案一起發佈,不用另外跟我說。

複製後貼到對話框送出就好,AI 會把 manifest.md 存進這次要發布的資料夾一起發佈。

發佈之後,一樣都用講的

「把這頁分享給 colleague@example.com」

指名分享

對方用公司 Google 帳號登入後,免連結就能看到這頁。

「開一個分享連結」

連結分享

產生一個連結,任何拿到的人登入後都能看(可隨時收回)。

「把這頁分享給 colleague@example.com,讓他可以編輯」

共同編輯

對方能直接更新這頁、切換版本 ── 一起改同一份,不會各存一份亂掉;分享與下架仍只有你能做,隨時可移除對方。

「回到上一個版本」

版本還原

改壞了不怕 ── 每次發佈都留著,隨時切回舊版。

「這頁我要正式上線」

申請上線

幫你開一張單給團隊審核。永遠不會自動上線,團隊看過才會接手做成正式版。

做之前,先記得這幾點

①別放真實密碼、API 金鑰。系統偵測到會自動擋下、拒絕發佈。商業資料(價格、品項、報表…)可以放 ── 頁面要登入才看得到,再用「指名分享」決定給誰看;個資也一樣,用分享範圍控制。
②這裡做的是「會動的草稿」,給大家看效果、討論用,不是接真實資料的正式功能。
③頁面要登入才看得到。分享給同事時,對方也用公司 Google 帳號登入即可,陌生人連不進來。
④想真的上線,就說「申請上線」,由團隊接手 ── 練習室不會自己把東西放到正式環境。