--- type: TP asset_id: TP-EL-VIS-PlaybookFactoria-v01 version: v01 owner: Victor Heredia sherpa: /ux-diseno (SVA-EL-Diseno-FactoriaVisual-v01) ratificador: Victor Heredia (L3+) · VoBo Paloma (marca) intellibank: IB-EL-EmpowerLabs subbank: SVA-EL-UltraSherpas fecha_creacion: 2026-07-23 relacionados: [SPEC-EL-UX-FactoriaVisual-v01, SVA-EL-Diseno-FactoriaVisual-v01, DC-EL-LoopXVIS-LoopContract-v01, TP-EL-VIS-RoomProduccion-v01, TPL-EL-VIS-RevisionComentarios-v01, OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01] proposito: Transfer Pack — playbook de uso de la Factoría Visual (/ux-diseno) para cualquier miembro del equipo EmpowerLabs, no solo quien la diseñó. Consolida en un solo documento cómo pedir una pieza, cómo revisarla con comentarios, cómo ajustarla en Canva, y las reglas de marca/texto que no se negocian. tags: [TP, playbook, ux-diseno, factoria-visual, onboarding, equipo] --- # Playbook · Cómo usa el equipo la Factoría Visual Este documento es para cualquier persona de EmpowerLabs (no solo quien diseñó el sistema) que necesite: (a) pedir una pieza visual nueva, (b) revisar/comentar una pieza ya entregada, o (c) hacerle un ajuste mínimo en Canva sin romper el diseño. No repite el detalle técnico completo — ese vive en los documentos fuente (`relacionados` arriba) — da el mapa y los transfers listos para copiar y pegar. ## Transfer prompt · arrancar con el playbook cargado Copia esto en un room nuevo si quieres que el Sherpa tenga todo el contexto de la factoría antes de pedirle algo: > `/arrancaroom` AniX, carga el playbook de la Factoría Visual con `TP-EL-VIS-PlaybookFactoria-v01` > (además de `SPEC-EL-UX-FactoriaVisual-v01` y `SVA-EL-Diseno-FactoriaVisual-v01` si hace falta el > detalle completo de una regla). Voy a [pedir una pieza nueva / revisar una pieza existente / > ajustar algo en Canva] — dime qué necesitas de mí para arrancar. ## El ciclo completo, en una vista 1. **Brief** — tú traes un MD con la propuesta (hook, claims con fuente, estructura, CTA) y el formato elegido (ver menú abajo). Si no traes formato, el room te pregunta antes de producir. 2. **Producción** — `/ux-diseno` corre el pipeline LoopXVIS (Gate G0 → propósito → extracción → ruteo código/IA → producción → QA → empaque) y te entrega HTML + `Fuentes.md` + `Prompts.md`. Transfer para abrir este room → ver `TP-EL-VIS-RoomProduccion-v01` (texto exacto abajo). 3. **QA interno** — 4 gates antes de que veas la pieza: marca, datos (toda cifra con fuente), texto (tamaño, contraste, viudas, valor), formato. 4. **Revisión con comentarios** — tú (o quien designe Victor) anota comentarios puntuales sobre la pieza ya entregada, sin tocar el HTML directamente. Transfer para este ciclo → ver `TPL-EL-VIS-RevisionComentarios-v01` (texto exacto abajo). 5. **Ajustes** — `/ux-diseno` aplica los comentarios y re-entrega como versión siguiente (`-v02`, `-v03`, …). Si el ajuste es mínimo y no toca el copy/dato ya congelado, también puede hacerse en Canva sobre la imagen exportada (ver más abajo). 6. **Export** — Imprimir → Guardar como PDF para carruseles, captura de nodo (DevTools) para piezas de una sola imagen. Detalle completo en `OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01`. 7. **VoBo y publicación** — Paloma da VoBo de marca, Victor (L3+) autoriza publicar. `/ux-diseno` no decide qué ni cuándo se publica. ## Transfer — pedir una pieza nueva (room de producción) > `/arrancaroom` AniX, room de producción de la Factoría Visual con `TP-EL-VIS-RoomProduccion-v01`. > Te paso el MD con la propuesta del post/pieza y el formato — corre `/ux-diseno` sobre eso. Trae contigo: el MD de la propuesta (hook, claims con fuente citada, estructura, CTA) y el formato elegido del menú de abajo. Si es una pieza personal de alguien (ej. Victor), incluye si va con bloque de firma/branding. ## Transfer — ajustar o comentar una pieza ya entregada Primero copia `TPL-EL-VIS-RevisionComentarios-v01.md` junto a la pieza, renómbralo `REV-EL-VIS-{Pieza}-v01.md`, y llena la tabla de comentarios (un comentario por fila, marcando si es de **contenido** o **formato**). Luego: > `/arrancaroom` AniX, room de producción de la Factoría Visual con `TP-EL-VIS-RoomProduccion-v01`. > Te traigo una revisión con comentarios (`REV-EL-VIS-{Pieza}-v01`) sobre la pieza {nombre} — > aplícalos y re-entrega como -vNN. ## Menú de formatos (ratificado 2026-07-23) - **Carrusel:** Negro · Blanco · Híbrido (negro/blanco intercalado, siempre abre y cierra en negro) · Multicolor (negro + azul + rosita, siempre abre y cierra en negro). Canvas fijo: 768×960px (8×10in). - **Imagen única:** Negro · Blanco · Color específico (declarado explícitamente, nunca por default). Canvas fijo — **no es libre aunque el brief pida otra cosa**: 1080×1350px (4:5, vertical, recomendado) o 1080×1080px (1:1, cuadrado clásico de feed). Si no se especifica formato o tamaño al pedir la pieza, `/ux-diseno` pregunta antes de producir — y si alguien pide un tamaño fuera de este menú (ej. 16:9), se señala y se ofrecen estas opciones en vez de producirlo tal cual. ## Reglas de marca y texto que no se negocian - **Fondos:** negro/oscuro o blanco/neutro — nunca un color de fondo por default (solo si se declara explícitamente "color específico"). Azul resalta texto/símbolo; rosita solo en botones/CTA de acción. - **Colores de texto — cero grises:** fondo oscuro → texto blanco/casi-blanco o azul/rosita de marca. Fondo claro → texto negro/casi-negro o azul/rosita de marca. Nunca un tono gris intermedio en ningún texto de lectura, sin excepción — ni siquiera "gris muy oscuro". Ojo especial si la pieza hereda un molde con el kit `EL-DashboardStandard-v01` (pensado para dashboards internos): ese script puede sobreescribir clases genéricas (`.sub`, `.foot`, `.muted`, etc.) con su propia paleta de grises — si la pieza es para exportar/publicar (no un dashboard), ese script no debería estar incluido. - **Tamaño:** texto pequeño 2-3x el uso previo, más un afinado adicional (~2px) sobre ese piso. - **Viudas — regla de TODA la pieza, no solo de lo que alguien señale:** antes de entregar, recorrer cada línea de texto y calcular longitud aproximada vs. ancho útil del canvas al tamaño de fuente real. Cualquier tramo sin quiebre que supere ~35-40 caracteres a tamaño de cuerpo (~32px) o ~18-20 a tamaño de headline (58-86px, en un canvas de 768px con padding 64px por lado) se parte preventivamente con `
` en el punto de sentido, y se unen las últimas 2 palabras de cada línea resultante con ` ` — para que ninguna quede aislada sin importar el ancho real de render. - **Tono:** piezas en primera persona (ej. Victor) se calibran contra `VOX-VH-VictorHeredia-v02` — evitar egocentrismo en el LENGUAJE (hedging, relleno, energía sin sustancia). Esto **no** toca el bloque de firma/branding personal (nombre + tagline + crédito de autor) — ese se mantiene tal cual, es información de atribución, no una afirmación que deba pasar el filtro de tono. **Filtro de valor:** recortar texto repetido que no aporte (indicaciones de UI iguales en cada slide, cierres genéricos sin significado). **Negritas con criterio:** `` solo en la palabra o frase corta que de verdad necesita resalte (un número, un término clave) — nunca una oración completa por default. Si casi todo el párrafo está en negrita, deja de significar algo. No aplica a headers/títulos con su propio `font-weight` de sistema, esos siempre van en su peso. ## Ajustes en Canva (mecanismo ratificado — imagen congelada + capa encima) Para un ajuste mínimo (agregar texto, sticker, recorte) sin arriesgar que el diseño se rompa: 1. Exporta la pieza a PNG/PDF (proceso normal, `OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01` §A/B). 2. Sube ese archivo a Canva como imagen y **bloquéala** (candado en el panel de capas). 3. El ajuste va en una **capa nueva encima** — nunca editando la imagen bloqueada. 4. Si el ajuste es cambiar copy/dato ya congelado en la imagen, no se hace en Canva — se corrige en el HTML y se re-exporta. Detalle completo y por qué se descartó reconstruir cada pieza nativa en Canva: `SPEC-EL-UX-FactoriaVisual-v01` §PARTE E. ## Versionado Cada corrección de una ronda de revisión bumpea la versión (`-v01` → `-v02` → …); las versiones anteriores se conservan en el mismo folder como referencia histórica — nunca se sobreescriben. El footer de cada HTML documenta qué cambió en cada versión. ## Mapa de documentos (dónde vive cada cosa) | Necesito... | Documento | |---|---| | El brief/spec completo de la factoría | `SPEC-EL-UX-FactoriaVisual-v01` | | Las reglas de tipografía/composición explicadas a fondo | `SVA-EL-Diseno-FactoriaVisual-v01` | | Abrir un room a producir una pieza | `TP-EL-VIS-RoomProduccion-v01` | | Revisar/comentar una pieza ya entregada | `TPL-EL-VIS-RevisionComentarios-v01` | | El ciclo completo como Loop Contract (estados, tablero) | `DC-EL-LoopXVIS-LoopContract-v01` | | Cómo exportar a PNG/PDF y subir a Canva | `OUT-EL-VIS-Muestra2Semanas-GuiaExportacion-v01` | ## Checklist antes de entregar cualquier pieza - [ ] Gate G0 corrido (canon + BrandBook v03 + tokens consultados). - [ ] Cada cifra tiene fuente citada — ninguna inventada. - [ ] Fondos y colores respetan la regla de marca (sin gris, sin color de fondo no declarado). - [ ] Tamaño de texto pequeño en el piso 2-3x + afinado. - [ ] Cada línea de texto auditada contra viudas (no solo la que alguien señaló). - [ ] Tono calibrado contra VOX si la pieza habla en primera persona — bloque de firma intacto. - [ ] Texto de relleno/repetido removido. - [ ] `Fuentes.md` actualizado con el changelog de la versión entregada. --- *TP-EL-VIS-PlaybookFactoria-v01 · IB-EL-EmpowerLabs/SVA-EL-UltraSherpas · creado 2026-07-23 · Owner: Victor · Sherpa: /ux-diseno*