Paso 5: Abrir el prototipo

Usa la carpeta de salida que reporte tu agente. En esta guía, Gemini CLI y Claude Code usan rutas verificadas distintas.

Iniciar la salida de Gemini CLI

# macOS / Linux
cd ~/mi-prototipo/prototype
npm install
npm run dev

# Windows PowerShell
cd $HOME\mi-prototipo\prototype
npm install
npm run dev

Iniciar la salida de Claude Code

# macOS / Linux
cd ~/mi-prototipo
npm install
npm run dev

# Windows PowerShell
cd $HOME\mi-prototipo
npm install
npm run dev

Si cualquiera de los agentes reporta otra ruta de salida, usa esa ruta.

Deberías ver:

  VITE v6.x.x  ready in 800ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Abrir el prototipo

Abre tu navegador y ve a:

http://localhost:5173

Verás tu prototipo ejecutándose con las tres pantallas must-have que seleccionaste en el Paso 4. Usa la navegación para moverte entre ellas.

Cómo se ve un prototipo completo

• Una pantalla de inicio como punto de entrada
• Navegación lateral o inferior que conecta todas las pantallas
• Datos de ejemplo realistas, como números, nombres y fechas
• Componentes de shadcn/ui adaptados a los colores de tu marca
• Un diseño adaptable que funciona en pantallas móviles

Solución de problemas

Conflicto de puerto: algo ya está corriendo en el puerto 5173

# macOS / Linux
npm run dev -- --port 5174

# Windows PowerShell
npm run dev -- --port 5174

Luego abre http://localhost:5174 en su lugar.

Error de dependencias faltantes

Si ves errores como Cannot find module 'xxx', ejecuta:

# macOS / Linux
rm -rf node_modules package-lock.json
npm install

# Windows PowerShell
Remove-Item -Recurse -Force node_modules, package-lock.json
npm install

Versión incorrecta de Node

El flujo actual requiere Node.js 20+. Si ves un error sobre la versión de Node:

Verifica con node --version. Si la salida es menor a v20.0.0, actualiza Node.js desde https://nodejs.org.

Pantalla en blanco sin errores

Abre las herramientas de desarrollo del navegador con F12, revisa la pestaña Consola y pega el mensaje de error completo en tu sesión actual de Gemini CLI o Claude Code para que el agente pueda corregirlo.