---
type: SPEC
asset_id: SPEC-EL-UX-FactoriaVisual-v01
version: v01
proyecto: Factoría de Infografías e Ilustraciones · UltraSherpaX
owner: Victor Heredia
sherpa: SherpaX (Jay / Fable)
ratificadores: [Victor (L3+), Paloma (Brand)]
estado: 🟡 Draft de diseño · lista para /sx-consejero → /sx-fabricador-usherpax
intellibank: IB-EL-EmpowerLabs
subbank: SVA-EL-UltraSherpas
fecha_creacion: 2026-07-20
proposito: Análisis, plan y especificación del UltraSherpaX que opera una factoría automática de infografías e ilustraciones a partir de la definición de un producto, en la marca EmpowerLabs.
referencias_canonicas:
  - EL-BrandOS-Tokens-v03.css (marca azul · tokens + regla de color)
  - VIZ-EL-Brand-BrandBookMaestro-v03 (brandbook)
  - VIZ-EL-Brand-FactoriaCarruseles-v02 (patrón de render por código ya probado)
tags: [SPEC, ultrasherpa, factoria, infografia, ilustracion, imagen, demand-gen, marca, ux]
---

# SPEC · UltraSherpaX · Factoría de Infografías e Ilustraciones
## Análisis + Plan + Especificación · "de la definición de un producto a un paquete de imágenes de marca, automático"

> **BLUF.** El camino ganador **no** es "una IA genera todas las imágenes". Es una **factoría híbrida de dos carriles**: (A) **render por código** (HTML/SVG → PNG con tus tokens de marca) para las infografías de **datos** — texto perfecto, paleta exacta, cero alucinación, gratis y reproducible; (B) **generación por IA** (Ideogram / Nano Banana / Midjourney / FLUX) para **ilustraciones, visuales hero y memes**. Un cerebro orquestador (el UltraSherpaX) lee la definición del producto, extrae hechos+claims+fuentes, rutea cada pieza al motor correcto, aplica marca y QA, y empaca. Este diseño aprovecha exactamente lo que ya te funciona (los carruseles y sitios se ven perfectos porque se renderizan por código).

---

## PARTE A · Análisis y recomendación (el mejor camino)

### A1 · Panorama de motores (validado a julio 2026)

| Trabajo | Mejor motor(es) jul-2026 | Por qué |
|---|---|---|
| **Infografía con datos / texto denso** | **Ideogram 4.0** · **GPT Image 2** | Ideogram: 0.97 OCR, control por JSON con **bounding-box + condicionamiento por HEX** (respeta tu paleta). GPT Image 2: 99% precisión de texto, fase de razonamiento, layouts multi-columna consistentes. |
| **Ilustración / visual hero / marketing** | **Midjourney V8.1** · **Nano Banana Pro** | MJ: mejor estética para lo estilizado. Nano Banana: mejor edición, hasta 14 imágenes de referencia y consistencia de personaje/estilo (clave para serie de marca). |
| **Memes / social de alto volumen** | **GPT Image 2** · **Seedream 4.5** | Texto + iteración conversacional (GPT); Seedream barato por imagen para volumen. |
| **Automatización vía agente (API)** | **FLUX.2 Pro** · **Nano Banana Pro** | FLUX API-first (fal.ai/Replicate), ~$0.03–0.07/img — el más fácil de orquestar desde un agente. Nano Banana vía Vertex, ~$0.13–0.24/img con edición. |

### A2 · El hallazgo que define la arquitectura

Para **infografías de datos** (números, claims con fuente, jerarquía, tu paleta), la IA de imagen todavía comete errores de texto largo y no clava tu color exacto. **El render por código lo hace perfecto**: es lo que ya probaste con `VIZ-EL-Brand-FactoriaCarruseles-v02` y los 7 sitios — texto nítido, `#1E9BF0` exacto, datos correctos, y **reproducible** (mismo input → mismo output). Además es **gratis** y **versionable** en el vault.

La IA de imagen es insuperable para lo que el código no hace bien: **ilustración, metáfora visual, hero, meme**. Ahí sí conviene Ideogram (si lleva texto) o Nano Banana/Midjourney (ilustración pura).

**Conclusión:** factoría **híbrida**. No es "código vs IA" — es **cada pieza al motor correcto**, todo bajo la marca.

### A3 · Mapeo de tus 4 salidas → motor recomendado

| Salida (tu conclusión de reunión) | Carril | Motor primario | Formato |
|---|---|---|---|
| **Infografía principal · Producto/Técnica** (detallada, datos) | 🅰 Código | HTML→PNG (tokens) | 4:5 y/o A4 vertical |
| **Infografía principal · Difusión/Educación** (lenguaje simple, visual) | 🅰+🅱 Híbrido | HTML→PNG + ilustración central de IA (Nano Banana/MJ) | 4:5 |
| **Infografía post** (social) | 🅰 Código | HTML→PNG | 1:1 y 4:5 |
| **Meme** | 🅱 IA (o plantilla) | GPT Image 2 / Seedream · o plantilla código + imagen | 1:1 |

---

## PARTE B · Plan para llegar a la factoría

**Fase 0 — Insumos listos (✅ ya los tienes):** marca azul + tokens (`EL-BrandOS-Tokens-v03.css`), brandbook, y el patrón de render por código probado (carruseles + sitios).

**Fase 1 — Plantillas maestras (render por código).** Construir 4 plantillas HTML tokenizadas (una por tipo de salida), con "huecos" de contenido (title, claims[], stats[], fuente[], ilustración?). Salen del mismo sistema de tema (oscuro/claro) y respetan la regla de color. *Entregable: `TPL-EL-Infografia-{Tecnica|Difusion|Post|Meme}-v01.html`.*

**Fase 2 — Motor de render.** Script headless (Playmwright/Chromium, el mismo que ya uso) que toma la plantilla + datos → PNG a resolución de export. *Entregable: `render-infografia.mjs`.*

**Fase 3 — Carril IA.** Conectar 1–2 motores por API (recomendado: **FLUX.2 Pro** vía fal.ai para automatizar + **Nano Banana Pro** para consistencia de serie). Definir el **prompt-kit de marca** (estilo, paleta HEX, "no texto" cuando el texto lo pone el código). *Entregable: `PROMPTKIT-EL-Ilustracion-v01.md`.*

**Fase 4 — El orquestador (el cerebro del UltraSherpaX).** El prompt de sistema que: parsea la definición del producto → extrae hechos/claims/fuentes → decide qué piezas y qué motor → llama render y/o IA → corre QA de marca → empaca. *Es el corazón de la SPEC (Parte C).*

**Fase 5 — Ejemplo y iteración (👉 corremos uno ahora, Parte D).** Un producto real → paquete completo → ajustar plantillas y prompts.

**Fase 6 — Automatización.** Empaquetar como UltraSherpaX invocable (`/ux-<nombre>`), con contrato de input/output y gobernanza WORX.

---

## PARTE C · Especificación del UltraSherpaX

### C1 · Identidad
- **Nombre canónico:** **`/ux-diseno`** — decidido 2026-07-21. Se descarta la propuesta original *ux-Quetzal* (esplendor visual · color) y sus alternativas *ux-Frida* / *ux-Iris*: para cuando esta SPEC se ratificó, `/ux-diseno` ya estaba asentado en 12+ documentos (minutas de Victor, TeamSync, los 3 Brain Codes, la auditoría de marca). Se prioriza la coherencia del vault sobre la convención de nombres propios de la familia UltraSherpaX (`ux-midas`, `ux-tlaloc`). Si esa convención se ratifica después, el rename se hace en una sola pasada sobre todo el vault, no aquí.
- **Clase:** UltraSherpaX (`/ux-`), banco `SVA-EL-UltraSherpas`.
- **Una línea:** convierte la definición de un producto en un paquete de imágenes de marca, listas para publicar — infografías por código y ilustración/meme por IA.

### C2 · Composición (Shell × Brain Codes) — receta para `/sx-consejero`
- **Shell:** especialista de diseño de información / dirección de arte (base para juicio visual).
- **Brain Code(s):**
  - `BC-Infografia-BestPractices-2026` (a destilar) — jerarquía visual, densidad de datos, legibilidad, honestidad de datos.
  - **La marca como contexto duro:** `EL-BrandOS-Tokens-v03` + regla de color + geometría del símbolo (no es BC, es contexto Gate G0 obligatorio).
- **Autonomía:** **L2** — produce y ratifica par senior (Paloma/Ángeles en brand); L3 (Victor) para cambiar el sistema o publicar externamente.

### C3 · Contrato de INPUT
Entrada mínima: **la definición del producto** (un doc del vault, p. ej. `DC-EL-EmpowerScan-Metodologia`, o un bloque estructurado). El UltraSherpaX extrae por sí mismo:
- `nombre`, `nivel de marca` (N1–N4 → acento), `promesa/hook`, `claims con fuente`, `stats`, `pasos/estructura`, `CTA`.
- Parámetros opcionales: `audiencia` (técnica/directiva/general), `formatos`, `tema` (oscuro/claro/híbrido).
- **Gate G0:** si el producto tiene canon en el vault, se consulta antes de inventar. Si falta un dato o una fuente, **se marca**, no se inventa (regla heredada de la voz de la casa).

### C4 · PIPELINE (operación automática · 6 pasos)
```
1. INGESTA     Lee la definición del producto (Gate G0 en el vault).
2. EXTRACCIÓN  Destila hook · claims+fuentes · stats · estructura · CTA. Marca faltantes.
3. RUTEO       Decide piezas del paquete y motor por pieza (código vs IA) según §A3.
4. PRODUCCIÓN  🅰 Render por código (plantilla + datos → PNG, tokens de marca).
               🅱 IA: arma el prompt de marca (HEX, estilo, "sin texto") → llama motor.
5. QA          Marca (fondo nunca de color · azul solo resalta · símbolo correcto),
               texto (ortografía/AA), datos (cada dato con fuente o marcado), formato.
6. EMPAQUE     Nombra canónico, guarda en el vault, entrega el paquete + hoja de fuentes.
```

### C5 · Contrato de OUTPUT (el paquete)
Por cada corrida, un paquete `OUT-EL-VIS-<Producto>-<fecha>/` con:
1. `…-InfografiaTecnica.png` — principal, datos, densa (4:5 + A4).
2. `…-InfografiaDifusion.png` — principal, lenguaje simple + ilustración central (4:5).
3. `…-Post.png` — social (1:1 y 4:5).
4. `…-Meme.png` — social (1:1).
5. `…-Fuentes.md` — toda cita usada (trazabilidad).
6. `…-Prompts.md` — los prompts de IA usados (reproducibilidad).
Cada imagen se entrega en las **3 versiones de tema** cuando aplique (oscuro/claro/híbrido), por la regla del ecosistema.

### C6 · Motores (default recomendado)
- **Datos (🅰):** render por código — **default y preferente**.
- **Ilustración (🅱):** **Nano Banana Pro** (consistencia de serie con refs) o **Midjourney V8.1** (estética). Automatización desatendida: **FLUX.2 Pro** (API).
- **Texto-en-imagen que el código no cubra:** **Ideogram 4.0** (HEX + bounding-box).
- **Meme:** **GPT Image 2** / **Seedream 4.5**, o plantilla-código + imagen.
- *El motor es intercambiable: la SPEC fija el contrato, no el proveedor (evita lock-in cuando cambie el líder del mercado).*

### C7 · Integración de marca (no negociable)
Fondos negro/oscuro o blanco/neutro — **nunca color de fondo**. Azul `#1E9BF0` (highlight `#5BC3FF`) resalta; Rosita `#CA3BAE` acción; teal dato. Manrope + Public Sans. Símbolo de triángulos. Acento por nivel (N1 azul · N2 índigo · N3 cyan · N4 rosita). En IA: pasar la paleta HEX y pedir "sin texto" cuando el texto lo pone el código.

**Menú de formatos elegible por encargo (ratificado 2026-07-23):** Carrusel → Negro / Blanco / Híbrido / Multicolor (negro+azul+rosita, siempre abre y cierra en negro). Imagen única → Negro / Blanco / Color específico (declarado, no default).

**Tipografía y contraste (ratificado 2026-07-23):** texto pequeño 2-3x más grande que el uso previo (piso ~26-30px en canvas 1080px). Fondo oscuro → texto blanco/casi-blanco puro. Fondo claro → negro/gris muy oscuro. Nunca grises medios para texto de lectura. Sin viudas (última línea nunca termina en palabra suelta). Bloque de marca personal (cuando aplique, ej. Victor) más grande, con tagline y crédito de autor.

### C8 · Gobernanza WORX
Naming `TIPO-ENTIDAD-Proyecto-Nombre-vNN`; paquetes bajo `PB-DEMANDGEN-EmpowerLabs/` o el banco del producto. Tripleta: Owner Victor · Sherpa `/ux-diseno` · Ratificador Paloma (brand) / Victor (L3+). Gate G0 antes de producir. Cada dato con fuente (Vault-First + honestidad de datos).

### C9 · QA gates (antes de entregar)
1. **Marca:** ningún fondo de color (salvo color específico declarado por encargo); azul solo resalta; símbolo intacto; tipografía correcta.
2. **Datos:** cada número tiene fuente citada o está marcado como pendiente (nunca inventar).
3. **Texto:** ortografía, contraste blanco/negro duro según fondo, sin viudas, sin superlativos vacíos (voz de la casa).
4. **Formato:** dimensiones correctas por canal; export nítido (2×); texto pequeño ≥2-3x más grande que el uso previo.

### C10 · Loop, room de producción y ajustes (agregado 2026-07-23)
- **Loop Contract:** `DC-EL-LoopXVIS-LoopContract-v01` — formaliza el ciclo brief→producción→QA→revisión→ajustes→VoBo→export.
- **Room de producción:** se abre con `TP-EL-VIS-RoomProduccion-v01` (input MD de propuesta + indicaciones de formato → output HTML).
- **Ajustes:** vía room de revisión con comentarios (`TPL-EL-VIS-RevisionComentarios-v01`) — un segundo Sherpa/persona anota, `/ux-diseno` aplica y re-entrega `-v02`. Nadie edita código directamente.

---

## PARTE D · Ejemplo (corramos uno)
Producto de prueba: **EmpowerScan**. En este mismo room produzco la **Infografía Técnica** por render de código (carril 🅰, prueba de concepto real) y dejo listos los **prompts de IA** (carril 🅱) para la ilustración y el meme. Ver el archivo entregado junto a esta spec.

---

## NEXT
- [ ] Ratificar esta SPEC (Victor L3+ · Paloma brand).
- [ ] `/sx-consejero` con la receta §C2 → `/sx-fabricador-usherpax` para forjar **`/ux-diseno`**.
- [ ] Destilar `BC-Infografia-BestPractices-2026` (sk-bcdistiller).
- [ ] Construir las 4 plantillas maestras (Fase 1) + el motor de render (Fase 2).
- [ ] Elegir y conectar el motor IA por API (Fase 3): recomendado FLUX.2 Pro + Nano Banana Pro.

## Fuentes (investigación jul-2026)
- imagine.art — Ideogram 4.0 vs Nano Banana Pro vs GPT Image 2 · buildmvpfast — Best AI Image Generators July 2026 · teamday.ai — Best AI Image Models 2026 (ranked by job).

*SPEC-EL-UX-FactoriaVisual-v01 · IB-EL-EmpowerLabs/SVA-EL-UltraSherpas · 2026-07-20 · Owner: Victor · Sherpa: Jay (Fable)*