Renovación de interfaces y corrección de flujos engorrosos en proyectos existentes sin romper la lógica
Generar una demo nueva desde cero es fácil; renovar una aplicación en producción sin romper contratos de API, validación de formularios o estado de URL es donde fallan la mayoría de los prompts de IA. Una renovación fiable de interfaces fija primero los invariantes de negocio, elige la profundidad adecuada para el problema, verifica el flujo contando los clics y extrae un DESIGN.md de la pantalla de referencia antes de aplicar los cambios al resto de la aplicación.
Ideas clave
- Enumera desde el principio los comportamientos de negocio innegociables: cargas útiles de API, parámetros de ruta, comprobaciones de permisos y controladores de formularios que deben permanecer intactos.
- Adapta la profundidad de la renovación al problema: el nivel 1 ordena el ruido visual, el nivel 2 mejora el diseño y los estados que faltan, y el nivel 3 rehace flujos engorrosos de varios pasos.
- Mide las mejoras de usabilidad recorriendo la tarea real y contando los clics: reducir una cadena de seis clics y ventanas modales a dos acciones directas es mejor que un simple cambio de aspecto.
- Cuando la página de referencia supere la revisión, recoge sus tokens, tipografía y espaciado en DESIGN.md para que las páginas relacionadas sean coherentes.
npx github:oil-oil/oil-cli install oil-ui-proPara probar primero los paneles básicos de direcciones y la eliminación de patrones genéricos en una sola pantalla, ejecuta npx skills add oil-oil/oil-ui e instala la Skill gratuita.
Tres niveles de renovación de interfaces: elige el alcance de los cambios
Los equipos a menudo dudan en dejar que un agente de programación toque las vistas de producción porque un prompt impreciso como «haz que esta página sea más bonita» puede alterar las props de los componentes o eliminar filtros que funcionan. En Oil UI (y específicamente en el flujo para proyectos existentes de Oil UI Pro), las renovaciones se separan en tres niveles explícitos:
| Nivel | Cuándo utilizarlo | Qué cambia | Qué permanece intacto |
|---|---|---|---|
| Nivel 1: ordenar el ruido visual | El flujo funciona, pero los bordes, tamaños de letra, espacios y colores resultan recargados o anticuados | Escala tipográfica, eliminación de bordes, alineación, moderación cromática y limpieza de tarjetas | Estructura del DOM, rutas, hooks de estado y todos los flujos de interacción |
| Nivel 2: mejorar el diseño y los estados | La jerarquía visual es plana, las acciones clave están ocultas o faltan estados de carga, vacío o error | Jerarquía de secciones, proporciones de varias columnas, puntos de interrupción adaptables y estados de interfaz completos | Contratos de API del backend, lógica de negocio y navegación entre páginas |
| Nivel 3: rehacer flujos engorrosos y extraer DESIGN.md | Los usuarios atraviesan ventanas modales apiladas o pantallas fragmentadas para completar tareas básicas | Consolidación de pasos, edición en contexto, rediseño de la pantalla de referencia y DESIGN.md para todo el repositorio | Modelo de dominio subyacente y reglas de integridad de datos |
Cuatro pasos para renovar una aplicación en ejecución de forma segura
Tanto si renuevas una aplicación de revisión de contratos (como MOQI en la galería), un seguimiento de sprints (Relay), un cliente de correo (Post) o un flujo de pago (Pinch Checkout), sigue una secuencia controlada:
Captura la pantalla actual y realiza un diagnóstico anotado
Pide al agente que capture primero la página en ejecución y enumere los defectos visuales y de interacción (por ejemplo, tres botones con color primario que compiten en la cabecera, una tabla de 12 columnas que se corta a 1280 píxeles o cuadros de alerta sin procesar al producirse un error).
Renueva primero una pantalla de referencia
No modifiques veinte rutas a la vez. Elige la única pantalla en la que los usuarios pasan más tiempo, compara de 2 a 3 direcciones de renovación con datos reales y fija la ganadora.
Recorre toda la tarea del usuario y cuenta los clics
Haz clic y escribe a lo largo del flujo real en el navegador: filtra, envía, provoca un error de validación y recupérate de él. Confirma que las tareas frecuentes requieran menos pasos que antes.
Extrae DESIGN.md y aplícalo a las páginas relacionadas
Cuando la pantalla de referencia supere la revisión visual, pide al agente que escriba en DESIGN.md su paleta de superficies, escala tipográfica, densidad de tablas y reglas contra patrones genéricos; después aplica esa especificación al resto de la aplicación.
Plantilla de prompt para renovar una pantalla existente
Utiliza esta estructura en Claude Code, Codex o Cursor para mejorar una vista en ejecución mientras proteges la lógica de la aplicación:
Usa Oil UI para renovar [ruta o ruta del componente, por ejemplo, app/billing/page.tsx] en este proyecto.
- Comportamiento que debe conservarse estrictamente: Mantén intactas todas las [consultas de datos, parámetros de filtro de URL, reglas de validación de formularios y controladores de envío/exportación] existentes. No elimines ningún campo del dominio.
- Problemas actuales que debes resolver: [por ejemplo, todas las secciones parecen la misma tarjeta con borde; las columnas de la tabla tienen saltos de línea problemáticos; faltan estados de filtro vacío y de pago fallido].
- Nivel de renovación: [Elige: nivel 1, ordenar el ruido / nivel 2, mejorar diseño y estados / nivel 3, rehacer el flujo y extraer DESIGN.md].
Empieza capturando y diagnosticando la pantalla actual en ejecución, propón direcciones y verifica la página terminada a 1440×900 y 390×844.Enumerar los comportamientos que deben conservarse en el primer punto evita regresiones accidentales.
Ejemplos funcionales y prompts de la galería
Abre las demos en directo a 1440 o 390 píxeles para examinar cómo el modelo y el prompt dieron forma a la interfaz final.
MOQI
Sitio web de revisión de contratos con IA
Un sitio web para un producto de revisión de contratos con IA dirigido a equipos jurídicos internos. Construye la página de inicio.
Ver obra y prompt →
Relay
Gestión de proyectos y sprints
Producto: Relay, una herramienta de gestión de tareas y sprints para equipos de software de 20–200 personas. Construye su espacio de trabajo principal (1440×900): - Navegación izquierda para equipos, proyectos, mis tareas y bandeja de entrada. En el centro, muestra el sprint actual como lista o tablero de tareas. Las tareas tienen ID, título, estado, prioridad, avatar de la persona asignada y estimación. Usa abundantes datos realistas: entre veinte y treinta tareas con nombres que suenen a trabajo real de desarrollo de software. - Sensación: oscura, refinada y densa, como una herramienta profesional usada ocho horas al día. Mantén filas compactas, atajos de teclado visibles en todo momento e iconos de estado coherentes y reconocibles. - Haz memorable la paleta de comandos de teclado. Un atajo la abre y unos pocos caracteres permiten navegar, cambiar un estado o asignar a alguien. Captúrala abierta mientras se escribe una consulta. - Captura también una barra lateral de detalle de tarea abierta.
Ver obra y prompt →
Post
Cliente de correo electrónico
Producto: Post, un cliente de correo para personas que gestionan cientos de emails al día. Construye su interfaz principal (1440×900): bandeja de entrada, correo abierto y respuesta rápida. Usa contenido de correo realista, mezclando correspondencia de trabajo, facturas y notificaciones. Da a vaciar la bandeja una sensación distintiva: por ejemplo, un correo procesado se desliza fuera de inmediato y el contador disminuye. Captura también una pantalla del estado de bandeja vacía.
Ver obra y prompt →
Pago de Pinch
Módulo de pago para comercio electrónico
Un módulo de pago para la tienda en línea de una marca de diseño independiente (escritorio a 1440×900, panel de pago centrado): lista de compra, dirección de envío, método de pago y confirmación del pedido. Cada paso debe fluir con naturalidad, con estados claros para cada campo: rellenándose, no válido y completado. La finalización del pedido debe resultar alegre, más allá de mostrar simplemente una marca de verificación. Captura tres estados: cumplimentando el formulario, un error de validación y un pedido realizado correctamente.
Ver obra y prompt →Consigue el conjunto completo de herramientas de renovación de proyectos existentes en Oil UI Pro
Oil UI Pro incluye diagnóstico anotado mediante capturas de una página, el flujo de renovación en 3 niveles, recorridos de tareas contando los clics y extracción de DESIGN.md para mantener la coherencia entre varias páginas.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Debo definir primero los tokens globales de CSS o renovar primero una pantalla real?
Renueva primero una pantalla representativa. Los archivos de tokens abstractos escritos sin contexto rara vez resisten el contacto con la densidad real de las tablas y los estados de los formularios. Perfeccionar una pantalla de referencia con datos reales facilita la extracción de tokens precisos a DESIGN.md.
¿Puedo renovar una aplicación antigua de forma incremental sin reescribir componentes de terceros?
Sí. Una pasada de nivel 1 o 2 puede reorganizar la cuadrícula de la página, la tipografía, el espaciado y los estados circundantes sin tocar los componentes integrados complejos hasta que estés preparado para sustituirlos.
¿Cómo verifico que un rediseño haya mejorado realmente la usabilidad?
Comprueba dos cosas: primero, desenfoca el texto para confirmar que la acción principal y los estados de excepción destaquen estructuralmente; segundo, completa la tarea principal del usuario en el navegador y verifica que el número de clics, la búsqueda mediante desplazamiento y la recuperación de errores sean más rápidos que antes.
¿Dónde se guarda DESIGN.md una vez extraído?
Conserva DESIGN.md en la raíz del repositorio o en la carpeta docs/. Siempre que tú o un integrante del equipo creéis una función en Claude Code, Codex o Cursor, indica al agente que consulte DESIGN.md para que las nuevas pantallas sigan el sistema establecido.