unvibe

¿Qué hace unvibe?

Esta habilidad convierte una interfaz que parece generada en una que parece diseñada. No inventa un nuevo estilo: aplica un catálogo de pequeños detalles medidos que las interfaces profesionales comparten y las generadas echan de menos, mapeados a los colores propios del proyecto. Fue extraída de un pase real de dos días de refinamiento en un SaaS de producción (references/case-study.md); cada regla existe porque romperla se notó.

Mapea tus colores, conserva los números. Las proporciones (radios, rellenos, tamaños, duraciones, pesos) son las que aportan la calidad. Los colores son lo único que adaptas.

Antes de empezar

1. Lee references/tells.md (qué hace que una interfaz parezca generada, con el reemplazo para cada caso).
2. Lee los tokens de diseño del proyecto y cualquier documento de diseño. Rellena la tabla de tokens en references/porting.md.
3. Pregunta al propietario qué pantallas le molestan más y qué le gusta. Conserva lo que le gusta; nunca elimines lo que entiende ("Me encanta esto, es comprensible — solo dale un mejor formato" significa cambiar el estilo, no recortar).
4. Anota la pila tecnológica: React o no, Tailwind 3/4 o CSS plano, una biblioteca de componentes existente o no, una biblioteca headless (React Aria) o no.

El flujo de trabajo

Fase 1 · Fundamentos (una pasada, toda la aplicación)

Tokens (assets/css/unvibe.css sección 1, mapeados), elementos nativos sobrantes en el color de la marca, números tabulares, movimiento reducido, curvas de movimiento. Luego palabras: eliminar etiquetas en mayúsculas con tracking, encabezados con emojis, glifos ✓ en insignias, signos de exclamación (catálogo §0–§1). Rápido, visible, riesgo cero.

Fase 2 · Controles (una pasada, toda la aplicación)

Botones con relieve y uno principal por pantalla (§2) · campos rellenados, una altura por fila (§3) · menús reales en lugar de selects nativos (§4; auditar primero cada punto de llamada, references/pitfalls.md) · interruptores para cada sí/no, tarjetas con interruptor para los importantes, tarjetas con radio para opciones visibles, etiquetas (§6) · controles segmentados cuya píldora se desliza (§5).

Fase 3 · Reconstruir las pantallas más visibles a partir de referencias

Elige las 3–5 pantallas que la gente ve más y reconstruye cada una sobre la plantilla profesional más cercana, medida (references/method.md): resumen analítico → paneles KPI (§9); pantalla de IA → hilo de agente (§12); actividad → feed (§11); configuración → filas (§7); listas masivas → cuadrícula de datos (§10); trabajos largos → diario (§13); fechas → ajustes preestablecidos + dos meses (§15).

Fase 4 · La limpieza general

Cada pantalla restante recibe los mismos detalles: una banda de encabezado de tabla, un estilo de campo, un menú, un estilo de insignia, llamadas a la acción como zonas rellenadas, listas como bloques con marco, la misma altura de filtro en cada página de lista (§8, §10, §16). La inconsistencia entre pantallas hermanas es en sí misma una señal reveladora.

Fase 5 · Pruébalo

Capturas de antes/después de producción vs rama con scripts/capture.mjs y una página de comparación lado a lado con scripts/compare.mjs. Conserva solo los pares cuya diferencia sea obvia a simple vista. Luego ejecuta la pasada completa de no regresión en references/verification.md antes de enviar.

Reglas de oro

1. Selección ≠ acción. Un color tranquilo marca lo que está seleccionado; el color vibrante de la marca es para la única acción principal por pantalla.
2. Hover ≠ seleccionado. El hover es neutral; la selección es un tinte pálido más una marca de verificación.
3. Tres superficies: lienzo, blanco para lo que flota, un relleno más oscuro hundido para campos y paneles.
4. Sin mayúsculas con tracking, sin encabezados con emojis, sin glifos de verificación, sin barras laterales de color.
5. Cada control en una fila comparte altura y relleno.
6. Cada sí/no es un interruptor; las casillas de verificación son para listas y consentimientos.
7. Un ajuste es una fila: qué hace a la izquierda, el control a la derecha; las filas bloqueadas dicen por qué en gris.
8. Los números son 24/34 en paneles rellenados con un chip de icono y una píldora de delta coloreada según el significado (un costo que sube es rojo).
9. Una banda de encabezado de tabla en todas partes, en minúscula con mayúscula inicial, en un marco de 16px; las filas seleccionadas obtienen una barra insertada de 3px.
10. Las respuestas de IA son texto en un hilo, con lo que se leyó y el tiempo real transcurrido; nunca pasos falsos.
11. La animación sigue a un cambio de estado, nunca a un hover; la pulsación escala a .985; los menús y modales aparecen.
12. Nunca un número adivinado, nunca un control decorativo. Si faltan datos, di "No determinado"; si un campo no hace nada, elimínalo.
13. Haz las pantallas hermanas en la misma pasada.
14. Muestra solo diferencias visibles y demuestra que no hay regresión.

Qué hay en esta habilidad

Ruta	Úsalo para
references/catalogue.md	cada detalle con sus valores exactos (§0 fundamentos → §17 nunca-jamás)
references/tells.md	las señales de interfaz generada y sus reemplazos
references/method.md	rediseño guiado por referencias: elegir, medir, mapear, reconstruir, probar
references/pitfalls.md	los errores que trae el refinamiento (menús en modales, claves duplicadas, nombres perdidos, capas CSS, pruebas)
references/verification.md	antes/después y la pasada de no regresión
references/porting.md	mapeo de tokens, Tailwind 3/4, otros frameworks, orden de adaptación, estados oscuros
references/case-study.md	el pase real del que proviene esto, con las palabras del propietario
assets/css/unvibe.css	la hoja de estilo lista para usar (CSS plano, clases uv-, tokens en :root)
assets/react/*	Select, NativeSelect (sustituto para <select>), Switch/SwitchCard, SettingsRow, Accordion, NumberField, Segmented (píldora deslizante), RollingNumber, ThinkingIndicator, DateRangePicker, useFlipToFit
scripts/capture.mjs	capturas con Chrome headless de elementos [data-shot], o pantallas de aplicación con una verificación en consola
scripts/compare.mjs	la página de comparación lado a lado antes/después
demo/index.html	cada patrón, antes y después, con datos ficticios

Uso de los assets

• CSS: copia assets/css/unvibe.css en el proyecto, mapea la sección 1 a los tokens del proyecto, impórtalo después de los estilos base. Usa las clases tal cual o tradúcelas a los nombres de clase propios del proyecto (conserva los valores).
• React: copia los componentes que necesites; dependen de react-aria-components (y @internationalized/date para el rango de fecha). No llevan clases de Tailwing.
• Biblioteca de componentes existente: cambia el estilo de sus partes con los números del catálogo en lugar de reemplazarla.

Qué entregar

1. La página de antes/después (solo diferencias visibles).
2. Una lista breve de lo que cambió, por familia, y las pantallas tocadas.
3. El informe de no regresión: qué se auditó, qué interacciones se probaron en un navegador, estado de la consola, pruebas, compilación. Di claramente qué no se revisó.