/start-13-5.es
Lesson command
$ npx -y skills add minicoohei/ai-agent-camp --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/start-13-5.es
Context preview
What this command does when you run it.
Lesson command
Command definition
start-13-5.es.mddescription: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-4"]
duration: "~15 min"
level: "intermediate"
tags: ["lp", "vercel", "deploy", "hosting"]
nonInteractiveMode: incompatible
🎓 Lección 13-5: Despliegue en Vercel
📍 Lo que hará en está sesión
Bienvenido a **Lección 13-5: Despliegue en Vercel**.
| Elemento | Detalles | |----------|----------| | Objetivo | Desplegar la Landing Page/sitio web creado en Vercel y obtener una URL pública | | Duración | ~15 min | | Habilidades utilizadas | lp-designer, Vercel CLI | | Requisitos previos | Lección 13-4 completada (`output/lp-project/` existe). Si no está completada, se generará un proyecto de ejemplo cómo alternativa | | Página del curso | Consulte [Módulo 13: Diseño de Landing Page/Sitio web](https://ai-agent.camp/es/course/module-13) en paralelo |
> **⚠️ Nota para entornos no interactivos (Codex, CI, etc.)**: `vercel login` requiere autenticación con navegador y no se puede ejecutar en entornos no interactivos. En ese caso, use autenticación por token mediante la variable de entorno `VERCEL_TOKEN`, u omita el paso de despliegue.
**Flujo de la sesión:** 1. Verificar existencia del proyecto (generar muestra si falta) 2. Instalar y autenticar Vercel CLI 3. Despliegue de vista previa 4. Verificar en el navegador 5. Despliegue de producción
Al finalizar la sesión, la Landing Page estará publicada en una URL accesible desde todo el mundo.
> **💡 Consejo**: Si la respuesta de la IA se detiene a mitad de camino, escriba "por favor continúe" o "se detuvo" para reanudar. Las respuestas pueden pausarse dependiendo de la herramienta, pero no es un error.
---
🎯 Verificación de preparación
Primero, confirmemos que todo está listo.
**Configuración de AskQuestion:**
{
"title": "🎯 Verificación previa a la sesión",
"questions": [{
"id": "readiness",
"prompt": "¿Está listo?",
"options": [
{"id": "ready", "label": "¡Listo! Comencemos"},
{"id": "check_prereq", "label": "Quiero verificar los requisitos previos"},
{"id": "view_html", "label": "Quiero ver la página del curso primero"},
{"id": "different_lesson", "label": "Quiero ir a otra lección"}
]
}]
}(ready → Ir al Paso 0) (check_prereq → Verificar existencia de Node.js, npm + finalización de Lección 13-4) (view_html → Mostrar la ruta de la página del curso) (different_lesson → Mostrar lista de módulos)
---
🔍 Paso 0: Verificar existencia del proyecto
Verificar que el entregable de 13-4 (`output/lp-project/`) existe.
**Pasos de verificación:**
# Verificar si existe el directorio output/lp-project
ls output/lp-project/index.html 2>/dev/null && echo "OK: El proyecto existe" || echo "NO ENCONTRADO: El proyecto no se encontró"
**Alternativa si el proyecto no existe:**
Si `output/lp-project/` no existe, complete primero 13-4 o use el siguiente proyecto de ejemplo mínimo cómo alternativa.
# Generar proyecto de ejemplo
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LP de ejemplo - Práctica de despliegue en Vercel</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">LP de ejemplo</h1>
<p class="text-xl">Esta es una página de práctica para despliegue en Vercel</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">Acerca de esta página</h2>
<p class="text-gray-700">Esta es una página de ejemplo generada automáticamente para la práctica de despliegue en Vercel de 13-5. Complete 13-4 para desplegar su Landing Page real.</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 Capacitación de agentes de IA</p>
</footer>
</body>
</html>
HTMLEOF
echo "Proyecto de ejemplo generado en output/lp-project/"> **Recomendado**: Idealmente, use la Landing Page creada en 13-4 (`/start-13-4`). El ejemplo es para practicar el procedimiento de despliegue.
**Resultado esperado**: `output/lp-project/index.html` existe.
---
🚀 Paso 1: Instalar y autenticar Vercel CLI
Instalar e iniciar sesión en Vercel CLI.
**Ejemplo de configuración de AskQuestion:**
{
"title": "🚀 Paso 1: Configuración de Vercel CLI",
"questions": [{
"id": "vercel_status",
"prompt": "¿Cuál es el estado de Vercel CLI?",
"options": [
{"id": "not_installed", "label": "Aún no está instalado"},
{"id": "installed", "label": "Instalado (ya con sesión iniciada)"},
{"id": "installed_no_login", "label": "Instalado (sin sesión iniciada)"},
{"id": "no_account", "label": "No tengo cuenta de Vercel"}
]
}]
}**Instrucciones posteriores a la selección (not_installed)**: Entrada:
Instale e inicie sesión en Vercel CLI.
Pasos:
1. Instalar
npm i -g vercel
2. Verificar versión
vercel --version
3. Iniciar sesión (Método A: Autenticación con navegador - solo entornos interactivos)
vercel login
Se abrirá un navegador, inicie sesión con su cuenta de Vercel.
Si no tiene una cuenta, cree una gratis en https://vercel.com/signup.
4. Verificar inicio de sesión
vercel whoami
**Instrucciones posteriores a la selección (installed_no_login)**:
> **⚠️ Para entornos no interactivos (Codex, CI, SSH, etc.)**: `vercel login` necesita un navegador y no se puede ejecutar. Use el "Método B: Autenticación por token" a continuación.
Entrada:
■ Método A: Autenticación con navegador (entorno local)
vercel login
→ Se abrirá un navegador para autenticarse
■ Método B: Autenticación por token (entornos no interactivos / CI)
1. Vaya a
Read more
description: "Lesson command" chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml" prerequisites: ["start-13-4"] duration: "~15 min" level: "intermediate" tags: ["lp", "vercel", "deploy", "hosting"] nonInteractiveMode: incompatible
🎓 Lección 13-5: Despliegue en Vercel
📍 Lo que hará en está sesión
Bienvenido a **Lección 13-5: Despliegue en Vercel**.
| Elemento | Detalles | |----------|----------| | Objetivo | Desplegar la Landing Page/sitio web creado en Vercel y obtener una URL pública | | Duración | ~15 min | | Habilidades utilizadas | lp-designer, Vercel CLI | | Requisitos previos | Lección 13-4 completada (`output/lp-project/` existe). Si no está completada, se generará un proyecto de ejemplo cómo alternativa | | Página del curso | Consulte [Módulo 13: Diseño de Landing Page/Sitio web](https://ai-agent.camp/es/course/module-13) en paralelo |
> **⚠️ Nota para entornos no interactivos (Codex, CI, etc.)**: `vercel login` requiere autenticación con navegador y no se puede ejecutar en entornos no interactivos. En ese caso, use autenticación por token mediante la variable de entorno `VERCEL_TOKEN`, u omita el paso de despliegue.
**Flujo de la sesión:** 1. Verificar existencia del proyecto (generar muestra si falta) 2. Instalar y autenticar Vercel CLI 3. Despliegue de vista previa 4. Verificar en el navegador 5. Despliegue de producción
Al finalizar la sesión, la Landing Page estará publicada en una URL accesible desde todo el mundo.
> **💡 Consejo**: Si la respuesta de la IA se detiene a mitad de camino, escriba "por favor continúe" o "se detuvo" para reanudar. Las respuestas pueden pausarse dependiendo de la herramienta, pero no es un error.
---
🎯 Verificación de preparación
Primero, confirmemos que todo está listo.
**Configuración de AskQuestion:**
{
"title": "🎯 Verificación previa a la sesión",
"questions": [{
"id": "readiness",
"prompt": "¿Está listo?",
"options": [
{"id": "ready", "label": "¡Listo! Comencemos"},
{"id": "check_prereq", "label": "Quiero verificar los requisitos previos"},
{"id": "view_html", "label": "Quiero ver la página del curso primero"},
{"id": "different_lesson", "label": "Quiero ir a otra lección"}
]
}]
}(ready → Ir al Paso 0) (check_prereq → Verificar existencia de Node.js, npm + finalización de Lección 13-4) (view_html → Mostrar la ruta de la página del curso) (different_lesson → Mostrar lista de módulos)
---
🔍 Paso 0: Verificar existencia del proyecto
Verificar que el entregable de 13-4 (`output/lp-project/`) existe.
**Pasos de verificación:**
# Verificar si existe el directorio output/lp-project ls output/lp-project/index.html 2>/dev/null && echo "OK: El proyecto existe" || echo "NO ENCONTRADO: El proyecto no se encontró"
**Alternativa si el proyecto no existe:**
Si `output/lp-project/` no existe, complete primero 13-4 o use el siguiente proyecto de ejemplo mínimo cómo alternativa.
# Generar proyecto de ejemplo
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LP de ejemplo - Práctica de despliegue en Vercel</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">LP de ejemplo</h1>
<p class="text-xl">Esta es una página de práctica para despliegue en Vercel</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">Acerca de esta página</h2>
<p class="text-gray-700">Esta es una página de ejemplo generada automáticamente para la práctica de despliegue en Vercel de 13-5. Complete 13-4 para desplegar su Landing Page real.</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 Capacitación de agentes de IA</p>
</footer>
</body>
</html>
HTMLEOF
echo "Proyecto de ejemplo generado en output/lp-project/"> **Recomendado**: Idealmente, use la Landing Page creada en 13-4 (`/start-13-4`). El ejemplo es para practicar el procedimiento de despliegue.
**Resultado esperado**: `output/lp-project/index.html` existe.
---
🚀 Paso 1: Instalar y autenticar Vercel CLI
Instalar e iniciar sesión en Vercel CLI.
**Ejemplo de configuración de AskQuestion:**
{
"title": "🚀 Paso 1: Configuración de Vercel CLI",
"questions": [{
"id": "vercel_status",
"prompt": "¿Cuál es el estado de Vercel CLI?",
"options": [
{"id": "not_installed", "label": "Aún no está instalado"},
{"id": "installed", "label": "Instalado (ya con sesión iniciada)"},
{"id": "installed_no_login", "label": "Instalado (sin sesión iniciada)"},
{"id": "no_account", "label": "No tengo cuenta de Vercel"}
]
}]
}**Instrucciones posteriores a la selección (not_installed)**: Entrada:
Instale e inicie sesión en Vercel CLI. Pasos: 1. Instalar npm i -g vercel 2. Verificar versión vercel --version 3. Iniciar sesión (Método A: Autenticación con navegador - solo entornos interactivos) vercel login Se abrirá un navegador, inicie sesión con su cuenta de Vercel. Si no tiene una cuenta, cree una gratis en https://vercel.com/signup. 4. Verificar inicio de sesión vercel whoami
**Instrucciones posteriores a la selección (installed_no_login)**:
> **⚠️ Para entornos no interactivos (Codex, CI, SSH, etc.)**: `vercel login` necesita un navegador y no se puede ejecutar. Use el "Método B: Autenticación por token" a continuación.
Entrada:
■ Método A: Autenticación con navegador (entorno local) vercel login → Se abrirá un navegador para autenticarse ■ Método B: Autenticación por token (entornos no interactivos / CI) 1. Vaya a
AI Agent Training for Non-Engineers - Complete Guide to Claude Code / Cursor / Codex ### ⚠️ Before you clone Official repository (maintained by the authors): Running AI agents from this repo grants them shell, file-write, and external-API permissions on your
Other commands on ai-agent-camp.
- /check-setup.en
Top-level alias — see lesson/check-setup.en.md for the full body.
Open command - /check-setup.es
Alias de nivel superior — el cuerpo completo está en lesson/check-setup.es.md.
Open command - /check-setup
Top-level alias — see lesson/check-setup.md for the full body.
Open command - /check-security.en
Lesson command
Open command - /check-security.es
Lesson command
Open command - /check-security
Lesson command
Open command