Diseño de interfaces

Desde 0.13.0, ui-design construye o rediseña interfaces desde el sistema de diseño del proyecto. Antes de diseñar busca tokens, tema y componentes, y los reutiliza: una pantalla nueva no recrea botones ni estilos. La identidad visual vive en los valores de los tokens y en un único elemento distintivo. En 0.14.0 cubre también pantallas nativas en SwiftUI y Jetpack Compose, y comprueba el diff con un helper. Desde 0.15.0, un subagente de Claude Opus y uno de Codex puntúan cada cambio visual sobre 10.

• Cada color, tipo y recurso de layout del plan indica su fuente: el brief, el sistema, una restricción de accesibilidad o un objeto del mundo del tema. La prueba de intercambio compara el plan con el que se haría para un competidor y sustituye lo que coincide.
• Al construir, los valores literales solo viven en los archivos de tokens y cada diferencia es una variante del componente existente. El helper ui_checks.py lo comprueba sobre las líneas añadidas respecto a la base, lista los contratos retirados y mide el contraste. Si no puede ejecutarse, el informe deja esa comprobación pendiente. Consulta las comprobaciones.
• Un rediseño conserva lo que otros usan sin verlo: id y anclas, nombres de campos, atributos de prueba y analítica, rutas, deep links y metadatos.
• Las pantallas existentes conservan su aspecto. Los cambios del sistema que se notarían en ellas llegan como propuesta en el informe, salvo los que corrigen contraste, foco u otro mínimo de calidad.
• En una app nativa, los componentes de la plataforma son la base y el tema del proyecto les da su identidad. La crítica mide áreas táctiles de 44 pt en iOS y 48 dp en Android, el texto al tamaño máximo del sistema y el modo oscuro. Consulta pantallas nativas.
• Una app en webview, como Tauri, Electron o Capacitor, sigue la ruta web con el tamaño mínimo y el típico de su ventana.
• La lista de señales de UI generada se usa después de construir, como auditoría. Si el brief pide uno de esos estilos, se sigue el brief.
• Las capturas de la crítica usan las herramientas de la evidencia visual.
• Después de la crítica, un subagente de Claude Opus y uno de Codex puntúan las capturas de 0 a 10 en nueve criterios, sin ver la autocrítica ni la nota del otro. El resultado es la media de los dos: más de 8 es bueno y más de 9, prácticamente perfecto. Si falta uno, puntúa el otro y el informe dice por qué. La escala es exigente: un criterio con algún hallazgo tiene como mucho 8, y el 10 queda para lo excepcional. Con una media de 8 o menos, o cualquier nota por debajo de 8, se corrige y se puntúa de nuevo, hasta tres rondas. Esta nota no consume el presupuesto de revisa. En dirige, el padre puntúa el cambio integrado. Consulta puntuación.

Si tienes activo otro skill de diseño de interfaces, como frontend-design, desactívalo o invoca este por su nombre. Varios skills con la misma descripción compiten, y cada sesión puede cargar uno distinto.

Pasos y referencias · Escenarios probados.