/setup-pencil.es

description: "Lesson command"
duration: "~15 min"
prerequisites: ["Navegador disponible", "Claude Code o Cursor instalado"]
level: "beginner"
tags: ["setup", "pencil", "mcp", "design"]
nonInteractiveMode: deferred

Configuración de Pencil MCP

Step 0: Verificar progreso de configuración

**Lo que la IA ejecuta automáticamente:** 1. Ejecutar `uv run python tools/setup_progress.py show --current setup-pencil` para mostrar el progreso 2. Detectar automáticamente la configuración existente:

• Para Claude Code: Verificar si el servidor `pencil` está definido en `~/.claude/mcp_settings.json`
• Para Cursor: Verificar si el servidor `pencil` está definido en `.cursor/mcp.json`
• Si ya está configurado, solo ejecutar Step 4 (prueba de conexión) y marcar como completado

Lo que hará en esta sesión

| Elemento | Contenido | |----------|-----------| | Objetivo | Instalar la aplicación de escritorio Pencil y habilitar la operación de archivos de diseño (.pen) desde Claude Code/Cursor a través del servidor MCP | | Duración | ~15 minutos | | Requisitos previos | Navegador disponible, Claude Code o Cursor ya instalado | | Nivel de operación | Instalación de aplicación + configuración MCP (asistido por IA) |

**Flujo de la sesión:** 1. Descargar e instalar la aplicación de escritorio Pencil 2. Iniciar Pencil y completar la configuración inicial 3. Agregar el servidor Pencil al archivo de configuración MCP 4. Prueba de conexión MCP

> **Consejo**: Si la IA deja de responder a mitad del proceso, escriba "por favor continúa" o "se detuvo" para reanudar.

---

Verificación de preparación

**Configuración de AskQuestion:**

{
  "title": "Confirmació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": "already_installed", "label": "Pencil ya está instalado"},
      {"id": "different_lesson", "label": "Ir a otra lección"}
    ]
  }]
}

(ready -> Ir al Step 1) (check_prereq -> Indicar: "Si Claude Code o Cursor ya está instalado, está listo para continuar") (already_installed -> Saltar al Step 3 (configuración MCP)) (different_lesson -> Mostrar lista de módulos)

---

Step 1: Descargar la aplicación de escritorio Pencil

**Lo que hace la IA:** 1. Detectar automáticamente el sistema operativo (Mac / Windows / Linux) 2. Abrir la página de descarga de Pencil en el navegador:

# Mac:
open https://pencil.evolves.dev/download
# Windows:
start https://pencil.evolves.dev/download
# Linux:
xdg-open https://pencil.evolves.dev/download

**Una vez que se abra el navegador, mostrar el siguiente AskQuestion:**

{
  "title": "Step 1: Descargar la aplicación Pencil",
  "questions": [{
    "id": "download_status",
    "prompt": "¿Se abrió la página de descarga de Pencil en su navegador?\n\nPasos:\n1. Descargue el instalador correspondiente a su sistema operativo (Mac / Windows)\n2. Ejecute el archivo descargado para instalar\n   - Mac: Abra el .dmg y arrastre a la carpeta Aplicaciones\n   - Windows: Ejecute el .exe y siga el asistente\n\n¿Pudo instalarlo?",
    "options": [
      {"id": "installed", "label": "¡Instalado!"},
      {"id": "browser_not_open", "label": "El navegador no se abrió"},
      {"id": "download_issue", "label": "No puedo descargar"},
      {"id": "mac_security", "label": "Aparece una advertencia de seguridad de Mac"}
    ]
  }]
}

(installed -> Ir al Step 2) (browser_not_open -> Indicar: "Abra esta URL directamente en su navegador: https://pencil.evolves.dev/download") (download_issue -> Indicar: "Verifique su conexión a internet. Si la descarga es lenta, espere un momento") (mac_security -> Indicar: "Vaya a Configuración del Sistema -> Privacidad y Seguridad -> haga clic en 'Abrir de todos modos'. Alternativamente, haga clic derecho en la aplicación en Finder y seleccione 'Abrir'")

---

Step 2: Iniciar y configurar inicialmente la aplicación Pencil

**Mensaje para mostrar al usuario:**

Inicie la aplicación Pencil:

┌─────────────────────────────────────────────────────────────┐
│ 1. Inicie "Pencil" desde sus Aplicaciones                   │
│ 2. Si se requiere crear una cuenta o iniciar sesión en      │
│    el primer inicio, siga las instrucciones en pantalla     │
│ 3. Está listo cuando aparezca la pantalla del editor        │
│                                                             │
│ * Pencil es una aplicación de escritorio para crear y       │
│   editar archivos de diseño en formato .pen                 │
└─────────────────────────────────────────────────────────────┘

**Configuración de AskQuestion:**

{
  "title": "Step 2: Iniciar la aplicación Pencil",
  "questions": [{
    "id": "app_status",
    "prompt": "¿Pudo iniciar la aplicación Pencil?",
    "options": [
      {"id": "running", "label": "¡Pencil está funcionando!"},
      {"id": "cant_find", "label": "No puedo encontrar la aplicación"},
      {"id": "crash", "label": "Se bloquea al iniciar"},
      {"id": "login_issue", "label": "Tengo problemas con el inicio de sesión/creación de cuenta"}
    ]
  }]
}

(running -> Ir al Step 3) (cant_find -> Mac: Verificar la carpeta "Aplicaciones" / Windows: Verificar el menú Inicio. Si la instalación no se completó, volver al Step 1) (crash -> Indicar: "Asegúrese de que su sistema operativo esté actualizado. Si el problema persiste, intente desinstalar y reinstalar") (login_issue -> Indicar: "Puede crear una cuenta en el sitio web de Pencil (https://pencil.evolves.dev). Puede registrarse con su dirección de correo electrónico")

---

Step 3: Agregar el servidor Pencil al archivo de configuración MCP

**Lo que la IA ejecuta automáticamente:**

1. Determinar la herramienta en uso (Claude Code o Cursor) 2. Guiar la configuración del servidor Pencil MCP

**Método de conexión de Pencil MCP:**

Pencil MCP e