匯入 Google AI Studio

如何將 Google AI Studio 專案匯出到 GitHub

本指南是取得 Google AI Studio（Gemini） 產生的程式碼並將其轉換為永久專案的最簡單方法，你可以保存、編輯並與世界分享。

Google AI Studio 非常適合”Vibe Coding”——要求 Gemini 在幾秒內建構一個 React 應用、遊戲或工具。但是，AI Studio 是一個沙盒；為了擁有你的程式碼並在其上進行開發，你需要將其移動到 GitHub。

工作流程：

📝 重要說明：本指南重點關注”Build”模式（建立完整應用/網站）。如果你的應用使用 API 金鑰（如 Gemini API），請記住出於安全考慮，你不應該將這些金鑰直接提交到 GitHub。我們將在本地設定步驟中介紹如何處理這個問題。

本計劃將你從臨時 AI 生成遷移到專業開發環境。

在匯出之前，你需要有一個專案。我們將使用 Build 功能（有時稱為”Vibe Coding”）來產生完整的應用程式。

進入 Build 模式：
- 轉到 Google AI Studio。
- 點擊新建並選擇應用（或確保頂部的切換開關設定為”Build”而不是”Prompt”）。
向 AI 提示：
- 輸入你的請求（例如：“使用 React 和 Tailwind 建立具有賽博龐克美學的番茄鐘計時器”）。
- 等待右側載入預覽。
改進（可選）：
- 與 Gemini 聊天以調整設計（例如：“讓開始按鈕變綠”）。
- 一旦你對預覽滿意，就可以進行匯出了。

現在你的程式碼已準備就緒，你將把它從 Google 沙盒遷移到你自己的版本控制系統。

找到 GitHub 整合：
- 查看程式碼/預覽窗格上方的標題欄。
- 點擊 GitHub 圖示（貓咪剪影）。
授權（僅第一次）：
- 如果你之前沒有連接過，彈出視窗將要求授權。
- 點擊 連接帳戶 並授權 Google AI Studio 代表你建立儲存庫。
設定儲存庫：
- 儲存庫名稱： 輸入一個簡潔的名稱（例如 cyberpunk-pomodoro）。注意：不允許有空格。
- 描述： （可選）“由 Gemini 產生”。
- 可見性： 選擇公開（所有人都可見）或私有（僅你可見）。
- 點擊推送。
驗證：
- 等待成功訊息：“成功推送到 GitHub”。
- 點擊訊息中提供的連結，在 GitHub 上打開你的新儲存庫。

現在程式碼已在 GitHub 上，你將在本機設定它以驗證依賴項並進行生產調整。

複製儲存庫： 打開 Cursor，打開命令調板（Cmd+Shift+P 或 Ctrl+Shift+P），然後輸入 > Git: Clone。貼上你的新儲存庫 URL。

或者，通過終端：
```
git clone <https://github.com/your-username/your-repo-name.git>
cd your-repo-name
```
安裝依賴項： AI Studio 專案通常會自動偵測套件管理器。檢查鎖定檔案（pnpm-lock.yaml、package-lock.json 或 yarn.lock）。
```
# 如果使用 npm
npm install
# 如果使用 pnpm（在 AI Studio 中常見）
pnpm install
```
環境設定：
- 找到 .env.example 檔案（如果存在），並複製它以建立 .env 檔案。
- 重要： 如果你的 AI Studio 應用使用了 API 金鑰（Gemini API 等），你必須手動將這些金鑰新增到本機的 .env 檔案中。AI Studio 出於安全考慮，不會將你的金鑰匯出到 GitHub。
本機測試： 執行開發伺服器以確保應用在 AI Studio 沙盒外運作。
```
npm run dev
```