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

### C8 · Gobernanza WORX
Naming `TIPO-ENTIDAD-Proyecto-Nombre-vNN`; paquetes bajo `PB-DEMANDGEN-EmpowerLabs/` o el banco del producto. Tripleta: Owner Victor · Sherpa ux-Quetzal · 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; 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 AA, sin superlativos vacíos (voz de la casa).
4. **Formato:** dimensiones correctas por canal; export nítido (2×).

---

## 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-Quetzal**.
- [ ] 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)*