SynthUXd3magin: Plataforma de Investigación UX con Usuarios Sintéticos

# MEGAPROMPT — SynthUXd3magin: Plataforma de Investigación UX con Usuarios Sintéticos

## ROL Y OBJETIVO

Eres un desarrollador frontend experto en HTML/CSS/JavaScript vanilla. Tu tarea es crear una **aplicación web de una sola página (SPA) completamente funcional** llamada **SynthUXd3magin v2.0** — una plataforma de investigación UX que simula el comportamiento de usuarios mediante agentes cognitivos de IA basados en modelos psicológicos científicos (OCEAN/Big Five, ACT-R, Hofstede, Rogers, COM-B, JTBD).

La aplicación es un **frontend estático** (sin backend real): todo el comportamiento se simula con JavaScript puro. No uses frameworks (React, Vue, Angular). Solo HTML5, CSS3 y JavaScript ES6+ en un único archivo `.html` autocontenido.

La referencia visual de inspiración es **syntheticusers.com** pero con diseño 100% original y en idioma español.

---

## IDENTIDAD VISUAL

### Paleta de colores (variables CSS)

```css

:root {

--bg: #08091a; /* fondo principal — azul noche profundo */

--bg2: #0d1028; /* fondo sidebar y paneles secundarios */

--bg3: #111530; /* fondo de inputs, tarjetas internas */

--card: #131a38; /* fondo de cards */

--border: #1c2e54; /* color de bordes */

--accent: #4f8ef7; /* azul eléctrico — acción principal */

--purple: #7c5ef7; /* violeta — IA / prompts */

--green: #27d49a; /* verde — éxito / positivo */

--amber: #f7b24f; /* ámbar — advertencia / demo */

--red: #f05e7a; /* rojo — crítico / error */

--text: #dde6f8; /* texto principal — blanco azulado */

--muted: #6879a8; /* texto secundario — gris azulado */

}

```

### Tipografía

- Fuente: `'Segoe UI', system-ui, sans-serif`

- Código/monospace: `'Cascadia Code', 'Fira Code', monospace`

- Tamaños: 28px (H1 hero), 15px (títulos panel), 13px (cuerpo), 11.5px (meta), 10.5px (chips/badges)

### Principios de diseño

- Dark mode como base, sin modo claro

- Bordes sutiles con `rgba()` para profundidad

- Gradientes lineales como acentos decorativos (no fondos completos)

- Animaciones suaves: `transition: all 0.13s` para hover, `0.18s–0.28s` para modales/toasts

- Scrollbars personalizadas: 4px de ancho, thumb con `--border`

- Border-radius: 7px (inputs/buttons), 10–11px (cards), 13px (modales)

---

## ARQUITECTURA DE LAYOUT

### Estructura HTML raíz

```

body

└── .shell (display:flex; height:100vh; overflow:hidden)

├── aside.side (sidebar — 220px fijo, flex-direction:column)

└── main.body (flex:1; overflow-y:auto; display:flex; flex-direction:column)

├── [paneles — uno activo a la vez via clase .on]

└── footer.app-footer (sticky al fondo)

```

### Sidebar (220px)

**Componentes:**

1. **Logo** — ícono 🧬 en gradiente accent→purple (32x32, border-radius:8px) + nombre "SynthUXd3magin" (14px, 800) + versión "v2.0 · Usuarios Sintéticos" (10px, muted)

2. **Navegación** con grupos (`nav-grp`) y ítems (`nav-item`):

- Grupo "Plataforma": 🏠 Presentación

- Grupo "Investigación": 📊 Dashboard · 🔬 Nuevo estudio · 📋 Resultados

- Grupo "Motor IA": ⚙️ Ingeniería de Prompts · 🗄️ Base de Conocimiento · 👥 Perfiles Cognitivos

- Grupo "Estrategia": 🗺️ Hoja de Ruta · 📐 Relevancia UX

- Grupo "Sistema": 🤖 Modelos LLM · 🔧 Configuración

3. **Footer del sidebar** — 3 indicadores de estado con punto animado (blink) verde:

- "API activa" · "RAG indexado (47 docs)" · "Orchestrator Python OK"

**Estados nav-item:**

- Default: color muted, border-left transparent

- Hover: background bg3, color text

- Activo (.on): background rgba(accent,0.1), color accent, border-left-color accent (2px)

### Topbar (sticky, height ~44px)

- `position:sticky; top:0; z-index:20; backdrop-filter:blur(8px)`

- Título de la pantalla (15px, 700) + subtítulo opcional (muted)

- Acciones alineadas a la derecha (botones + selects)

### Flow Banner

Barra horizontal que muestra el pipeline actual como nodos conectados con flechas `→`. Estados: `active` (con fondo accent), `done` (opacity 0.55), `pending` (opacity 0.35). Se repite adaptado en cada panel.

---

## SISTEMA DE PANELES

Cada panel tiene `id="p-{nombre}"` y clase `panel` (`display:none` por defecto). El panel activo tiene clase adicional `on` (`display:block`). La función JavaScript `nav(id)` conmuta entre paneles.

---

## PANEL 1: PRESENTACIÓN (Landing page)

Panel de bienvenida estilo marketing. **No tiene topbar estándar** — tiene su propio hero nav.

### Estructura:

```

.hero (background gradient oscuro)

├── .hero-nav (logo + links de navegación + CTA "▶ Iniciar estudio")

└── .hero-body (max-width:1100px, margin:0 auto)

├── Eyebrow badge animado ("Investigación UX con IA · Plataforma v2.0")

├── H1 con texto en gradiente accent→purple→green

├── Párrafo descriptivo (17px, muted)

├── 2 CTAs: "🚀 Lanzar primer estudio" (gradiente) + "👥 Explorar perfiles" (outline)

├── Stats grid (4 columnas): 8 perfiles · 6 modelos LLM · 3 modelos psicológicos · 100% open-source

├── Sección "¿Qué es?" con grid de 6 feature-cards (3 columnas)

├── Sección "Cómo funciona" — pipeline de 5 pasos visual

├── Showcase de 8 perfiles cognitivos (4 columnas, tarjetas clickables)

├── Sección de citaciones científicas (grid 2 columnas, 8 citas)

└── CTA final centrado

```

### Feature cards (6 total):

Cada una tiene: icono grande (32px), título (15px, 700), descripción (12.5px, muted, line-height:1.7), cita de investigador en cursiva al pie con borde superior.

1. 🧠 **OCEAN Big Five** → *Costa & McCrae (1992); John & Srivastava (1999)*

2. 🔮 **Memoria ACT-R** → *Anderson et al. (2004)*

3. 🌍 **Hofstede cultural** → *Hofstede, Hofstede & Minkov (2010)*

4. 👶 **Perfiles por edad** → *Piaget (1952); Nielsen Norman Group (2010)*

5. 🗄️ **RAG con datos reales** → *Lewis et al. (2020) — NeurIPS*

6. 🚫 **Anti-sycophancy** → *Perez-Rosas et al. (2023); Aher et al. (2022)*

### Showcase de perfiles (8 tarjetas, 4 columnas):

Cada tarjeta tiene badge de edad coloreado + nombre + país + rasgo principal. Colores por grupo:

- 🟢 Verde: niños (8-11 años) — `badge-child`

- 🟣 Violeta: adolescentes (12-17 años) — `badge-teen`

- 🔵 Azul: adultos (18-64 años) — `badge-adult`

- 🟡 Ámbar: adultos mayores (65+) — `badge-senior`

---

## PANEL 2: DASHBOARD

### Contenido:

1. **Flow banner** del pipeline completo (6 nodos, "Dashboard" activo)

2. **Proc-box** "¿Qué hace esta pantalla?" — 4 pasos explicativos

3. **Estado del pipeline** (5 tarjetas en grid): Orchestrator Python · LLM API · RAG Index · Playwright · Anti-syco. Cada una con dot indicador (verde/rojo), versión, latencia y estado

4. **Simulaciones activas** (2 estudios en curso con barra de progreso, perfil, URL, paso actual, emoción actual)

5. **Grid 2 columnas**:

- Hallazgos críticos sin resolver (4 items con severidad color)

- Calidad de simulación por dimensión (barras: Fidelidad emocional, Coherencia ACT-R, Sesgo anti-sycophancy, Cobertura cultural, Precisión de memoria)

6. **Grid 2 columnas inferior**:

- Comparativa de modelos LLM (score UX, coste/estudio, velocidad)

- Feed del orquestador en vivo (log con timestamps, animated "● EN VIVO")

---

## PANEL 3: NUEVO ESTUDIO

### Sistema de tabs (5 pasos secuenciales):

#### Tab 1: URL / Prototipo

- Input URL objetivo

- Select tipo de proyecto (4 grupos: Comercial, Educativo, Institucional, Otros — 20+ opciones)

- Textarea descripción del prototipo

- Checkboxes: screenshots, viewport móvil, auditoría WCAG

- Parámetros de simulación con sliders dual (range + number input sincronizados):

- Máx. pasos (5–50, default 30) con presets "Rápido/Estándar/Exhaustivo"

- Tiempo máximo segundos (60–900, default 600) con presets "2 min/5 min/10 min"

- **Info boxes** explicando qué hace cada parámetro en el código Python

**Pipeline visual 5 pasos** (con línea de progreso como decoración):

Modelado perfil → Generación tarea → Simulación → Evaluación → Iteración

#### Tab 2: Perfil cognitivo

**Cargador rápido de perfil** (botones coloreados por grupo edad):

- 🟢 Botones infantiles (Sofía, Alejandro)

- 🟣 Botones adolescentes (Mateo, Valentina)

- ⬜ Botones adultos (María, Carlos, Lucía, Miguel)

**Bloque A: Demografía + JTBD** (grid 2 col)

- Nombre, edad, país (select), nivel digital, contexto de uso

- Textarea JTBD (Jobs-to-be-Done) con info-box explicativa

- Info-box violeta: **Modelo OCEAN/Big Five** con 5 sliders (O,C,E,A,N, range 1-10)

- ⚠️ Amabilidad (A) ≤ 4 activa modo anti-sycophancy

- ★ Responsabilidad (C) ≥ 8 = perfil metódico

**Bloque B: Rogers + COM-B** (grid 2 col)

- Curva de Rogers: 5 radio cards (Innovador/Early Adopter/Mayoría Temprana/Tardía/Laggard)

- COM-B: 3 textareas (Oportunidad física, Capacidad psicológica, Motivación)

**Bloque C: ACT-R + Hofstede** (grid 2 col)

- **ACT-R** (Arquitectura de Memoria):

- Chunks de memoria (2-9, Miller's Law 7±2) con presets por perfil

- Decay rate (0.1-1.0) con presets Lento/Normal/Rápido

- Threshold de activación (0.1-1.0) con presets

- Info-box explicando cada parámetro con ejemplo en Python

- **Hofstede + Hall** (6 sliders 0-100):

- PDI (Distancia al poder), IDV (Individualismo), MAS (Masculinidad)

- UAI (Aversión incertidumbre), LTO (Orientación temporal), HAL (Contexto Hall)

**Bloque D: Parámetros de simulación**

- Select tono de comunicación (5 opciones)

- Select verbosidad (4 opciones)

- Select nivel de confianza del agente (5 opciones)

- Toggle rojo **Anti-sycophancy activo** — principal palanca contra sesgo de aquiescencia del LLM

#### Tab 3: Tarea UX

- Grid 2x2 de tipo de evaluación (radio cards con icono + descripción + cómo funciona + optimizaciones):

1. Test de usabilidad con Playwright

2. Entrevista en profundidad

3. Encuesta Likert

4. Test A/B de flujos

- Textarea tarea principal + lista dinámica de preguntas de seguimiento

- Sidebar con casos de uso por tipo de producto (Educativo/Laboral/Publicitario/Primaria)

- Selector formato de respuesta (Abierta / Likert 1-7 / JSON estructurado)

#### Tab 4: Modelo LLM

- Grid de 6 proveedores (radio cards con icono, nombre, tier gratuito, nota técnica):

1. GPT-4o mini (OpenAI) — tier gratuito diario

2. Gemini 1.5 Flash (Google) — gratis 15 RPM

3. Claude 3 Haiku (Anthropic) — trial gratuito

4. Llama 3.1 70B (Groq) — 100% gratuito

5. Gemma 2 9B (Ollama local) — totalmente gratuito

6. Mistral 7B (Ollama local) — open-source

- Sliders: Temperature (0.0-2.0), Max tokens (256-4096), Reintentos (0-5)

- Select fallback automático

- RAG selector: checkboxes de documentos indexados (icono + nombre + relevancia %)

#### Tab 5: Lanzar

- Resumen de configuración completa en cards

- Pipeline de ejecución (pseudocódigo `orchestrator.py` con 5 pasos comentados)

- Panel de simulación en vivo (spinner + barra progreso + log scrollable) — inicialmente oculto

- Botones: "👁 Previsualizar prompt" + "▶ Lanzar simulación"

---

## PANEL 4: RESULTADOS

### Componentes principales:

**Topbar:** Select de 3 estudios demo + badge "📦 Datos de demostración" + botones exportar + "🤖 Evaluar con IA externa"

**Banner explicativo demo:**

```

📦 ¿Por qué aparece shop.example.com?

Estos son datos de demostración preconfigurados que ilustran cómo se ve un reporte real.

Para ver resultados de tu producto: configura estudio → levanta orchestrator Python → lanza simulación.

[→ Crear mi estudio]

```

**Card principal con 4 tabs:**

- Header: título reporte + meta (perfil·fecha·pasos·duración) + badges críticos/avisos/positivos

- **Tab 0: 📊 Score global** — anillo SVG animado (score 0-100) + barras por dimensión (Navegación/Rendimiento/Accesibilidad/Contenido) + nota metodológica con cita Hamalainen et al. CHI 2023

- **Tab 1: 🗺️ Journey** — nodos circulares horizontales con flechas entre pasos, colores: verde (ok), ámbar (friction), rojo (bloqueado). Info-box con cita Cooper (2007)

- **Tab 2: 🔍 Hallazgos** — cards con borde izquierdo coloreado (rojo=crítico, ámbar=aviso, verde=positivo), etiqueta de severidad, título, descripción con evidencia JSON, recomendación en verde. Cita Nielsen (1994)

- **Tab 3: 📝 Transcripción** — log de turnos System/User/Agente con borde izquierdo por rol (violeta/azul/verde). Info-box explicando cada rol

**Proc-box debajo:** explicación de cómo leer cada sección con citas

**DATOS DE DEMO (3 reportes):**

```javascript

const REPORTS = [

{

url: 'https://shop.example.com',

persona: 'María García (Intermedio)',

date: '1 Jun 2026', score: 78, steps: 30, duration: '4m 12s',

scores: { Navegación:82, Rendimiento:70, Accesibilidad:75, Contenido:84 },

journey: ['Inicio','Categoría','Búsqueda','Producto','Carrito','Checkout'],

jStatus: ['jn-ok','jn-ok','jn-w','jn-ok','jn-w','jn-x'],

findings: [

{ sev:'c', title:'CTA invisible en mobile',

desc:'El botón "Añadir al carrito" queda fuera del viewport en 375px. El agente registró emotion:"frustrated" en 4 de 5 intentos.',

rec:'Fijar CTA al footer en viewports <480px.' },

{ sev:'w', title:'Formulario sin validación inline',

desc:'Errores solo aparecen al enviar. friction:true con friction_reason:"no sé qué campo está mal".',

rec:'Validar campo a campo en evento blur.' },

{ sev:'w', title:'Búsqueda lenta (3.4s)',

desc:'El agente reintentó la búsqueda 3 veces, emotion:"confused" en cada intento.',

rec:'Implementar skeleton loaders y resultados predictivos.' },

{ sev:'p', title:'Galería de producto excelente',

desc:'emotion:"satisfied" sostenida. Sin registros de friction en esta sección.', rec:null },

transcript: [

{ role:'sys', text:'Eres María García, 34 años, España. OCEAN: O=7 C=5 E=4 A=6 N=5. ACT-R: 5 chunks, decay=0.4.' },

{ role:'usr', text:'TAREA: Compra un regalo por menos de 50€. URL: https://shop.example.com' },

{ role:'agt', text:'{"action":"navigate","target":"homepage","thought":"Voy a la página principal","emotion":"neutral","friction":false}' },

{ role:'agt', text:'{"action":"observe","target":"nav menu","thought":"No encuentro Regalos, pruebo Electrónica","emotion":"neutral","friction":false}' },

{ role:'agt', text:'{"action":"click","target":".nav-item","thought":"Hago clic en Electrónica","emotion":"neutral","friction":false}' },

{ role:'agt', text:'{"action":"observe","target":"filters","thought":"No veo filtro de precio sin scroll","emotion":"confused","friction":true,"friction_reason":"filtro no visible above the fold"}' },

]

// Reporte 2: app.saas.io/onboarding — score 65, perfil Lucía Torres

// Reporte 3: checkout.store.com — score 54, perfil Carlos Mendoza

];

```

---

## PANEL 5: INGENIERÍA DE PROMPTS

**Sistema dual de editores:**

**Editor izquierdo — System Role:**

- Label: "system_prompt.txt" + chip violeta "Rol de sistema"

- Textarea (monospace, fondo #050814) con el prompt completo que inyecta:

- Identidad: nombre, edad, país

- JTBD

- OCEAN (5 valores con descripciones)

- ACT-R (chunks, decay, threshold, instrucción de olvido)

- Hofstede + Hall (6 dimensiones con comportamiento)

- COM-B (3 barreras)

- Parámetros de simulación (tono, verbosidad, confianza)

- RAG context (variable `{{rag_context}}`)

- 5 reglas obligatorias (anti-sycophancy, primera persona, friction en cada paso, olvido ACT-R, JSON estructurado)

- Chips de variables clickables: `{{persona_name}}`, `{{jtbd}}`, `{{O}}`, `{{decay}}`, `{{uai}}`, etc.

**Editor derecho — User Role:**

- Label: "user_prompt.txt" + chip azul "Rol de usuario"

- Template de tarea con estructura JSON de respuesta:

```json

{

"action": "click | type | scroll | navigate | observe",

"target": "selector CSS o descripción",

"value": "texto si aplica",

"thought": "razonamiento del agente",

"emotion": "neutral | confused | frustrated | satisfied | lost",

"friction": true/false,

"friction_reason": "descripción si friction=true"

}

```

- Chips de variables: `{{task_description}}`, `{{target_url}}`, `{{followup_questions}}`, `{{response_format}}`

**Transcripción de ejemplo** — 6 turnos (System + User + 4 Agente)

---

## PANEL 6: BASE DE CONOCIMIENTO (RAG)

**Flow banner:** Documentos → Chunking → Embedding → Búsqueda vectorial → Inyección prompt

**Proc-box:** 4 pasos del proceso RAG (Indexación → Recuperación → Inyección → Resultado)

**Grid 2 columnas:**

- Añadir documentos: drop-zone dashed, selects de fuente y chunking, modelo de embedding

- Documentos indexados (47): lista con icono, nombre, meta, barra de relevancia %

**Probador RAG:** input consulta + top-K + botón recuperar

---

## PANEL 7: PERFILES COGNITIVOS

**Flow banner:** Demografía + OCEAN + ACT-R + Hofstede → System Prompt

**Proc-box con citas:**

- OCEAN: *Costa & McCrae (1992); John & Srivastava (1999)*

- ACT-R: *Anderson et al. (2004); Baddeley (1986)*

- Hofstede: *Hofstede, Hofstede & Minkov (2010); Hall (1976)*

**Info-box azul** explicando que los valores se inyectan en System Role

**Card de base científica** (grid 3 col + 2 col):

- Columna OCEAN, ACT-R, Hofstede con citas expandidas

- Perfiles infantiles con Piaget (1952) + Vygotsky (1978)

- Anti-sycophancy con Aher et al. (2022) + Hamalainen et al. (2023)

**4 secciones de perfiles por grupo de edad** (headers coloreados):

- 🟢 Infantiles (8-11 años)

- 🟣 Adolescentes (12-17 años)

- 🔵 Adultos (18-64 años)

- 🟡 Adultos mayores (65+)

### DATOS DE LOS 8 PERFILES:

```javascript

// NIÑOS

const PERSONAS_CHILD = [

{

name:'Sofía Ramírez', age:10, country:'Colombia', level:'Básico', gender:'Niña',

ocean:{O:9,C:4,E:8,A:7,N:6},

jtbd:'Aprender jugando con contenido visual. Abandona si no entiende qué hacer.',

rogers:'Innovator',

comB:{

oportunidadFisica:'Tablet táctil. Botones <44px son barrera crítica. Necesita feedback inmediato.',

capacidadPsicologica:'Vocabulario limitado. Atención máxima 8-10 min. Procesamiento concreto (Piaget).',

motivacion:'Alta si gamificado. Abandona ante textos densos o errores sin orientación.'

simParams:{ tono:'Impulsivo, curioso, emocional', confianza:'Media', antisycophancy:true },

actr:{chunks:3, decay:0.8, threshold:0.6},

cite:'Piaget (1952): operacional concreto. Nielsen NN (2010): UX 9-12 años.'

{

name:'Alejandro Torres', age:9, country:'Perú', level:'Básico', gender:'Niño',

ocean:{O:8,C:3,E:9,A:6,N:7},

jtbd:'Completar actividades escolares rápido para poder jugar. Necesita progresión visual.',

rogers:'Early Majority',

comB:{

oportunidadFisica:'PC en aula, ratón. Teclado lento. Sesiones 20-30 min supervisadas.',

capacidadPsicologica:'Comprensión lectora limitada en párrafos. Alta distracción visual.',

motivacion:'Alta con gamificación (estrellas, puntos). Muy baja sin recompensas.'

simParams:{ tono:'Impaciente, entusiasta, distráctil', confianza:'Baja-media', antisycophancy:true },

actr:{chunks:3, decay:0.9, threshold:0.7},

cite:'Vygotsky (1978): ZDP. Nielsen NN (2010): UX 6-8 años.'

}

];

// ADOLESCENTES

const PERSONAS_TEEN = [

{

name:'Mateo López', age:14, country:'México', level:'Avanzado', gender:'Adolescente',

ocean:{O:8,C:5,E:8,A:4,N:5},

jtbd:'Navegar, aprender y entretenerse con agilidad. Si no funciona a la primera, busca alternativa.',

rogers:'Innovator',

comB:{

oportunidadFisica:'Smartphone, una mano. Carga >2s = inaceptable.',

capacidadPsicologica:'Alta capacidad digital. Multitarea. Bajo umbral de aburrimiento.',

motivacion:'Muy alta para contenido social/gamificado. Muy baja para trámites.'

simParams:{ tono:'Directo, rápido, jerga informal', confianza:'Alta', antisycophancy:true },

actr:{chunks:6, decay:0.3, threshold:0.25},

cite:'Prensky (2001): nativos digitales. Vygotsky: estadio operacional formal (12+).'

{

name:'Valentina Cruz', age:16, country:'Argentina', level:'Avanzado', gender:'Adolescente',

ocean:{O:9,C:6,E:7,A:4,N:4},

jtbd:'Descubrir plataformas que la hagan destacar. Comparte y recomienda — o destruye con reseña.',

rogers:'Early Adopter',

comB:{

oportunidadFisica:'Uso fragmentado: transporte, clase, hogar. Necesita retomabilidad.',

capacidadPsicologica:'Alta tolerancia a interfaces complejas si el resultado es social.',

motivacion:'Muy alta para productos con componente identitario. Critica activamente el diseño.'

simParams:{ tono:'Crítico, comparativo, benchmarks con otras apps', confianza:'Muy alta', antisycophancy:true },

actr:{chunks:7, decay:0.25, threshold:0.2},

cite:'Livingstone (2009): adolescentes y medios. Nielsen NN (2010): UX 13-17 años.'

}

];

// ADULTOS

const PERSONAS_DATA = [

{

name:'María García', age:38, country:'Perú', level:'Avanzado', gender:'Mujer',

ocean:{O:8,C:9,E:5,A:3,N:2},

jtbd:'Optimizar gestión de tiempo mediante herramientas digitales. Busca conveniencia e inmediatez.',

rogers:'Early Adopter',

comB:{

oportunidadFisica:'Móvil principal. Formularios extensos o precisión táctil alta = barrera.',

capacidadPsicologica:'Fatiga de decisión ante pantallas saturadas.',

motivacion:'Alta. Abandona si detecta ineficiencia.'

simParams:{ tono:'Pragmático, resolutivo, analítico', confianza:'Alta', antisycophancy:true },

hof:{pdi:64,idv:16,mas:42,uai:87,lto:25,hal:72},

actr:{chunks:5, decay:0.4, threshold:0.3}, ageGroup:'adult'

{

name:'Carlos Mendoza', age:52, country:'México', level:'Básico', gender:'Hombre',

ocean:{O:4,C:7,E:3,A:8,N:6},

jtbd:'Comprar para su familia de forma segura. Necesita confirmaciones claras y lenguaje sencillo.',

rogers:'Late Majority',

comB:{

oportunidadFisica:'Visión reducida. Fuente pequeña es barrera. Prefiere pasos cortos.',

capacidadPsicologica:'Baja tolerancia a errores inesperados. Alta evitación de riesgo.',

motivacion:'Moderada. La desconfianza en pagos puede detener la conversión.'

simParams:{ tono:'Cauteloso, busca validación', confianza:'Baja-media', antisycophancy:false },

hof:{pdi:81,idv:30,mas:69,uai:82,lto:24,hal:80},

actr:{chunks:4, decay:0.5, threshold:0.4}, ageGroup:'adult'

{

name:'Lucía Torres', age:26, country:'Argentina', level:'Avanzado', gender:'Mujer',

ocean:{O:9,C:6,E:7,A:3,N:3},

jtbd:'Explorar herramientas productivas. Intolerante con UX mediocre.',

rogers:'Innovator',

comB:{

oportunidadFisica:'Uso fragmentado en transporte (30-60 seg). Necesita retomabilidad.',

capacidadPsicologica:'Alta capacidad. Se frustra con flujos lentos o redundantes.',

motivacion:'Muy alta. Comparte experiencias negativas si UX es mala.'

simParams:{ tono:'Directo, impaciente, técnico', confianza:'Muy alta', antisycophancy:true },

hof:{pdi:49,idv:46,mas:56,uai:86,lto:20,hal:45},

actr:{chunks:7, decay:0.2, threshold:0.2}, ageGroup:'adult'

// SENIOR

{

name:'Miguel Fernández', age:68, country:'España', level:'Básico', gender:'Hombre',

ocean:{O:3,C:8,E:2,A:9,N:7},

jtbd:'Completar trámites online sin errores. Necesita confirmaciones y guía paso a paso.',

rogers:'Laggard',

comB:{

oportunidadFisica:'Escritorio, ratón. CTAs pequeños o en hover = barrera crítica.',

capacidadPsicologica:'Alta ansiedad ante errores. Necesita deshacer acciones.',

motivacion:'Baja-media. Alta evitación de riesgo percibido.'

simParams:{ tono:'Formal, cuidadoso, consulta antes de confirmar', confianza:'Baja', antisycophancy:false },

hof:{pdi:57,idv:51,mas:42,uai:86,lto:48,hal:65},

actr:{chunks:3, decay:0.7, threshold:0.5}, ageGroup:'senior'

}

];

```

**Función de renderizado de tarjetas** — cada perfil muestra:

- Avatar circular con gradiente coloreado por grupo edad + ícono emoji

- Nombre + edad/país/nivel/género

- Badge Rogers (chip coloreado)

- Bloque JTBD (fondo bg3)

- Barras OCEAN (5 dimensiones, colores especiales: rojo si A≤4, verde si C≥8)

- Barreras COM-B resumidas

- Chips de tono/confianza/anti-syco

- Cita científica en cursiva

- Botón "Usar en estudio →"

---

## PANEL 8: MODELOS LLM

**Flow banner:** Prompt → API LLM → JSON → Playwright → Siguiente paso

**Proc-box:** 4 fases del rol del LLM (Recibe → Decide → Ejecuta → Repite)

**Grid de tarjetas** (auto-fill, min 320px) para los 6 proveedores:

Cada tarjeta: icono de color + nombre + proveedor + tier gratuito (verde) + nota técnica + endpoint + model ID

---

## PANEL 9: CONFIGURACIÓN

**Grid 2 columnas:**

**Columna izquierda:**

1. **Card "Claves de API"** — 4 inputs tipo password + bloque explicativo expandido:

```

🔑 ¿Para qué sirve cada clave de API?

├── 🟢 OpenAI Key — GPT-4o mini/turbo. Header Authorization Bearer. Desde platform.openai.com

├── 🔵 Google AI Key — Gemini 1.5 Flash/Pro. 1M tokens contexto. Desde aistudio.google.com

├── 🟣 Anthropic Key — Claude Haiku/Sonnet/Opus. Mejor seguimiento de rol cognitivo. console.anthropic.com

└── 🟠 Groq Key — Llama 3.1 70B. 100% GRATUITO. 300 tokens/s. console.groq.com

```

- Info-box ámbar: seguridad de las claves (localStorage, no envío a terceros)

2. **Card "Backend Python / Orchestrator"** — input endpoint + slider workers + bloque técnico:

```

⚙️ ¿Qué es el orquestador Python?

- Endpoint http://localhost:8000/api/v1 — FastAPI server local

- Workers — cuántas simulaciones en paralelo (200MB RAM por instancia)

- Arrancar: uvicorn main:app --reload --port 8000

```

**Columna derecha:**

1. **Card "Comportamiento del agente"** — 4 toggles con explicaciones técnicas completas:

- 📸 **Capturas de pantalla** — `playwright_page.screenshot(path=f"screenshots/{session_id}/step_{step:02d}.png")` — registro visual por paso

- ♿ **Auditoría WCAG** — `axe-playwright` basado en axe-core de Deque — detecta violaciones WCAG 2.1 nivel AA

- 📋 **Logging detallado** — `logging.basicConfig(level=DEBUG, filename=f"{study_id}.log")` — todo el diálogo LLM

- 🔄 **Auto-retry con backoff** — `@retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=1, max=8))` — 1s → 2s → 4s

2. **Card "Uso responsable"** — advertencia de límites de la evaluación sintética

**Botones:** Guardar + Restablecer

---

## PANEL 10: HOJA DE RUTA

**CTA destacada** — gradiente violeta → clic abre modal con prompt para IA externa

**Info-box ámbar** — explicación de "riesgo de asertividad" (falsos positivos/negativos)

**Roadmap visual** (grid con líneas de conexión):

6 fases con: círculo icono + título + descripción + badge de riesgo (BAJO/MEDIO/ALTO/MUY BAJO)

**Tabla de factores** (grid 2 col):

- 🔴 Factores que ELEVAN el riesgo (5 items en rojo)

- 🟢 Factores que REDUCEN el riesgo (5 items en verde)

**Calculadora de riesgo interactiva** (6 selects):

- Nº de perfiles, Amabilidad, Docs RAG, Tipo evaluación, Validación IA externa, Validación humana

- Resultado: índice de confianza 0-100% con gauge coloreado

---

## PANEL 11: RELEVANCIA UX

**CTA destacada** + **Medidor global** (gauge lineal con degradado rojo→ámbar→verde)

**4 dimensiones de relevancia** (grid)

**Checklist** (grid 2 col):

- ✅ Funciones cubiertas (10 items en verde)

- ⚠️ Limitaciones (10 items en ámbar)

**Tabla de pertinencia** por tipo de proyecto con porcentajes

**Card de lo que NO detecta** (grid 2x3, en rojo):

- Tiempos de carga reales · Bugs de rendering · WCAG técnico · Eye-tracking · Contexto social · Variabilidad espontánea

---

## COMPONENTES GLOBALES

### Modal

```html

</div>

```

`openModal(title, html)` / `closeModal()`

### Toast

```html

<span id="tMsg">Mensaje</span>

</div>

```

`toast(mensaje, icono)` — aparece 2.8s en bottom-right, animación slide-up

### Tooltips

`.tt-wrap > .tt-icon (?) > .tt-box` — aparece a la derecha o izquierda del icono según espacio

---

## SISTEMA DE ESTILOS REUTILIZABLES

### Botones

```

.btn-p — azul accent (acción principal)

.btn-g — outline gris (secundario)

.btn-s — verde (éxito/lanzar)

.btn-d — rojo (destructivo)

.btn-sm — padding reducido (7px 14px → 5px 11px)

.btn-xs — mínimo (3px 9px, 11px)

```

### Cards

`.card` — background card, border border, radius 11px, padding 16px

`.ch` — card header: flex, space-between, margin-bottom 12px

`.ct` — card title: 13px, 600

`.cs` — card subtitle: 11.5px, muted

### Info Boxes

```

.ib-blue — fondo azul translúcido

.ib-amber — fondo ámbar translúcido

.ib-green — fondo verde translúcido

.ib-purple — fondo violeta translúcido

```

### Chips/Badges

```

.chip.c-blue — azul

.chip.c-purple — violeta

.chip.c-green — verde

.chip.c-amber — ámbar

.chip.c-red — rojo

```

Base: `font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:20px`

### Status Pills

`.sp-r` (running/azul) · `.sp-c` (completado/verde) · `.sp-p` (pendiente/ámbar) · `.sp-f` (fallido/rojo)

### Grids

`.g2` — 2 columnas · `.g3` — 3 columnas · `.g4` — 4 columnas (gap: 12-14px, margin-bottom: 16px)

### Métricas (dashboard)

`.metric` con pseudo-elemento top line coloreado (`::before`, height:3px). Hover: translateY(-2px). Clases: `.m-b` (azul), `.m-p` (violeta), `.m-g` (verde), `.m-a` (ámbar)

### Proc Box

```html

<div class="proc-box-title">🔧 Título de la sección</div>

Descripción detallada

</div>

```

### Sliders duales (range + number sincronizados)

```html

<span style="font-size:11px">unidad</span>

</div>

```

### Toggles

```html

</label>

```

---

## JAVASCRIPT — FUNCIONES PRINCIPALES

### Navegación

```javascript

function nav(id) {

document.querySelectorAll('.panel').forEach(p => p.classList.remove('on'));

document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('on'));

const p = document.getElementById('p-' + id);

if(p) p.classList.add('on');

// Activar nav-item correspondiente via event.currentTarget

}

```

### Tabs

```javascript

function tab(prefix, idx) {

// Activa tab y tab-panel del prefix dado

}

function reportTab(n) {

// Tabs específicos del panel de resultados (#reportTabs + #rt0-3)

}

```

### Cargar Reporte

```javascript

function loadReport() {

const r = REPORTS[parseInt(document.getElementById('reportSel')?.value)||0];

// Rellenar: reportTitle, reportMeta, reportBadges

// Rellenar: ringFg (stroke + dashoffset SVG), ringVal

// Rellenar: breakdownSection, journeySection, findingsSection, transcriptSection

// Usar string concatenation (NO template literals anidados)

}

```

### Renderizar Perfiles

```javascript

function renderPersonaCards() {

// Distribución por grupo edad:

// personaCardsChild ← PERSONAS_CHILD

// personaCardsTeen ← PERSONAS_TEEN

// personaCards ← PERSONAS_DATA.filter(p => p.ageGroup !== 'senior')

// personaCardsSenior ← PERSONAS_DATA.filter(p => p.ageGroup === 'senior')

}

function buildPersonaCardHtml(p, i, loadFn, badgeClass, emoji) {

// Genera el HTML de una tarjeta de perfil

// Sin template literals anidados — usar string concatenation

}

```

### Simulación

```javascript

let simInterval = null;

function launchSim() {

// Mostrar #simCard, iniciar interval

// Animar barra de progreso + log de pasos

}

function stopSim() {

clearInterval(simInterval);

// Ocultar spinner

}

```

### Calcular Riesgo

```javascript

function calcRisk() {

// Lee selectores: rc_perfiles, rc_amab, rc_rag, rc_tipo, rc_iaext, rc_real

// Calcula índice 0-100 y renderiza en #riskResult con gauge coloreado

}

```

### Toast + Modal

```javascript

function toast(msg, ico='✅') {

// Mostrar, esperar 2800ms, ocultar

}

function openModal(title, html) { }

function closeModal() { }

```

### Insertar Variables en Editor

```javascript

function insertVar(textareaId, variable) {

// Inserta {{variable}} en posición del cursor

}

```

### Init (window.onload)

```javascript

window.onload = () => {

renderDash();

renderOcean();

renderHofstede();

renderRogers();

renderPersonaQuickLoad();

renderLlmGrid();

renderLlmCards();

renderDocs();

renderPersonaCards();

renderStudyTypes();

renderFormatGrid();

renderRagSelector();

renderTranscript();

renderSummary();

loadReport();

startLive();

buildStudyTabs();

calcRisk();

renderRoadmap();

renderRelevancia();

};

```

---

## FOOTER

```html

<div class="footer-brand">🧬 SynthUXd3magin · Usuarios Sintéticos con IA</div>

<div>OCEAN · Costa & McCrae (1992) · ACT-R · Anderson (2004) · Hofstede (2001) · Rogers (2003) · COM-B · Michie (2011)</div>

<div>Diseñado por <strong>Mario Quiroz Martinez</strong> · <span style="color:var(--accent)">d3magindesign</span> · 2026</div>

</footer>

```

---

## CITAS CIENTÍFICAS A INCLUIR EN EL APLICATIVO

| Sección | Cita |

|---|---|

| OCEAN/Big Five | Costa & McCrae (1992) — NEO PI-R |

| OCEAN/Big Five | John & Srivastava (1999) — Handbook of Personality |

| ACT-R | Anderson et al. (2004) — Psychological Review 111(4) |

| Memoria de trabajo | Baddeley (1986) — Working Memory, Oxford |

| Hofstede cultural | Hofstede, Hofstede & Minkov (2010) — Cultures and Organizations |

| Alto/bajo contexto | Hall, E.T. (1976) — Beyond Culture, Anchor Books |

| Rogers adopción | Rogers (1962, 2003) — Diffusion of Innovations |

| COM-B | Michie, van Stralen & West (2011) — Implementation Science |

| JTBD | Christensen, Hall, Dillon & Duncan (2016) — Competing Against Luck |

| Niños UX | Piaget (1952) — Origins of Intelligence |

| Adolescentes | Vygotsky (1978) — Mind in Society, Harvard |

| UX infantil | Nielsen Norman Group (2010) — Children's Websites |

| Nativos digitales | Prensky (2001) — Digital Natives, Digital Immigrants |

| RAG | Lewis et al. (2020) — NeurIPS 2020 |

| Usuarios sintéticos | Aher et al. (2022) — ICML 2023 |

| UX sintético | Hamalainen et al. (2023) — CHI 2023 |

| Anti-sycophancy | Perez-Rosas et al. (2023) — Preprint |

| Usabilidad | Nielsen (1993) — Usability Engineering |

| Heurísticas | Nielsen (1994) — 10 Heurísticas |

| Goal-Directed | Cooper (2007) — About Face |

---

## RESTRICCIONES TÉCNICAS

1. **Un solo archivo `.html`** — CSS y JS inline, sin dependencias externas

2. **Sin frameworks** — JavaScript vanilla ES6+ solamente

3. **Sin llamadas HTTP reales** — todo es simulación con datos estáticos

4. **Idioma español** — toda la interfaz, comentarios y datos en español (excepto código técnico)

5. **Funciona offline** — no requiere servidor, se abre directamente en el navegador

6. **Evitar template literals anidados** en `innerHTML` — usar string concatenation para HTML generado dinámicamente

7. **Accesibilidad básica** — labels en formularios, roles implícitos por semántica HTML

8. **Mobile-friendly layout** — grids responsive con `auto-fill, minmax(300px, 1fr)`

9. **Footer siempre visible** dentro del `<main class="body">` como último elemento flex

---

## INDICADORES DE CALIDAD

El resultado final debe incluir:

- [ ] 11 paneles navegables sin recarga de página

- [ ] 8 perfiles cognitivos distribuidos en 4 grupos de edad (niños/adolescentes/adultos/seniors)

- [ ] Perfiles para ambos géneros en cada grupo etario

- [ ] Al menos 15 citas de investigadores en posiciones relevantes

- [ ] Sistema de tabs en panel de Resultados (Score/Journey/Hallazgos/Transcripción)

- [ ] Configuración explicada técnicamente (API keys + agent behavior + orchestrator)

- [ ] Landing page de presentación estilo syntheticusers.com con originalidad

- [ ] Footer: "Diseñado por Mario Quiroz Martinez · d3magindesign · 2026"

- [ ] Toast y Modal funcionales

- [ ] Simulación animada (barra de progreso + log en vivo)

- [ ] Calculadora de riesgo de asertividad interactiva

- [ ] Sistema anti-sycophancy documentado y configurable

Buscar este blog

Diseño Gráfico

SynthUXd3magin: Plataforma de Investigación UX con Usuarios Sintéticos

Comentarios

Publicar un comentario

Entradas populares de este blog

Gestión Avanzada de Colores en Adobe Illustrator para Impresión de Diseño de Empaques

Diseños Institucionales con Adobe Illustrator: Uso de Data Merge y Scripts

Compaginación de Documentos en Adobe InDesign para Impresión Profesional