Saltar al contenido principal

Curso completo

Desarrollador Frontend + IA

Interfaces de IA, streaming UX, aprobaciones y UI generativa

Ruta para desarrolladores frontend sobre chat UI, streaming, estado, human-in-the-loop, accesibilidad, seguridad del contexto del navegador y AI UX en producción.

Termina el curso con algo más que una interfaz de chat: construye un paquete de evidencias de producción para una interfaz de IA con máquina de estados explícita para streaming, renderizado guiado por esquema, citas, límites de aprobación, actualizaciones de estado accesibles, pruebas adversariales, telemetría de calidad y rollback verificado.

0%0/10 lecciones

El progreso se guarda localmente en tu navegador.

8–14 semanas3 módulos10 lecciones2 evaluaciones

Sistema operativo de estudio

Cómo completar el curso y conservar un resultado real

1. Diseñar estados antes que componentes

Define primero idle, submitting, streaming, validating, completed, cancelled, retryable error y terminal error. Botones, spinners y texto de respuesta deben proyectar un estado controlado del sistema, no ocultar lógica entre varios flags booleanos.

2. Separar preview de resultado validado

Un stream parcial mejora la sensación de velocidad, pero no es un resultado final de dominio. Renderiza texto no confiable de forma segura y muestra salida estructurada, citas y acciones propuestas como confirmadas solo tras validación de esquema y de aplicación.

3. Probar sin ratón ni magia

Ejecuta cada lab con navegación solo por teclado, anuncios de estado para lector de pantalla, red lenta, cancelación, payload malformado, eventos duplicados y contenido con prompt injection. Verifica estado observable de UI y side effects, no solo una captura bonita.

4. Capturar evidencia UX

Registra traces de transición de estado, auditorías de accesibilidad, recuperación de errores, apertura de citas, decisiones de aprobación, tiempo hasta el primer feedback útil y finalización de tareas. La mediana de latencia no muestra por sí sola si el usuario entendió el estado y mantuvo el control.

Reglas del curso

No basta con leer: hay que demostrarlo

  • Streaming es un ciclo de transporte, no permiso para mostrar output parcial como resultado confirmado.
  • Generative UI renderiza un esquema allowlisted; el modelo no entrega código arbitrario de componentes, HTML ni autoridad.
  • Una aprobación sin acción, objetivo, consecuencia y ruta de rechazo claros es teatro de consentimiento, no control humano.
  • La accesibilidad se prueba en transiciones, errores y recuperación, no solo con un scan de la pantalla final.
  • Tras un incidente UX o de seguridad en producción, el trace mínimo de interacción se convierte en caso permanente de regresión.

Módulo 1

Núcleo común de IA

Base para una interacción controlada y verificable con sistemas de IA.

ResultadoEl desarrollador comprende los límites de los modelos y puede verificar resultados generados por IA.

  1. Alfabetización en IA y límites de los modelos

    Principal

    Capacidades, alucinaciones, límites de contexto, privacidad y uso responsable.

    Material →

  2. Ingeniería de prompts y contexto

    Principal

    Instrucciones, ejemplos, restricciones, contexto y verificación de resultados.

    Prerrequisitos: Alfabetización en IA y límites de los modelos

    Material →

  3. Salidas estructuradas y evaluación

    Principal

    Esquemas de respuesta, checks deterministas, casos de prueba y criterios de aceptación.

    Prerrequisitos: Ingeniería de prompts y contexto

    Material →Recurso →

Checkpoint después del módulo

Baseline de interacción confiable

  • ✓ los límites de modelo, privacidad y autoridad se explican en el flow
  • ✓ el resultado estructurado tiene esquema y fallback
  • ✓ las afirmaciones críticas se distinguen de la evidencia fuente

Laboratorio de transferencia de escenario

Transfer lab: contrato de confianza para una respuesta de IA

Toma una respuesta de IA que mezcle explicación, hechos y una acción recomendada. Separa texto del modelo, campos validados, citas, incertidumbre y propuesta de acción para que el usuario vea la procedencia y no confunda la propuesta con una acción ya ejecutada.

Entregable

Esquema de respuesta + wireflow anotado + reglas de contenido para loading, evidencia, incertidumbre, cita obsoleta, fallo de validación y fuente no disponible.

Salidas estructuradas →Citas RAG →AI UX →Roadmap Frontend Developer + AI →
  • ✓ un payload inválido no llega a un componente privilegiado
  • ✓ una cita abre una fuente concreta o muestra un estado explícito de no disponible
  • ✓ la incertidumbre no se oculta tras confianza decorativa
  • ✓ la propuesta de acción está separada visual y semánticamente de una acción completada

Módulo 2

Patrones de interacción con IA

Patrones de interfaz para sistemas probabilísticos e interacciones de IA de larga duración.

ResultadoLa interfaz comunica correctamente streaming, incertidumbre, aprobaciones y errores.

  1. Chat UI y respuestas en streaming

    Principal

    SSE, salida parcial, cancelación, reintentos y estados optimistas.

    Material →

  2. Human-in-the-loop e interfaz de aprobación

    Principal

    Confirmación de acciones, contexto de riesgo, deshacer y audit trail para acciones de IA con impacto.

    Material →

  3. Accesibilidad para interfaces de IA

    Recomendado

    Lectores de pantalla, gestión del foco, actualizaciones de estado y divulgación progresiva.

    Material →

  4. Proyecto: interfaz de asistente de IA para producción

    Proyectopráctica + evaluación

    Chat en streaming con citas, aprobaciones, estados de error y accesibilidad.

    Prerrequisitos: Chat UI y respuestas en streaming, Human-in-the-loop e interfaz de aprobación

    Material →Práctica →Evaluación →

Checkpoint después del módulo

Interfaz de IA resiliente

  • ✓ el ciclo de streaming tiene transiciones explícitas, cancelación y política de reintentos
  • ✓ la UI generada está limitada por un esquema allowlisted
  • ✓ la aprobación muestra acción, objetivo, consecuencia y permite rechazar sin side effect

Laboratorio de transferencia de escenario

Transfer lab: máquina de estados de streaming, cancelación y aprobación

Construye una interfaz de asistente para una respuesta larga y una acción de tool propuesta. Reproduce stream lento, desconexión, chunk duplicado, cancelación durante generación, payload final malformado y reapertura de aprobación tras cambiar el estado objetivo.

Entregable

UI ejecutable + tabla de transiciones + tests automáticos de componente/e2e + trace que conecte request, stream, validación, aprobación y resultado autoritativo de la acción.

Streaming y backpressure →Human in the loop →Contratos de tool calling →Práctica de interfaz AI de producción →
  • ✓ eventos tardíos o duplicados no devuelven la UI a un estado falso
  • ✓ cancelar detiene la presentación y tiene ruta de reconciliación backend definida
  • ✓ el output parcial no se marca completado antes de validación final
  • ✓ la aprobación vuelve a comprobar target y permiso justo antes del side effect

Módulo 3

Seguridad y UX de producción

Seguridad del navegador, confianza, explicabilidad, renderizado estructurado y telemetría de calidad.

ResultadoLa interfaz de IA dispone de acciones seguras, evidencia, fallbacks y calidad UX medible.

  1. Prompt injection y seguridad del navegador

    Principal

    Contenido no confiable, límites XSS, aprobaciones de herramientas y controles contra fuga de datos.

    Material →

  2. UI generativa y renderizado estructurado

    Principal

    Componentes guiados por esquemas, validación, renderizado restringido y fallbacks seguros.

    Material →

  3. Milestone: frontend de IA confiable

    Hitopráctica + evaluación

    Una experiencia de IA accesible, observable y segura, lista para revisión de producción.

    Prerrequisitos: Prompt injection y seguridad del navegador, UI generativa y renderizado estructurado

    Material →Práctica →Evaluación →

Checkpoint después del módulo

Gate UX de producción

  • ✓ los escenarios de teclado y lector de pantalla pasan acceptance checks
  • ✓ prompt injection y renderizado inseguro tienen casos de regresión
  • ✓ telemetría de calidad, éxito de tarea y UX puede detener rollout y activar rollback

Laboratorio de transferencia de escenario

Transfer lab: accesibilidad, UX adversarial y release gate

Prueba el flow final como interfaz probabilística, no como página estática. Añade teclado, lector de pantalla, reduced motion, viewport estrecho, fuente con prompt injection, URL insegura, citation mismatch, timeout y rollback a la versión anterior del esquema.

Entregable

Set de evaluación UX versionado + informe de accesibilidad + suite de regresión de seguridad + dashboard canary y runbook con criterios de stop, fallback y rollback.

Guardrails contra prompt injection →Evaluación de IA →Respuesta a incidentes de IA →Mapa de conocimiento →
  • ✓ los cambios de estado se anuncian sin robar foco
  • ✓ contenido no confiable del modelo o la fuente no crea markup ejecutable ni navegación insegura
  • ✓ la evaluación mide por separado finalización, recuperación, uso de evidencia y accesibilidad
  • ✓ incompatibilidad de esquema o regresión grave activa fallback o rollback documentado

Contrato capstone

Capstone: interfaz confiable de asistente IA en producción

Construye una interfaz IA end-to-end donde streaming, evidencia, renderizado estructurado y acciones con consecuencias tengan contratos explícitos. Demuestra que el usuario entiende el estado, puede verificar fuentes, cancelar o rechazar acciones, recuperarse de fallos y completar la tarea clave de forma accesible.

Qué entregar

  • — modelo de interacción/estado para request, stream, validación, aprobación, resultado de acción, cancelación, retry y estados terminales
  • — esquemas versionados de respuesta y generative UI con componentes allowlisted, renderizado seguro de texto/URL y fallback retrocompatible
  • — UX de evidencia con citas, estados de frescura/no disponibilidad, incertidumbre y separación entre propuesta del modelo y resultado autoritativo
  • — contrato de aprobación con actor, acción, target, parámetros, contexto de riesgo, expiración, recheck de permisos y evento de auditoría
  • — tests automatizados de accesibilidad, componente, e2e y adversariales para teclado, lector de pantalla, injection y eventos malformados, duplicados u obsoletos
  • — set de evaluación UX y telemetría para finalización, recuperación, fallo de validación, outcome de aprobación y tiempo hasta primer feedback útil
  • — runbook de canary, feature flag, fallback y rollback con checks de compatibilidad de esquema/versión

Cuándo puede considerarse terminado

  • ✓ cada estado visible corresponde a un estado definido del sistema y tiene nombre o anuncio accesible
  • ✓ output parcial o malformado no se convierte en hecho validado, componente o acción completada
  • ✓ el usuario puede revisar evidencia, rechazar con seguridad, cancelar el flow y recuperarse de un fallo reintentable
  • ✓ contenido no confiable no evita límites de rendering, navegación, permisos o aprobación
  • ✓ el release gate bloquea regresiones graves de accesibilidad, seguridad, integridad de evidencia o finalización de tarea
  • ✓ rollback recupera un envelope UI/esquema compatible sin perder audit trail de acciones incompletas

Práctica final y evaluación

El curso termina con un artefacto práctico y una rúbrica de aceptación. El resultado se considera completo después de cumplir los criterios de aceptación, no solo de leer los materiales.

Proyecto: interfaz de asistente de IA para producción →Milestone: frontend de IA confiable →Abrir roadmap →