--- type: OUT asset_id: OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01 version: v01 proyecto: Demand Gen · Muestra 2 semanas · Fase 0 owner: Victor Heredia sherpa: /ux-diseno (SVA-EL-Diseno-FactoriaVisual-v01) intellibank: IB-EL-EmpowerLabs subbank: PB-EL-Project-Bank / PB-DEMANDGEN-EmpowerLabs fecha_creacion: 2026-07-21 proposito: Guía de exportación manual de las piezas HTML de la Factoría Visual a formatos publicables (PNG/PDF), mientras no haya un motor de render headless ni Canva conectado. Aplica a los posts 1-4 de esta muestra y queda como procedimiento estándar para toda pieza futura de /ux-diseno. tags: [OUT, guia, exportacion, ux-diseno, factoria-visual, demandgen] --- # Guía de exportación · Piezas de la Factoría Visual Por qué existe: la Factoría Visual (`/ux-diseno`) produce piezas como HTML tokenizado (carril 🅰) porque no hay un motor de render headless en el entorno de trabajo ni Canva conectado — el propio SPEC lo contempla ("entrego specs y plantillas HTML exportables"). Se intentó automatizar la exportación vía el navegador conectado (Claude in Chrome), pero la extensión bloquea la navegación a archivos locales (`file://`) por diseño de seguridad — no es un bug, es una restricción deliberada del navegador. La exportación queda entonces como un paso manual corto (2-3 minutos por pieza), documentado aquí para que no haya que redescubrirlo cada vez. ## A · Piezas de una sola imagen (cards — canvas fijo, sin scroll) Aplica a: cualquier pieza tipo "post social" o "infografía técnica" de la factoría (ej. posts 1, 2 y 3 de esta muestra, la infografía del ecosistema Casa EmpowerLabs). 1. Abre el archivo `.html` con doble clic — se abre en tu navegador por defecto. 2. Abre DevTools: `F12` (o clic derecho → Inspeccionar). 3. `Ctrl+Shift+P` (Command Menu) → escribe **"screenshot"** → elige **"Capture node screenshot"**. 4. En el panel Elements, selecciona el elemento raíz del canvas (la clase `.card` o `.poster` según la pieza) antes del paso 3, o cuando el comando lo pida. 5. Se descarga un PNG exacto al tamaño real del canvas (ej. 1080×1080) — listo para subir a LinkedIn como imagen nativa. Alternativa rápida (si el pixel-perfecto no es crítico): `Win+Shift+S` y recorte manual a ojo. ## B · Carruseles (múltiples slides — canvas 768×960, 8×10in) Aplica a: cualquier pieza tipo "carrusel" heredada del molde `VIZ-EL-Brand-FactoriaCarruseles-v02` (ej. post 4 de esta muestra). **No hace falta convertir a PNG.** LinkedIn publica carruseles como post de tipo **Documento**, que acepta PDF directamente y lo renderiza como slides deslizables — es exactamente lo que el archivo ya está preparado para producir (CSS `@media print` con un salto de página por slide, tamaño 8×10in). 1. Abre el archivo `.html` con doble clic. 2. `Ctrl+P` (Imprimir). 3. Destino: **"Guardar como PDF"**. 4. Márgenes: **"Ninguno"**. 5. Guardar → ese PDF se sube tal cual a LinkedIn como post de Documento. ## C · Resumen | Tipo de pieza | Formato de salida | Método | |---|---|---| | Card / infografía de una imagen | PNG | DevTools → Capture node screenshot | | Carrusel (7 slides) | PDF | Imprimir → Guardar como PDF, márgenes ninguno | ## D · Importar a Canva para ajustes mínimos (mecanismo ratificado 2026-07-23, sin romper el diseño) **Decisión (Anahí, 2026-07-23):** de dos mecanismos probados para conectar estas piezas con Canva (ver `SPEC-EL-UX-FactoriaVisual-v01` §PARTE E), se elige **"imagen congelada + capa encima"** sobre reconstruir cada pieza como elementos nativos de Canva — porque garantiza cero riesgo de que el diseño se rompa (el motor de Canva no es el mismo que el CSS del HTML; reconstruir a mano puede derivar en tipografía/espaciado distintos). **Cómo funciona:** 1. Exporta la pieza a PNG (§A) o PDF (§B) siguiendo el proceso de arriba — **sin cambios**, es el mismo paso de siempre. 2. Sube ese PNG/PDF a Canva como imagen — arrastrar y soltar en un diseño nuevo, o pedirle a `/ux-diseno` que lo suba vía el conector si el archivo ya está en una ruta que el agente puede leer (`upload-asset-from-url` del MCP de Canva). 3. En Canva, **bloquea esa capa de imagen** (candado en el panel de capas) — así ninguna edición posterior puede moverla, recortarla o deformarla por accidente. 4. Cualquier "ajuste mínimo" (agregar un texto nuevo, un sticker, una nota, recortar el lienzo, exportar a otro tamaño) se hace en capas **nuevas encima** de la imagen bloqueada — nunca editando dentro de la imagen misma, porque ya es un PNG plano (no hay texto/objetos editables dentro de ella). **Lo que esto NO permite:** editar el copy/texto que ya quedó "congelado" dentro del PNG (ej. cambiar la palabra "interrupciones" por otra). Para eso hay que volver al HTML/CSS, hacer el cambio ahí (o vía `TPL-EL-VIS-RevisionComentarios-v01`), y re-exportar un PNG nuevo — el ciclo completo, pero sigue siendo la única forma de garantizar que el resultado final coincide exactamente con el diseño de marca ratificado. **Por qué no la alternativa (reconstrucción nativa):** se evaluó pedirle a Canva que regenere cada pieza desde una descripción (vía IA generativa) para tener texto 100% editable ahí — la prueba real (`SPEC-EL-UX-FactoriaVisual-v01` §PARTE E) confirmó que sin un Brand Template con los tokens v03 cargados, el resultado depende de que el prompt describa todo de nuevo, sin garantía de que coincida pixel a pixel con el código. Queda documentada como opción si en el futuro se justifica el trabajo de construir ese Brand Template — hoy no es el camino elegido. ## NEXT - [x] Definir el mecanismo de conexión con Canva — resuelto 2026-07-23: imagen congelada + capa encima (§D). - [ ] Si el volumen de piezas crece (campaña de 25 posts), evaluar instalar un motor de render headless (Playwright/Puppeteer) en un entorno con permisos de administrador para automatizar el paso A/B — hoy no es posible en el sandbox de trabajo (sin privilegios root, red bloqueada para descargar el binario de Chromium) ni vía el navegador conectado (bloqueo de `file://`). --- *OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01 · IB-EL-EmpowerLabs/PB-EL-Project-Bank/PB-DEMANDGEN-EmpowerLabs · creado 2026-07-21 · última actualización 2026-07-23 (§D, mecanismo Canva) · Owner: Victor · Sherpa: /ux-diseno*