Arquitectura de referencia
Patrones probados para integrar la IA con la operación del negocio.
01
Color
Tokens semánticos del tema; se adaptan automáticamente al modo claro y oscuro.
Marca y estado
primary
bg-primary
secondary
bg-secondary
accent
bg-accent
success
bg-success
warning
bg-warning
danger
bg-danger
Superficies
background
bg-background
surface
bg-surface
surface-elevated
bg-surface-elevated
border
bg-border
Texto
text-foregroundTexto principal
text-muted-foregroundTexto secundario
text-primaryAcento de marca
text-accentAcento secundario
02
Tipografía
Escala de encabezados y tamaños de párrafo. Inter para texto, Geist para etiquetas técnicas.
h1
Arquitectura para IA
h2
Arquitectura para IA
h3
Arquitectura para IA
h4
Arquitectura para IA
h5
Arquitectura para IA
h6
Arquitectura para IA
size="lg"
Construimos la arquitectura que integra la IA con el negocio de forma segura y medible.
size="default"
Construimos la arquitectura que integra la IA con el negocio de forma segura y medible.
size="sm"
Construimos la arquitectura que integra la IA con el negocio de forma segura y medible.
size="xs"
Construimos la arquitectura que integra la IA con el negocio de forma segura y medible.
Sistema de diseño
Etiqueta de sección
Se usa sobre los títulos (ver SectionHeader).
03
Fundamentos
Piezas de bajo nivel: superficies, métricas e íconos.
Superficie
Contenedor con borde, fondo y sombra sutil para agrupar contenido.
85%
Madurez
3.2x
ROI estimado
04
Primitivas comunes
Bloques de contenido reutilizables en todas las páginas.
DefaultSecondaryOutlineCustom
CríticaAltaAtenciónMediaMantener
Con íconoCon ícono
Sistema de diseño
Construí sobre un sistema coherente
Cada componente comparte los mismos tokens, tipografía y espaciado.
gap="sm"
gap="md"
gap="lg"
gap="xl"
cols=2
1
2
cols=3
1
2
3
cols=4
1
2
3
4
05
UI · shadcn / Base UI
Controles interactivos: probá hover, focus, selección y estados.
Probalo →
06
Layout
Estructura de página: Section aporta padding vertical y Container limita el ancho.
Contenido centrado (max-w-7xl)
Section agrega padding vertical (acá reducido para la demo)
07
Patrones compuestos
Componentes combinados tal como se usan en el sitio.
Método
De la evaluación a la arquitectura
Patrón típico: SectionHeader + Grid de FeatureCard.
Diagnóstico
Evaluación de madurez DAIMI en cinco dimensiones.
Arquitectura
Blueprint para integrar la IA con la operación.
Gobierno
Controles, seguridad y medición continua.
Captura
Formulario
Label + Input + Checkbox + Button.
08
Discovery
Componentes de la evaluación y del reporte ejecutivo, montados con datos de ejemplo.
Pregunta 13 de 2650%
Paso 4 de 580%
Paso 3 de 560%
Dimensión
Nivel de Madurez
Puntaje
Prioridad
Business Value & Sponsorship
Industrializando
82%
Mantener
Data Readiness & Operating Reality
Explorando
34%
Crítica
AI Platform & Delivery Capability
Construyendo Fundamentos
55%
Alta
Governance, Risk & Trust
Escalando
68%
Media
Talent, Adoption & Change
Escalando
74%
Media
Restricción Crítica para Escalar IA
Los datos no están listos para escalar la IA
Dimensión afectada: Data Readiness & Operating Reality
¿Qué impacto tiene en el negocio?
La organización opera con fuentes de datos fragmentadas y sin gobierno, lo que impide que los modelos pasen de pilotos a producción con confianza.
Los modelos se entrenan con datos inconsistentes y pierden precisión.
Cada iniciativa duplica el trabajo de limpieza e integración.
Crece la exposición regulatoria sin trazabilidad de datos.
Recomendación Inmediata: Fast-Track MVP
"Durante el primer mes recomendamos concentrar el esfuerzo en convertir los principales activos de información en datos consumibles para IA antes de iniciar nuevos desarrollos."
* Este Fast-Track reemplaza automáticamente las actividades de la Fase 1 en la hoja de ruta estándar. (Kill-Switch: )