Material 06 · Nivel 2

Del prototipo
a tu ordenador

Conecta Google AI Studio con GitHub, clona el proyecto, instálalo en local y trabaja con un agente de código.

Vibe Coding Madrid
Tangible Data
01 · GUARDAR

AI Studio → GitHub

En AI Studio abre Source control, conecta tu cuenta, elige el repositorio y confirma el primer commit.

Revisa antes: no API keys, tokens ni .env
02 · CLONAR

GitHub → local

Copia la URL HTTPS del repositorio y abre Terminal en la carpeta donde quieras trabajar.

git clone https://github.com/USUARIO/REPO.git cd REPO
03 · INSTALAR

Preparar el proyecto

Instala Node.js LTS. Después instala las dependencias que declara el proyecto y arráncalo.

npm install npm run dev
04 · PROBAR

Ver localhost

Abre la URL que indique la terminal, normalmente http://localhost:3000. Haz un cambio pequeño y compruébalo.

git status git diff
Herramientas · enlaces oficiales

Google AI Studio

Crear el prototipo y conectar el control de código fuente.

aistudio.google.com ↗

GitHub

Repositorio remoto, historial, ramas y colaboración.

github.com ↗
Guía para clonar ↗

Git

Control de versiones para guardar y comparar cambios.

git-scm.com/downloads ↗

Node.js + npm

Runtime y gestor de paquetes para ejecutar muchos proyectos web.

nodejs.org/en/download ↗
Instalar Node y npm ↗

Codex

Agente para leer, editar y probar el repositorio con tu supervisión.

openai.com/codex ↗

Claude Desktop / Code

Alternativa para trabajar sobre la carpeta local y revisar cambios.

claude.com/download ↗

GitHub Desktop es opcional si prefieres una interfaz gráfica: desktop.github.com ↗

Antes de pedir cambios

El agente debe conocer el contexto y el objetivo. Trabaja en cambios pequeños y revisables:

  • “Lee el proyecto y explícame su estructura.”
  • “Propón un plan; todavía no edites.”
  • “Haz este cambio y dime qué archivos modificaste.”
  • “Ejecuta la comprobación y enséñame el resultado.”

Reglas de seguridad

  • Nunca pongas una API key de IA en el frontend.
  • Nunca subas .env, tokens o credenciales a GitHub.
  • Usa .env.example con placeholders, nunca valores reales.
  • Si una app necesita IA, usa un backend o proxy seguro.
  • Revisa git diff antes de hacer commit.