Shijiuwei/unslop

¿Qué hace unslop?

unslop fue creado por Damir Sokolovsky (@heydamir), quien inició la serie Unslopping en X. Está licenciado bajo CC BY 4.0, por lo que debes mantener este crédito en cualquier copia o adaptación.

Las interfaces generadas por IA fallan de las mismas maneras predecibles. Cada superficie brilla, cada etiqueta tiene un emoji, el espaciado es el que sea que el modelo escribió ese día, y el texto grita. Unslopping arregla la artesanía y conserva el producto. Las funciones, el contenido y el orden de las secciones se mantienen. Lo que cambia es que cada tamaño, color, palabra e imagen se vuelve deliberado.

Eliminar el slop es solo la mitad del trabajo. Una pantalla que está limpia pero que podría pertenecer a cualquier producto es la siguiente plantilla. Cada ejecución termina con una pantalla que solo este producto podría tener.

La diferencia entre slop y artesanía está en dónde va la riqueza. El slop extiende el color y los efectos sobre el cromado, los fondos, botones, bordes y etiquetas. La artesanía mantiene el cromado tranquilo y pone la riqueza en uno o dos momentos de contenido que la gente recuerda, como un objeto renderizado, un gráfico hermoso o una imagen del mundo del producto.

Trabaja como un diseñador haciendo una revisión de líneas rojas, una capa a la vez, en toda la pantalla.

Cómo se ve un buen resultado

• Un elemento brillante. Cada pantalla tiene una cosa pulida que lleva el color y la artesanía: un objeto renderizado, una escena pintada o un gráfico rico. Todo lo demás a su alrededor es tranquilo, para que se lea al instante.
• Cromado tranquilo. La navegación, los botones y el texto usan los neutros teñidos y un solo acento. Nada brilla, nada compite con el elemento brillante.
• Una idea clara. Puedes decir en una oración qué muestra lo visual y por qué pertenece a este producto.
• Texto sobre espacio tranquilo. El titular se asienta sobre una parte de la imagen o el diseño que se dejó vacía para él, corto y específico, con una acción primaria y una secundaria, y nada apilado debajo.
• Producto real, material real. Las vistas previas se ven como la aplicación real con datos plausibles, y los objetos se ven como cosas reales con peso, luz y sombra.

Qué estilos visuales tienden a funcionar y cuáles fallan está en references/visuals.md. Ejemplos terminados para aprender están en references/refs.md, y tratamientos de código como dibujar una imagen en glifos están en references/effects.md.

Ejecútalo

1. Mira la pantalla. Encuentra los archivos que la renderizan. Si puedes ejecutar la aplicación o abrir el archivo en un navegador y tomar una captura de pantalla, hazlo, para que juzgues lo que la gente ve y no solo el código.
   • ¿Solo un enlace a un sitio en vivo, sin código? Guarda la página con node <carpeta de la skill>/scripts/snapshot.mjs <url> unslop/original.html y trabaja en una copia de ese archivo. Añade --dark o --light para que coincida con el tema que ve el usuario. También guarda original.live.png, una captura de pantalla de la página en vivo, así que renderiza la copia guardada y compara las dos antes de empezar. Los fondos animados dibujados por scripts no sobreviven, así que descríbelos en la auditoría desde la página en vivo.
   • ¿Solo una captura de pantalla? Reconstruye la pantalla como un archivo HTML estático primero, coincidiendo estrechamente, y trata eso como el original.
   • En ambos casos, el resultado es una página rediseñada en código que el usuario puede entregar a quien sea dueño del sitio real, así que dilo en el informe.
2. Audita. Revisa references/signs.md y enumera cada signo que encuentres, una línea cada uno con dónde está.
3. Decide cuánto cambiar. Lee la auditoría honestamente antes de planear nada.
   • Slop pesado, muchos signos en color, tipografía, iconos y texto. Ejecuta el proceso completo a continuación.
   • Slop ligero, una pantalla que está mayormente diseñada con pocos signos restantes. Modo de pulido. Arregla solo lo que encontró la auditoría, toma la dirección de la marca existente en lugar de inventar una nueva, y mantén la paleta, la tipografía, el diseño y lo visual. Ideas más grandes, como un momento que falta o una escena para el héroe, van al informe como sugerencias, no como cambios.
   • Sin slop. Dilo claramente y sugiere dos o tres refinamientos pequeños como máximo, con valores exactos. Aplícalos solo si el usuario está de acuerdo, y detente ahí. Nunca cambies una pantalla buena solo para hacerla diferente.
4. Establece la dirección y detente. Escribe las cinco líneas descritas abajo. Muestra la auditoría y la dirección al usuario y espera su respuesta antes de editar, ya que cambiar la dirección después significa rehacer todo. Si tienes una herramienta para preguntar al usuario, úsala; de lo contrario, pregunta en texto plano y detente. Omite la espera solo cuando el usuario ya haya dicho que lo hagas.
5. Arregla en nueve pasadas, en orden. Termina una pasada en toda la pantalla antes de empezar la siguiente. Cuando casi todas las líneas cambian, planea las pasadas en orden y luego escribe la nueva pantalla de una sola vez, siempre que cada pasada esté aplicada. El espaciado viene primero porque todo lo demás se lee diferente una vez que el ritmo es correcto. La copia viene antes que la tipografía y el diseño porque la longitud del titular decide su tamaño y dónde se asienta. Los visuales y la animación vienen al final porque deben encajar en una pantalla que ya funciona sin ellos.
6. Verifica. Ejecuta la lista de verificación al final de este archivo, renderiza de nuevo y compara con la lista de auditoría. Cualquier cosa que aún esté en la lista se arregla.
7. Informa la dirección, algunas líneas por pasada sobre qué cambió, y cualquier indicación de imagen que hayas escrito.
8. Graba, cuando se te pida o cuando el usuario quiera algo para compartir. Construye el archivo de historia y renderiza el video descrito en Video de historia. Si el usuario lo pide al principio, escribe cada pasada en el archivo de historia a medida que avanzas.

Mantén la ejecución rápida. Renderiza la pantalla para verificarla como máximo tres veces. Cuando generes una imagen, comienza justo después de que la dirección sea confirmada y sigue haciendo las primeras pasadas mientras se ejecuta, en lugar de esperarla.

Los valores exactos para cada pasada están en references/tokens.md.

Dirección

Antes de tocar nada, escribe cinco líneas cortas. Derívalas de lo que la página dice que el producto hace y para quién es. Nunca de lo que está de moda.

• Producto. Qué hace y para quién, en una oración simple.
• Carácter. Dos o tres palabras concretas, como tranquilo, exacto, un poco cálido o rápido, técnico, juguetón. Palabras como limpio, moderno, elegante, minimalista y premium no están permitidas, porque describen toda plantilla.
• Mundo. El lugar o material al que el producto pertenece naturalmente. Una aplicación de notas vive cerca del papel y la tinta, una herramienta de monitoreo cerca de instrumentos y turnos nocturnos, una aplicación de viajes cerca de mapas y luz de ventana. Este mundo establece el tinte de los neutros, el acento y lo visual.
• Momentos. Uno o dos lugares donde la pantalla obtiene color rico, material y detalle, elegidos de lo que el producto muestra. Una tarjeta o dispositivo renderizado dentro de la vista previa, un gráfico cuyos colores significan una serie, un objeto del mundo colocado junto al contenido. Escribe qué son.
• Firma. Un pequeño detalle que solo este producto tendría, usado consistentemente. Un punto de estado en vivo para una herramienta de monitoreo, teclas para una herramienta de desarrollador, subrayados hechos a mano para una aplicación de enseñanza, una línea de ruta para una aplicación de entrega. Un detalle, no cinco.

Los ejemplos aquí solo muestran la forma de una respuesta. Deriva la tuya del producto frente a ti, incluso cuando un ejemplo coincida.

Si el producto ya tiene una marca real, como un archivo de logotipo, un color o una tipografía que no sea slop, mantenla y construye la dirección a su alrededor. Un degradado violeta a azul, destellos y brillo son slop incluso cuando están en el logotipo, así que no cuentan como marca a menos que el usuario diga que sí.

1. Espaciado

• Todo se asienta en una rejilla de 4px. Los márgenes, rellenos, espacios y alturas fijas son múltiplos de 4, por lo que 28 o 104 están bien aunque no estén en la lista de tokens. Un paso de 2px está bien para ajustes dentro de controles pequeños, y un valor impar que centra exactamente algo se mantiene.
• Misma cosa, mismo tamaño. Todas las filas en una lista comparten una altura y un espacio, todas las tarjetas en una fila comparten un relleno.
• El espacio muestra agrupación. El espacio dentro de un grupo es menor que el espacio entre grupos, por lo que una lista se lee como un bloque y las secciones como separadas.
• Las cosas se alinean. Los iconos están en una columna, las etiquetas comienzan en una línea, los números se alinean a la derecha en una columna. Nada está desplazado de la línea con un translate suelto o un margen impar.
• El relleno sigue la densidad. Paneles compactos y barras laterales alrededor de 16, tarjetas de 20 a 24, bordes de página de 24 a 32.
• La navegación es la parte más densa de una aplicación. Las filas miden de 32 a 36 de alto con 2 a 4 entre ellas, iconos en una columna, etiquetas en una línea. Una etiqueta de sección está más cerca de sus propios elementos que de la sección de arriba, como 24 arriba y 8 abajo. Mide la barra lateral después de la pasada, es donde el espaciado se rompe más a menudo.
• Elimina valores únicos que rompen el ritmo, como mt-[13px] o py-[11px], y reemplázalos con pasos de la escala.

2. Color

• Construye desde una rampa neutra, teñida hacia el mundo de la dirección. Elige grafito, cálido o tinta de los tokens, o tiñe la tuya propia de la misma manera. El fondo, las superficies elevadas, los bordes y el texto provienen de esa rampa.
• En aplicaciones y paneles de control, los fondos, superficies, bordes y texto se mantienen neutros, la rampa de grafito o algo igual de gris. La gente los mira durante horas y el contenido tiene que llevar el color. Una pantalla cuyo fondo se lee como naranja, marrón, azul o verde ha ido demasiado lejos. El mundo se muestra en el acento, los gráficos y los momentos, no en las superficies. Las páginas de aterrizaje pueden teñir sus superficies más hacia el mundo.
• Tres roles de texto: primario, secundario y atenuado. No diez lavandas ligeramente diferentes.
• En el cromado, un acento, usado raramente. Marca la acción primaria, la selección o el único número que importa.
• Los momentos de la dirección son la excepción. Dentro de ellos el color puede ser rico, varios tonos en un gráfico, un objeto renderizado con materiales reales, una imagen con su propia luz, siempre que se mantenga dentro del mundo y cada color signifique algo.
• Si la marca tiene un color real, se convierte en el acento y abandona las superficies. Si no hay un color de marca real, toma el acento del mundo.
• El acento con texto sobre él alcanza un contraste de 4.5 a 1. Si no lo hace, oscurécelo o pon texto oscuro sobre él. El acento usado como texto o tinta sobre una superficie clara necesita el mismo contraste, así que usa un tono más oscuro allí.
• En temas oscuros, el botón primario puede ser un blanco roto de la rampa con texto oscuro, y el acento puede vivir en un lugar más pequeño como la selección o una cifra clave. Esto a menudo se ve más deliberado que un botón de color.
• Los colores semánticos solo llevan significado, como verde para un cambio bueno y rojo para un error, y están atenuados para sentarse dentro de la paleta.
• Elimina degradados de tono en superficies, texto degradado, brillos de color y sombras de color, lavados de color radiales y manchas detrás del contenido, y bordes de neón.
• Los bordes son líneas finas y tranquilas, el color del texto de la rampa al 6-10% de opacidad.
• En temas oscuros, la profundidad proviene de pasos de superficie y líneas finas, no de sombras. Una ventana u objeto flotando sobre una imagen puede mantener una sombra neutra suave. En temas claros las sombras son neutras, suaves y pequeñas.
• Un degradado solo está permitido como un pequeño cambio de tono dentro de un neutro, como una fila activa que va de #2b2b2b a #1f1f1f. Nunca de un tono a otro.

3. Iconos

• Cada emoji usado como icono o como decoración en una etiqueta se convierte en un icono de línea de un conjunto. Usa el conjunto que el proyecto ya tiene, de lo contrario lucide.
• Un tamaño y un trazo en todas partes, 16 o 18px con un trazo de 1.5.
• Los iconos toman el color de su rol de texto, usualmente secundario o atenuado. Nunca obtienen sus propios colores.
• La caja del icono tiene el mismo ancho en cada fila y el espacio hacia la etiqueta es fijo, 8 o 10, para que las etiquetas se alineen.
• Elimina iconos que no añadan nada, como un emoji en cada título de tarjeta o antes de cada etiqueta de sección. Las categorías que necesitan color obtienen un pequeño punto de estado.

4. Copia

• Los titulares dicen qué hace el producto y para quién, en palabras simples, para que no pudieran encajar en otro producto. Usa los hechos que ya están en la página y no inventes nuevos.
• Sin signos de exclamación en el texto de la interfaz, y nunca !!.
• Sin titulares de saludo como ¡Bienvenido de nuevo, Damir! 👋. El título nombra el contexto, como el nombre de la página o el período, por ejemplo Octubre 2026.
• Etiquetas cortas. Buscar, no Buscar algo....
• Un cambio dice con qué se compara, como +12% vs el mes pasado o 3 menos vs el mes pasado.
• Los titulares, subtítulos, etiquetas, botones y pies de foto terminan sin punto. Solo los párrafos de varias oraciones mantienen sus puntos.
• Sin palabras de hype como supercargar, sin fisuras, desbloquear, magia, revolucionar o innovador, y sin Impulsado por IA en todo.
• Las afirmaciones que no se pueden verificar, como Amado por más de 10,000 equipos o 10x más rápido, se vuelven tranquilas y específicas si el usuario confirma que son reales, y se eliminan en caso contrario. Pregunta y enuméralas en el informe.
• Los datos de simulación se ven reales, con números y nombres plausibles, nunca [X] o 123,456.
• Las insignias como PRO, Nuevo ✨ o Beta 🚀 desaparecen a menos que el producto realmente las necesite, y entonces son texto tranquilo.

5. Tipografía

• Elige la tipografía para el carácter de la dirección, de las familias en los tokens. Mantén la fuente del proyecto cuando sea parte de una marca real. Una fuente predeterminada como Inter que nadie eligió puede ser intercambiada cuando otra familia encaje mejor con el carácter. Una familia para la interfaz, más como máximo un compañero de cualquier fila de los tokens, una mono para figuras y metadatos o una fuente de display para titulares grandes.
• Pocos tamaños de una escala y dos pesos, 400 y 500, con 600 como máximo para énfasis raro. Sin encabezados de 700 a 900, sin texto degradado.
• La jerarquía proviene del tamaño y el color, no del peso.
• Formato oración en todas partes. Etiquetas como NAVEGACIÓN o PAGADO ESTE MES con espaciado amplio se convierten en Navegación y Pagado este mes.
• El texto pequeño nunca obtiene espaciado entre letras negativo. La legibilidad en texto pequeño significa más grande, un poco más negrita o ligeramente más suelto. El espaciado apretado es solo para texto de display grande.
• Los números usan tabular-nums y un formato en toda la pantalla. Si una cifra usa comas como separador de miles, todas lo hacen. Si una usa espacios, todas lo hacen. Las fechas usan un formato, las monedas usan un símbolo y la misma posición.

6. Diseño

• Un diseño simple, una columna o dos, nada apilado en columnas laterales que no sean para datos auxiliares. No más de un nivel de anidación sin una razón real.
• Una sección por vista de desplazamiento. Las tarjetas de resumen se alinean en una fila o dos, todas con el mismo tamaño de caja.
• Las tarjetas y paneles usan la rampa neutra para el fondo y una línea fina para el borde. Sin sombras grandes, sin fondos acolchados.
• Las tablas usan filas alternadas de la rampa, apenas visibles, y líneas finas entre filas.
• Las imágenes y objetos se colocan en un carril o columna dedicada, nunca flotando al azar en medio del texto.

7. Detalles

• Controles de formulario: altura fija de 36 o 40, borde de línea fina con el color del borde de la rampa, foco con el acento, radio pequeño (4-6). Sin brillo interno.
• Botones: altura fija de 36 para normal, 32 para pequeño. El primario usa el acento como fondo, el secundario usa el color de superficie más oscuro con un borde de línea fina. Sin sombra, sin brillo.
• Barras de desplazamiento: delgadas, invisibles hasta que se desplazan, luego un pulgar del color del borde de la rampa.
• Estados de carga: un esqueleto simple de la rampa, sin animación de onda o brillo.
• Estados vacíos: un icono del conjunto, una línea de texto, sin ilustración a menos que esté en los momentos.
• Separadores: una línea fina al 6-10% del color del texto.
• Puntos de estado: 6px de diámetro con el color semántico y un borde de 1.5px del fondo.
• Valores atenuados: la ubicación de un elemento fijo, el porcentaje de una barra de progreso, la hora de la última actualización. En la parte inferior o derecha, en el tamaño más pequeño (11-12px).

8. Visuales

• Encuentra un lugar para un momento visual de la dirección. Una tarjeta renderizada, un gráfico rico o un objeto del mundo. Hazlo tan detallado como puedas en código con CSS y SVG, o con HTML5 Canvas. Si la(s) herramienta(s) de imagen están disponibles y esto es para la sección hero, genera una imagen real en su lugar.
• La imagen hero va en un contenedor de relación de aspecto fijo, con el texto del titular superpuesto sobre una parte tranquila de ella, no encima de una pared de texto.
• Los gráficos usan limpieza matemática: etiquetas de eje claras, una leyenda, líneas de cuadrícula delgadas, datos reales plausibles.
• Si usas la herramienta de imagen, escribe una indicación que nombre el mundo, los materiales, el estado de ánimo y lo que se muestra. Mantén las indicaciones dentro del mundo, sin alta calidad, 8k, foto realista.

9. Animación

• La animación solo ocurre para transiciones de estado: hover, foco, apertura, cierre, desplazamiento a una sección. Sin animación de entrada a menos que la página sea una demostración.
• Duración de 150-200ms para microinteracciones, 300-400ms para transiciones de panel. Sin duraciones más largas a menos que una escena la necesite.
• Suavizado: cubic-bezier(0.4, 0, 0.2, 1) para la mayoría, cubic-bezier(0, 0, 0.2, 1) para entradas.
• Sin rotación, rebote, ondulación, desvanecimiento de desplazamiento o paralaje.
• Sin animación de carga o brillo.
• Los estados de hover en botones e iconos usan un cambio de fondo del color de superficie más oscuro, sin escalado, sin cambio de color del texto.

Lista de verificación

Antes de terminar, ejecuta esto:

• ¿Cada valor de espaciado es un múltiplo de 4, excepto los ajustes de 2px anotados?
• ¿Todos los elementos iguales tienen el mismo tamaño y espaciado?
• ¿Los iconos están en una columna con ancho fijo?
• ¿Las etiquetas comienzan en la misma línea en toda una lista?
• ¿Los números están alineados a la derecha en una columna?
• ¿No hay emojis usados como iconos o decoración?
• ¿Los iconos son todos de un conjunto con un tamaño y trazo?
• ¿Sin signos de exclamación en la interfaz?
• ¿Sin titulares de saludo, etiquetas AI-powered o hype?
• ¿Todas las etiquetas tienen formato oración, no todo mayúsculas?
• ¿El texto en la interfaz termina sin punto (excepto párrafos)?
• ¿Un formato para números, fechas y monedas en todas partes?
• ¿Solo un acento, usado raramente en el cromado?
• ¿Los fondos son de la rampa neutra?
• ¿Sin degradados (excepto pequeños cambios de tono dentro de un neutro)?
• ¿Sin brillos de color, sombras de color o lavados radiales?
• ¿El contraste del acento con el texto es de 4.5:1 o más?
• ¿Los bordes son líneas finas al 6-10% de opacidad?
• ¿Sin sombras en temas oscuros (excepto ventanas flotantes)?
• ¿Sin pesos de fuente por encima de 600?
• ¿Sin espaciado entre letras negativo en texto pequeño?
• ¿Los titulares se basan en los hechos del producto, no en inventos?
• ¿Las afirmaciones no verificables se eliminaron o verificaron?
• ¿Los datos de simulación se ven plausibles?
• ¿Sin animación que no sea para transiciones de estado?
• ¿Las duraciones de animación son 150-200ms o 300-400ms?
• ¿El diseño tiene como máximo dos columnas con un nivel de anidación?
• ¿Todos los controles de formulario tienen una altura fija de 36 o 40?
• ¿Los puntos de estado tienen 6px de diámetro con borde de 1.5px?

Video de historia

Cuando se te pida que grabes, haz esto:

1. Crea un archivo history.md en la raíz del proyecto con una entrada para cada pasada. Escribe la pasada, por ejemplo ## 1. Espaciado, luego la pantalla de código después de esa pasada en un bloque de código. Si el usuario pide grabar desde el principio, escribe la entrada justo después de terminar cada pasada. Si pide grabar al final, construye el archivo de historia con todo el código final.
2. Renderiza un video de la pantalla cambiando de la original a la final, pasada por pasada, usando la herramienta de video si está disponible. El video debe durar alrededor de 30 segundos, con 1 segundo para la pantalla original, luego 3 segundos por pasada, luego 2 segundos para la pantalla final. El video debe mostrar la pantalla completa, no solo una parte. Sin texto superpuesto, sin marca de agua. Un nombre de archivo como unslop-demo.mp4.
3. Si no hay una herramienta de video disponible, solo escribe el archivo de historia y di que el video se puede renderizar más tarde.