Proceso

Cómo trabajo, paso a paso.

Trabajo con método para que una intuición pueda explicarse, probarse y mejorar sin perder su parte humana.

No sigo estas fases como una receta cerrada. Las uso para liberar atención: cuando lo repetible tiene una estructura, puedo dedicar más tiempo a escuchar, interpretar y tomar las decisiones que de verdad cambian el producto.

Cada fase deja una evidencia y una razón. Así puedo discutir el trabajo con otras personas, retomarlo meses después y reconocer con honestidad qué sabemos, qué estamos suponiendo y qué falta por comprobar.

Las seis fases

Encuadre

Definir el problema, la audiencia y la restricción real antes de dibujar nada.

Decide la persona: Problema, alcance, criterios de éxito y qué queda fuera.
Ejecuta la IA: Recopilación de contexto, síntesis de material previo.
Evidencia: Enunciado del problema y criterios de aceptación escritos.

Research

Entender el terreno con métodos, no con intuición.

Decide la persona: Qué métodos aplican y qué hallazgos son relevantes.
Ejecuta la IA: Benchmark, evaluación heurística, ordenación de hallazgos.
Evidencia: Benchmark comparado, heurísticas con severidad, arquitectura de información.

Sistema

Tokens y componentes antes que pantallas. Sin sistema no hay escala.

Decide la persona: Dirección de arte, jerarquía, escala tipográfica, carácter del movimiento.
Ejecuta la IA: Andamiaje de variables, estados de componente, comprobación de contraste.
Evidencia: Colección de tokens y componentes con todos sus estados definidos.

Prototipo

Pantallas montadas con instancias del sistema, navegables desde el primer día.

Decide la persona: Composición, flujo y qué se prueba antes de programar.
Ejecuta la IA: Montaje de variantes, responsive, documentación de estados.
Evidencia: Prototipo navegable y responsive en los puntos de ruptura acordados.

Traspaso

Del diseño al código sin traducción: los nombres del sistema son los mismos.

Decide la persona: Qué es contrato y qué es implementación libre.
Ejecuta la IA: Lectura estructurada del diseño, generación de componentes, pruebas.
Evidencia: Componentes en código que replican la jerarquía del sistema de diseño.

Verificación

Lo que no se comprueba, no está hecho.

Decide la persona: Umbral de calidad aceptable y qué deuda se declara.
Ejecuta la IA: Pruebas, auditoría de accesibilidad, medición de rendimiento.
Evidencia: Suite en verde, contraste validado, comparación diseño-navegador.

La capa de IA

La frontera entre criterio y ejecución, escrita.

Qué decide la persona

El problema, la dirección de arte, la jerarquía, el criterio de calidad y todo lo irreversible. El gusto no se delega porque no es automatizable: es el resultado de una formación y una mirada.

Qué ejecuta la IA

El trabajo sistemático: andamiaje de componentes y estados, revisión de accesibilidad, generación de variantes para elegir, documentación y verificación. Acelera; no dirige.

Cómo se controla

Niveles de autonomía explícitos, revisión independiente antes de dar nada por acordado, y registro de cada decisión con su responsable y su evidencia. Si no se puede auditar, no vale.

Principios

Sistema antes que pantalla

Diseñar pantallas sueltas produce trabajo bonito e irrepetible. Diseñar el sistema produce trabajo que crece.

Evidencia sobre afirmación

Cada caso muestra el artefacto real: el componente, el código, la prueba. Y declara lo que no se hizo.

La estética es función

Lo que se percibe como bello se percibe como más usable. El cuidado visual no es acabado: es parte del rendimiento del producto.

Podar lo que no acelera

Toda capa de método que no haga el siguiente proyecto más rápido o mejor se elimina. El procedimiento existe para producir, no para lucirse.

Verlo aplicado

Cada caso publicado muestra este procedimiento sobre un proyecto real, con sus artefactos y su deuda declarada.

Ver los casos