/start-13-3.es

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-2", "setup-pencil"]
duration: "~30 min"
level: "intermediate"
tags: ["lp", "pencil", "design", "mockup"]
nonInteractiveMode: deferred

🎓 Lección 13-3: Creación de archivo de diseño (Pencil MCP)

📍 Lo que hará en está sesión

Bienvenido a **Lección 13-3: Creación de archivo de diseño**.

| Elemento | Detalles | |----------|----------| | Objetivo | Crear un archivo de diseño (.pen) de Landing Page/sitio web usando Pencil MCP | | Duración | ~30 min | | Habilidades utilizadas | lp-designer, Pencil MCP (user-pencil) | | Requisitos previos | Lección 13-2 completada (output/lp-wireframe.txt existe), Pencil MCP configurado (/setup-pencil) | | 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. Crear archivo de diseño en `output/lp/lp-design.pen` con Pencil 2. Obtener las guías de diseño de Landing Page 3. Aplicar la guía de estilo 4. Crear el diseño de cada sección 5. Revisar el diseño y exportar capturas de pantalla

Al finalizar la sesión, un archivo de diseño de calidad profesional estará completó.

> **💡 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 conexión de Pencil MCP) (view_html → Mostrar la ruta de la página del curso) (different_lesson → Mostrar lista de módulos)

---

🚀 Paso 1: Crear nuevo documento Pencil

Crear un nuevo archivo .pen con Pencil MCP.

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

{
  "title": "🚀 Paso 1: Crear documento Pencil",
  "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 un nuevo documento para diseño de Landing Page con Pencil MCP.

Pasos:
1. Crear directorio de destino con mkdir -p output/lp
2. Verificar estado actual con get_editor_state()
3. Crear archivo .pen con open_document("output/lp/lp-design.pen")
4. Confirmar que el archivo está abierto

Destino: output/lp/lp-design.pen

**Resultado esperado**: Se crea y abre un archivo de diseño en `output/lp/lp-design.pen`.

---

🚀 Paso 2: Obtener guías de diseño de Landing Page

Obtener las guías de diseño de Landing Page de Pencil.

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

{
  "title": "🚀 Paso 2: Guías de diseño",
  "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:

Obtenga las guías de diseño de Landing Page de Pencil MCP.

Pasos:
1. Obtener reglas de diseño de LP con get_guidelines(topic="landing-page")
2. Resumir los puntos clave de las guías
3. Destacar las reglas especialmente importantes (diseño, tipografía, color)

Seguiremos estas guías para el diseño.

**Resultado esperado**: Se muestran las reglas de diseño y mejores prácticas de Landing Page.

---

🚀 Paso 3: Aplicar guía de estilo

Seleccionar y aplicar una guía de estilo que coincida con el tono de diseño.

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

{
  "title": "🚀 Paso 3: Selección de guía de estilo",
  "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:

Lea el tono de diseño de output/lp-brief.md y aplique una guía de estilo
usando Pencil MCP.

Pasos:
1. Obtener lista de etiquetas con get_style_guide_tags
2. Seleccionar etiquetas que coincidan con el tono de diseño del brief
3. Obtener estilo con get_style_guide(tags=["landing-page", "{tono}", "{categoría}"])
4. Revisar la paleta de colores, fuentes y patrones de diseño del estilo

Resuma la vista general del estilo seleccionado.

**Resultado esperado**: Se aplica una guía de estilo que coincide con el tono de diseño.

---

🚀 Paso 4: Creación del diseño de secciones

Crear cada sección usando batch_design.

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

{
  "title": "🚀 Paso 4: Diseño de secciones",
  "questions": [{
    "id": "design_approach",
    "prompt": "Seleccione el enfoque de diseño",
    "options": [
      {"id": "all_at_once", "label": "Crear todas las secciones a la vez"},
      {"id": "step_by_step", "label": "Crear una sección a la vez con r