/start-13-4.es

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-3"]
duration: "~30 min"
level: "intermediate"
tags: ["lp", "html", "tailwind", "implementation"]
nonInteractiveMode: deferred

🎓 Lección 13-4: Crear una Landing Page funcional (HTML/CSS/JS)

📍 Lo que hará en está sesión

Bienvenido a **Lección 13-4: Implementación de Landing Page**.

| Elemento | Detalles | |----------|----------| | Objetivo | Convertir el diseño de Pencil en una Landing Page funcional con HTML/CSS(Tailwind)/JS | | Duración | ~30 min | | Habilidades utilizadas | lp-designer, Pencil MCP (guías de code/tailwind), cursor-ide-browser | | Requisitos previos | Lección 13-3 completada (archivo de diseño .pen existe) | | 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 |

> **💡 Información de herramientas**: Esta lección usa Pencil MCP. Está disponible en el espacio de trabajo actual y en Claude Code (CLI/Escritorio). En algunos entornos cómo Codex CLI, puede aparecer un error `request_user_input is not supported`. En ese caso, consulte la sección "Flujo de trabajo alternativo".

**Flujo de la sesión:** 1. Obtener las guías de conversión a código 2. Crear la estructura del proyecto 3. Implementar HTML/CSS(Tailwind)/JS 4. Agregar diseño responsive y animaciones 5. Verificar en el navegador

Al finalizar la sesión, una Landing Page/sitio web que funciona en el navegador estará completa.

> **💡 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 1) (check_prereq → Verificar existencia del archivo .pen) (view_html → Mostrar la ruta de la página del curso) (different_lesson → Mostrar lista de módulos)

---

🚀 Paso 1: Obtener guías de conversión a código

Obtener las guías para convertir diseños de Pencil a código.

**Ejemplo de configuración de AskQuestion:**

{
  "title": "🚀 Paso 1: Guías de conversión a código",
  "questions": [{
    "id": "tech_stack",
    "prompt": "Seleccione el stack tecnológico para la implementación",
    "options": [
      {"id": "tailwind", "label": "HTML + Tailwind CSS (recomendado, CDN)"},
      {"id": "vanilla", "label": "HTML + CSS puro"},
      {"id": "react", "label": "React + Tailwind CSS"},
      {"id": "nextjs", "label": "Next.js + Tailwind CSS"}
    ]
  }]
}

**Instrucciones posteriores a la selección (ejemplo)**: Entrada:

Obtenga las guías de conversión a código de Pencil MCP.

Pasos:
1. Obtener guías de codificación con get_guidelines(topic="code")
2. Obtener reglas específicas de Tailwind con get_guidelines(topic="tailwind")
3. Cargar el diseño del archivo .pen con batch_get
4. Resumir el enfoque de conversión de diseño a código

Verificar específicamente:
- Códigos de color (convertir a nombres de clase de Tailwind)
- Tamaños de fuente (mapeo a text-sm, text-lg, etc.)
- Espaciado/márgenes (mapeo a p-4, m-8, etc.)
- Estructura de diseño (uso de flex, grid)

**Resultado esperado**: La información necesaria para la conversión a código está organizada.

---

🚀 Paso 2: Crear estructura del proyecto

Crear la estructura de archivos para la Landing Page.

**Ejemplo de configuración de AskQuestion:**

{
  "title": "🚀 Paso 2: Estructura del proyecto",
  "questions": [{
    "id": "step_action",
    "prompt": "¿Qué desea hacer con este paso?",
    "options": [
      {"id": "practice", "label": "Continuar"},
      {"id": "review", "label": "Solo revisar ejemplos"},
      {"id": "skip", "label": "Omitir"}
    ]
  }]
}

**Instrucciones posteriores a la selección (ejemplo)**: Entrada:

Cree la estructura del proyecto para la Landing Page.

Creación de directorios:
mkdir -p output/lp-project/images
mkdir -p output/lp-project/css
mkdir -p output/lp-project/js

Creación de archivos:
- output/lp-project/index.html   # HTML principal
- output/lp-project/css/style.css # CSS personalizado
- output/lp-project/js/main.js   # Interacciones
- output/lp-project/package.json  # Para despliegue en Vercel

Contenido de package.json:
{
  "name": "lp-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "npx serve ."
  }
}

**Resultado esperado**: Se crea la estructura del proyecto de Landing Page.

---

🚀 Paso 3: Implementar HTML/CSS(Tailwind)/JS

Implementar el código basándose en el diseño de Pencil.

**Ejemplo de configuración de AskQuestion:**

{
  "title": "🚀 Paso 3: Implementación del código",
  "questions": [{
    "id": "step_action",
    "prompt": "¿Qué desea hacer con este paso?",
    "options": [
      {"id": "practice", "label": "Continuar"},
      {"id": "review", "label": "Solo revisar ejemplos"},
      {"id": "skip", "label": "Omitir"}
    ]
  }]
}

**Instrucciones posteriores a la selección (ejemplo)**: Entrada:

Implemente output/lp-project/index.html basándose en el archivo .pen de Pencil
y output/lp-brief.md.

Requisitos:
1. Usar Tailwind CSS CDN
   <script src="https://cdn.tailwindcss.com"></script>

2. Estructura de secciones (basada en output/lp-brief.md):
   - Header: Logo + Nav + Botón CTA (header fijo)
   - Hero: Titular + Subtítulo + CTA + Imagen Hero
   - Pain Points: Tarjetas de iconos en 3 columnas
   - So