elmir-mammadli/ai-deslop

De-slop de IA

Objetivo: una página que se lea como diseñada por una persona con un punto de vista. Una sola voz tipográfica, contenido real donde solía haber etiquetas, decoración solo donde tenga significado. Eliminar las marcas es la mitad del trabajo; la otra mitad es demostrar que nada se rompió donde solían estar.

Trabaja en este orden y no te saltes pasos: alcance → auditoría → lista de conservación → edición → reparación → verificación → informe. Un pase está completo solo cuando se cumple cada punto de la «Definición de terminado».

1. Alcance

• Enumera cada sitio, página, componente compartido, archivo de datos y miniatura que esté dentro del alcance. El sitio principal cuenta, no solo las demostraciones o subpáginas. Si el usuario dice «todo», significa todo; nunca te detengas en un subconjunto y lo informes como completo.
• El contenido vive en tres lugares; audita los tres: hojas de estilo, marcado/componentes y archivos de datos (arrays de títulos, datos tipográficos, etiquetas de navegación, metadatos).
• Pregunta una vez si el alcance no está claro. De lo contrario, procede.

2. Auditoría con el script, luego visual

Ejecuta primero el escáner incluido. Enumera cada candidato con archivo:línea, agrupado por marca, y termina con código 1 mientras queden marcas de nivel fix.

python3 <directorio-skill>/scripts/audit.py <rutas...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <directorio-skill>/scripts/audit.py src --only caps,tracking,period      # enfoque
python3 <directorio-skill>/scripts/audit.py src --json > audit.json               # legible por máquina

• Las marcas fix deben llegar a cero (o llevar un marcador razonado deslop-keep). Las marcas check (gradiente, brillo, counter-css, ceja, franja, em-heading, forma) necesitan un veredicto humano cada una, registrado en el informe.
• El escáner omite comentarios y directorios node_modules/build. No puede juzgar la intención, encontrar roturas de maquetación ni ver texto renderizado; para eso están los pasos 5 y 6.
• Las búsquedas adicionales que el script no cubre están en references/audit.md.

3. Las 20 marcas: acciones exactas y reglas de conservación

#	Marca	Acción exacta	Conservar solo cuando
1	Etiquetas y píldoras	radio 999px → 3 a 4px, o convierte la etiqueta en texto plano de color	Lleva un estado sobre el que el lector actúa (urgencia, estado, filtro activo)
2	Cursiva excesiva	elimina font-style: italic, utilidades italic, <em>/<i> usados por adorno	Títulos reales de obras, un término extranjero entrecomillado, una marca gráfica
3	Fuentes IA por defecto	reemplaza Instrument Serif, Instrument Sans, Geist, Geist Mono, Space Grotesk, IBM Plex Mono, JetBrains Mono, Space Mono cuando se usan como voz de la página	Nunca como voz; consulta las reglas tipográficas
4	Kerning negativo	elimina cualquier letter-spacing negativo y tracking-[-…], tracking-tight(er)	Nunca
5	Interfaz sobredetallada	elimina gadgets: puntos de estado en vivo, rastreadores falsos, lupas de cursor, botones magnéticos, marquesinas con desplazamiento, contadores giratorios, medidores de nivel decorativos	El gadget es el producto (calculadora, planificador, configurador)
6	Uso excesivo de divisores	mantén como máximo una regla estructural por lista; elimina reglas que solo separan	La regla agrupa filas en una tabla o lista
7	Sombras y opacidades	fichas de color sólido; elimina brillos, desenfoques, backdrop-filter, sombras con más de 40px de desenfoque	Un velo mantiene el texto legible sobre una foto; una sola elevación sutil en una superposición real (diálogo, menú)
8	Contenedores bordeados	desencaja tarjetas cuyo borde solo decora; elimina franjas de acento a la izquierda (border-left ≥ 3px)	La caja es un objeto real (formulario, recibo, billete, hoja, tabla), o la franja señala estado (éxito/error de formulario)
9	Diagramas sobredetallados	elimina «Lámina I», «Fig. 2», leyendas y etiquetas que no explican	Cada elemento se corresponde con algo real
10	Texto verboso y redundante	una línea de divulgación en el pie de página en lugar de notas de «muestra» repetidas; elimina frases que repiten el encabezado	La nota añade información no indicada en otro lugar
11	Migas de pan de código	elimina // ETIQUETA, texto de enlace /servicios, [1], EV-01, R-03, ESTADO:, etiquetas en mayúsculas TEL/MAIL/ÁREA	Una miga de pan de navegación real («Inicio / Acerca de»)
12	Numeración de secciones	elimina «01 /», «§», «Capítulo 1», números romanos, «Z1», contadores con relleno de ceros en el marcado y en counter() de CSS	El orden es el contenido: instrucciones, cronologías, pasos de formulario, preguntas de cuestionario, números que coinciden con marcadores en un diagrama. Entonces usa 1. simple, no 01
13	Cejas	elimina la pequeña etiqueta sobre un encabezado; si contenía datos (lugar, oficio, precio), muévelos al encabezado o a la primera frase	Es una etiqueta funcional: etiqueta de formulario, leyenda, dt, cabecera de tabla, cabecera de columna de pie de página
14	Tramado, ruido	elimina texturas de tramado y ruido	La textura es la dirección artística (impresión risográfica, borde de papel); márcala como deslop-keep
15	Imágenes ASCII	elimina	Nunca por defecto
16	Squircles	radio de 12px o más → 4 a 6px (secciones, tarjetas, imágenes, diálogos)	Círculos verdaderos (igual ancho y alto: avatares, puntos de icono, marcas de verificación redondas), formas deliberadas (ventanas arqueadas, extremos de tubería) con deslop-keep
17	Fuentes mono	reemplázalas con la fuente de texto del sitio más font-variant-numeric: tabular-nums	Código real en la página
18	Subtítulos EN MAYÚSCULAS	elimina text-transform: uppercase, utilidades uppercase, mayúsculas en cadenas de origen; también elimina su letter-spacing positivo	Marcas gráficas, señalización real (PELIGRO / ADVERTENCIA / AVISO, marcadores de tubería), y una marca construida sobre titulares condensados en mayúsculas (conserva esos selectores con --keep-caps)
19	Fondos degradados	color sólido	Escalas de datos (temperatura, estaciones), velos de fotos, líneas de separación duras
20	Puntos en títulos	elimina el punto final de h1 a h3, títulos de página, títulos de tarjetas y datos, líneas de pie de página de una frase en tamaño de exhibición	Frases completas, párrafos de varias frases, abreviaturas («Co.», «Inc.»)

También elimina: una frase en color de acento dentro de un titular (misma marca que #2), marcas gráficas gigantes delineadas o contorneadas, manchas y círculos decorativos, marcos vacíos y tiras de película.

4. Fuentes

• No envíes nunca una fuente IA por defecto (#3) como la voz. Elige según el tema, a partir de lo que trata la página: los oficios de señalización obtienen una fuente de carretera o condensada, los oficios tradicionales una Caslon o Didone, los estudios una serifa editorial con una sans-serif tranquila.
• Una cara de exhibición más una cara de texto, o una sola familia. Sin tercera familia para etiquetas.
• Los números usan font-variant-numeric: tabular-nums en la cara de texto, nunca una mono.
• Al cambiar, actualiza también: importaciones de fuentes, variables CSS, listas de clases de maquetación, comentarios de cabecera que nombren fuentes, y cualquier dato que muestre nombres de fuentes (tarjetas de catálogo, guías de estilo). Luego vuelve a revisar cada titular cuyo ancho o número de líneas dependía de la fuente anterior.
• No cargues cursiva ni pesos no utilizados después de eliminar las cursivas.

5. Reglas de redacción

• Encabezados: sin punto final, sin <em>, sin intervalo de acento, en minúscula excepto la inicial.
• Reescribe los encabezados de dos frases entrecortadas en una frase natural:
  • «Cierra la válvula. Luego llama.» → «Cierra la válvula, luego llama»
  • «Encuentra la fuga. Planifica el tejado.» → «Encuentra la fuga, luego planifica el tejado»
  • «Rápido, contenido, explicado.» → «Rápido, contenido y explicado»
  • «Un sitio web profesional. Un precio claro.» → «Un sitio web profesional a un precio claro»
  • «Siete capas. Una que ves.» → «Siete capas, y ves una»
  • Una pregunta más una instrucción puede permanecer en dos partes: «¿Agua cortada? Reserva una visita por la mañana».
• Al eliminar una ceja que contenía un dato, el dato debe sobrevivir en algún lugar visible.
• Sigue las propias reglas de estilo del proyecto (variante ortográfica, palabras prohibidas, estilo de guiones). Verifica la coherencia ortográfica después de las ediciones.
• Nunca inventes pruebas: sin reseñas falsas, cuentas, logotipos, premios. Etiqueta las muestras una vez, en el pie de página.

6. Edición

• Cambios mecánicos (mayúsculas, tracking, cursivas, radios, puntos en encabezados) mediante script; decisiones de criterio (reescrituras, gadgets, maquetaciones) a mano.
• Edita CSS regla por regla con un pequeño analizador (encuentra bloques selector { cuerpo }, cambia el cuerpo, escribe de nuevo). Nunca ejecutes una gran expresión regular con retroceso sobre una hoja de estilo completa.
• Primero la lista de conservación, después las ediciones. Anota qué selectores conservan mayúsculas y qué números se quedan, luego pasa esa lista al script.
• Marca las excepciones deliberadas en línea para que futuras auditorías las salten: /* deslop-keep: razón */ en CSS, {/* deslop-keep: razón */} en JSX, en la misma línea o en la anterior.

7. Reparar lo que se rompe al eliminar

Cada eliminación puede dejar un hueco. Verifica cada uno de estos, para cada sitio:

1. Cuadrículas con una primera columna pequeña (44px 1fr, 80px 1fr 360px, 90px 1fr 1.4fr) que contenía un número o código: elimina esa columna en todos los puntos de ruptura.
2. Margen izquierdo o relleno de 28 a 60px en p, dd, h3, li que alineaba texto más allá de un número eliminado: establécelo a 0.
3. Reglas sobrantes de counter-reset / counter-increment, li > span / dt span, display: flex; gap en encabezados que solo espaciaban un número.
4. Clases muertas que ya no se referencian en el marcado (salta las dinámicas como s[\badge_${x}`]), reglas vacías, parámetros y props index` no utilizados, importaciones y variables de fuente no usadas, comentarios obsoletos.
5. Titulares que se superponían a una imagen o dependían de un número de líneas, después de cualquier cambio de fuente.
6. Nunca elimines bordes dentro de ::before / ::after sin leer la regla: un borde izquierdo más inferior girado 45° es una marca de verificación dibujada.

8. Verificación

• Revisión renderizada de cada página a 1440 y 390 de ancho, con prefers-reduced-motion: reduce para que las secciones animadas se rendericen completas. Desplázate por toda la página antes de capturar para que las imágenes perezosas se carguen; elimina las superposiciones de desarrollo. Un área de imagen en blanco es carga perezosa o un optimizador de imágenes de desarrollo atascado hasta que se demuestre lo contrario; compara con producción antes de llamarlo error.
• Pase automatizado en cada ruta a ambos anchos: cero errores de consola, cero desbordamientos horizontales (scrollWidth > innerWidth).
• Comprobaciones del proyecto: verificación de tipos, lint (cero nuevas advertencias), la comprobación de copia o palabras prohibidas del proyecto, compilación de producción.
• Vuelve a ejecutar el script de auditoría: el total de fix debe ser 0.
• Actualiza las miniaturas, vistas previas e imágenes de sala de exposición que muestran el diseño anterior, y vuélvelas a revisar.
• Restaura los archivos que las compilaciones o servidores de desarrollo reescriben (por ejemplo tsconfig.json, next-env.d.ts) antes de confirmar.

9. Definición de terminado

Todo debe ser cierto:

• Cada elemento dentro del alcance fue auditado (hojas de estilo, marcado, datos, miniaturas).
• audit.py informa fix: 0; cada acierto restante de check tiene un veredicto.
• Cada excepción está en la lista de conservación o lleva un marcador deslop-keep con una razón.
• Cada página se renderizó y se observó, a 1440 y 390.
• Cero errores de consola y cero desbordamientos horizontales en cada ruta.
• Verificación de tipos, lint, comprobación de copia y compilación de producción pasan.
• Las vistas previas y miniaturas se actualizaron.
• Nada se empuja o publica sin la aprobación del usuario.

10. Informe

Termina con un informe breve con esta forma:

1. Alcance: lo que se cubrió (número de sitios y páginas).
2. Eliminado: por marca, qué cambió y aproximadamente cuántas instancias.
3. Conservado a propósito: cada excepción y su razón.
4. Reparado: roturas de maquetación encontradas y corregidas.
5. Verificado: cada comprobación y su resultado.
6. Asuntos pendientes: cualquier cosa no hecha o no verificada, indicada claramente.

Errores vistos en la práctica

• El disco se llena rápido con los perfiles del navegador sin cabeza. Captura una página a la vez, elimina cada perfil, vigila el espacio libre. Un disco lleno rompe el shell y el servidor de desarrollo.
• No mates el servidor de desarrollo del usuario. Inicia el tuyo propio en otro puerto y detenlo cuando termines.
• Coincidir solo con nombres de clase elimina etiquetas funcionales; coincide con la posición y el tipo de elemento.
• Los títulos impulsados por datos y los títulos de página con plantillas literales no los detecta un escaneo de encabezados solo de JSX; el script también comprueba title:, heading: y title=.
• Un pase que omite el sitio principal, el archivo de datos o las miniaturas no está completo.

Diseñar trabajo nuevo sin las marcas

Empieza por el tema, no por una plantilla: una cara de exhibición y una cara de texto elegidas para el oficio o la audiencia, un color de acento con significado, esquinas de 0 a 6px, etiquetas en minúscula excepto la inicial, encabezados sin puntos, sin cejas, sin secciones numeradas a menos que el orden importe, copia real en lugar de etiquetas de relleno, y cada elemento decorativo vinculado a algo verdadero sobre el negocio. Ejecuta audit.py antes de entregar el trabajo.