---
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 |

## NEXT

- [ ] 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, o conectar Canva, para automatizar este paso — hoy no es posible en el sandbox de trabajo (sin privilegios root) 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 · 2026-07-21 · Owner: Victor · Sherpa: /ux-diseno*