导入 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
```
安装依赖项： 项目通常会自动检测包管理器。检查锁文件（pnpm-lock.yaml、package-lock.json 或 yarn.lock）。
```
# 如果使用 npm
npm install
# 如果使用 pnpm（在 AI Studio 中常见）
pnpm install
```
环境设置：
- 找到 .env.example 文件（如果存在），并复制它以创建 .env 文件。
- 重要： 如果你的应用使用了 API 密钥（OpenAI、Supabase 等），你必须手动将这些密钥添加到本地的 .env 文件中。出于安全考虑，这些密钥不会被导出到 GitHub。
本地测试： 运行开发服务器以确保应用在本地正常工作。
```
npm run dev
```