Design Tally — Recuento de diseño
Un pase de conteo, no una guía de gustos. Otras habilidades anti-slop exponen principios; los principios se evaden una justificación a la vez. Esta habilidad hace visible la evasión forzando un recuento.
Por qué existe
Un fracaso real del que nació esta habilidad: se produjeron ocho variantes de diseño en una sola sesión, cada una usando una pequeña etiqueta en mayúsculas con espaciado para los encabezados de sección. Cada instancia tenía una justificación local que sonaba razonable en el momento. Nadie las sumó. El total fue 37, repartidas en cinco variantes que se habían presentado como visualmente distintas. El principio rector ("usa jerarquía antes que etiquetas") estaba cargado y disponible todo el tiempo.
Un recuento no se puede evadir como se evade un juicio. Ejecuta el recuento.
La regla
Antes de presentar cualquier trabajo de UI — cada vez, sin excepciones — genera el recuento a continuación e inclúyelo en el mensaje. No un resumen. La tabla, con números.
Si un recuento está por encima de cero, corrígelo o escribe la justificación específica para cada instancia. "Se sentía bien aquí" no es una justificación. Si el mismo patrón aparece en múltiples pantallas o variantes, ese es el hallazgo, independientemente de cómo se lea cada instancia por separado.
Nunca reportes el recuento como limpio sin haber inspeccionado realmente la salida. Lee el marcado o los estilos; no infieras de la memoria de lo que se escribió.
Patrones prohibidos
Prohibiciones estrictas. Estos no están disponibles a menos que el usuario los solicite explícitamente por nombre en la solicitud actual. Un brief de diseño que los declare no es suficiente.
| # | Patrón | Detección |
|---|---|---|
| 1 | Etiquetas en mayúsculas con espaciado o monoespaciadas | text-transform: uppercase Y (familia monoespaciada O letter-spacing >= 0.05em) |
| 2 | Monoespaciado en prosa | familia monoespaciada en cualquier cadena que no sea código, un valor literal, un identificador o un número |
| 3 | Peso de encabezado 700 o más | cualquier encabezado o texto de título con font-weight >= 700 |
| 4 | Tipo de letra itálica en títulos | font-style: italic en tamaños de encabezado o título |
| 5 | Borde y sombra en un mismo elemento | tanto border como box-shadow en el mismo nodo |
| 6 | Punto inicial en una píldora | círculo, punto o forma rellena pequeña como primer hijo de una píldora, chip, insignia o etiqueta |
| 7 | Iconos Lucide | el conjunto Lucide, o SVG dibujado a mano que reproduzca sus formas (trazo de 1.5px, extremos redondeados, glifos geométricos de 24x24). El dibujo a mano converge en Lucide por defecto — asume que cualquier icono dibujado a mano es una violación hasta que se verifique contra el conjunto aprobado |
Contados y justificados por instancia, no prohibidos directamente:
| # | Patrón | Detección |
|---|---|---|
| 8 | Divisores | cuenta cada regla, línea fina y borde como separador por pantalla. Cada uno necesita una razón por la que el espacio en blanco o la proximidad no pudieron servir |
| 9 | Tarjetas contenedoras | cuenta cada cuadro con borde o relleno por pantalla. Señala cualquiera que esté anidado directamente dentro de otro |
| 10 | Texto excesivo | prosa que repite lo que un valor, etiqueta o estado adyacente ya comunica |
| 11 | Misma ranura entre variantes | al producir N variantes presentadas como distintas, cualquier ranura — etiqueta de sección, pie de página, encabezado, forma de botón, ritmo de espaciado — representada idénticamente en todas las N |
La regla 11 es la verificación entre variantes. Compara la misma ranura en cada variante antes de presentar un conjunto. Estados de ánimo distintos con un tratamiento de etiqueta idéntico no son variantes distintas.
Iconos
Conjunto aprobado: Phosphor. Úsalo en lugar de dibujar glifos a mano.
Antes de agregar cualquier icono, pregúntate si transmite información que una palabra no podría. Si una etiqueta de texto funciona, usa la etiqueta de texto.
Ejecutar el linter
Para la UI que existe como código, ejecuta el script antes de contar a mano:
python3 ~/.claude/skills/design-tally/scripts/tally.py <ruta> [--json] [--quiet]
Cubre las reglas 1-6 e imprime la tabla de recuento. El código de salida es 1 solo cuando una regla demostrable (1, 5, 6) tiene un acierto, por lo que puede bloquear un hook o paso de CI sin fallar en candidatos.
Las reglas 2, 3 y 4 se reportan como candidatos, no como violaciones — el script puede ver una familia monoespaciada o un peso de 700 pero no puede distinguir entre prosa y código, ni entre un encabezado y una etiqueta. Clasifica cada candidato tú mismo y di cómo decidiste.
El script no puede ver las reglas 7-11, y no puede leer artboards de Paper o Figma en absoluto. Para trabajo en herramientas de diseño, cuenta a mano usando get_jsx o el equivalente — nunca de una captura de pantalla, y nunca de memoria de lo que escribiste.
Una ejecución limpia del script no es un recuento limpio. Cubre 6 de 11 reglas solo en código.
Formato de salida
Reporta cada regla, incluidas las que están en cero — un cero es información, y listar solo los aciertos oculta si el pase realmente se ejecutó.
Recuento de diseño
| Regla | Conteo | Dónde |
|-------|--------|-------|
| 1 etiquetas mayúsculas | 0 | — |
| 2 mono en prosa | 2 | leyenda debajo del héroe; línea de estado vacío |
| ... | | |
Luego, para cada conteo no nulo: corrígelo o indica la justificación por instancia.
Añadir a esta lista
Cuando el usuario identifique un nuevo patrón, agrégalo a la tabla con una regla de detección lo suficientemente específica como para contarlo. Si no se puede expresar como una condición detectable, pertenece a una habilidad de principios, no a esta.