aj3x/claude-skills

Diseño: función primero, nada innecesario

Postura

El buen diseño es el camino honesto más corto entre una persona y lo que intenta hacer. La forma y la función se complementan, y en el mejor trabajo no se pueden distinguir. La forma sigue a la función (Sullivan); menos, pero mejor (Rams).

Regla de precedencia: cuando la forma y la función entren en conflicto, la función gana. Siempre. La belleza se gana con claridad, proporción y ajuste, nunca se compra a costa de usabilidad, velocidad, accesibilidad u honestidad. Nada innecesario, nada frívolo: cada elemento debe justificar su existencia por el trabajo que realiza.

La tranquilidad no es simpleza. El objetivo es un diseño que desaparezca en el uso (las 'herramientas neutrales' de Rams, lo 'supernormal' de Morrison y Fukasawa, el 'vacío' de Muji), no un diseño que se anuncie a sí mismo.

Procedimiento de decisión

Ejecutar para cada elemento, característica, elección de estilo o animación:

1. ¿A qué tarea de quién está sirviendo esto? Nombra al usuario y el objetivo en una oración. Si no puedes, detente y descúbrelo.
2. ¿Qué trabajo hace este elemento? (informar, habilitar una acción, agrupar, orientar, dar retroalimentación, generar confianza, ayudar al reconocimiento). Sin trabajo: elimínalo.
3. ¿Se puede eliminar, fusionar o diferir? Intenta eliminarlo. Si no se pierde nada, se queda eliminado. Si se pierde una cosa, pregúntate si un elemento más simple podría cargar con ella.
4. ¿Perjudica alguna tarea? Verifica velocidad, claridad, tasa de error, accesibilidad, carga, atención. Cualquier daño medible a la función pierde contra la función, por muy bonito que se vea.
5. ¿La versión más simple es honesta y completa? Prefiere el patrón convencional a menos que haya una razón funcional para desviarte (Ley de Jakob).
6. Luego refina la forma: alineación, espaciado, ritmo, jerarquía, consistencia. El cuidado en esta etapa es minuciosidad (Rams #8), no decoración.

Cuando dos opciones funcionan igual, elige la que tenga menos partes, menos estados y menos palabras.

Principios a la práctica

La atribución está en references.md. Parafraseado, no citado.

Principio	En la práctica
Rams: útil	Elimina todo lo que no sirva a la tarea. Funcionalidades, colores, bordes, iconos, texto.
Rams: comprensible	La interfaz se explica a sí misma. Etiquetas en lugar de iconos misteriosos; estado visible; sin necesidad de manual.
Rams: no intrusivo	El chrome retrocede, el contenido lidera. Paleta base neutra, un acento para la acción principal.
Rams: honesto	Sin urgencia falsa, progreso falso, afirmaciones infladas o controles que pretendan. La carga muestra el estado real.
Rams: duradero	Evita tendencias pasajeras (vidrio, degradados por sí mismos, diseños novedosos). Usa tipografía, cuadrícula y tokens duraderos.
Rams: minucioso	Los casos extremos, estados vacíos/error/carga, cadenas largas y detalles minúsculos son parte del diseño.
Rams: tan poco diseño como sea posible	Reduce a lo esencial, luego verifica que lo esencial sea correcto.
Ley de Hick	Menos opciones, agrupadas. Una acción principal por vista; divulgación progresiva para el resto.
Ley de Fitts	Los objetivos frecuentes y principales son grandes y están cerca de donde ya están el puntero o el pulgar. Mínimo ~44px de objetivos táctiles (mínimo 24px CSS según WCAG 2.2).
Ley de Jakob	Usa patrones familiares (ubicación de navegación, comportamiento de formularios, iconos). La novedad necesita una recompensa funcional.
Ley de Miller / fragmentación	No confíes en contar 7 elementos; agrupa la información en fragmentos significativos y mantén pequeño el conjunto de trabajo.
Carga cognitiva	Muestra solo lo que se necesita ahora. No obligues a recordar entre pantallas; lleva el contexto hacia adelante.
Umbral de Doherty	Responde en ~400 ms. Más allá, muestra retroalimentación inmediata, esqueletos o actualizaciones optimistas; nunca bloquees en silencio.
Ley de Tesler	La complejidad se conserva. Absórbela en el sistema (valores predeterminados, inferencia, automatización), no en el usuario, a menos que exponerla sea el punto.
Ley de Postel	Acepta entrada variada (espacios, formatos, mayúsculas/minúsculas); emite salida consistente y estricta. Valida con suavidad, explica con precisión.
Gestalt: proximidad, región común, similitud, conexión	Agrupa por espaciado antes que por bordes, bordes antes que cajas. El espaciado es la estructura más barata. Función similar, aspecto similar.
Efecto estética-usabilidad	El pulido hace que las cosas se sientan más fáciles y gana tolerancia, pero puede enmascarar fallos reales de usabilidad. Prueba con tareas reales; nunca lo uses como razón para enviar un flujo defectuoso.
Von Restorff	Haz que lo único importante sea diferente. Si todo está enfatizado, nada lo está.
Posición serial, pico-final	Coloca los elementos clave al principio/final de listas y flujos; haz que el paso final y los momentos de error sean considerados.
Zeigarnik, gradiente de meta	Muestra el progreso en tareas de varios pasos y guarda el trabajo parcial.
Tufte: data-ink	En gráficos y tablas, cada marca debe llevar datos. Elimina chartjunk, líneas de cuadrícula pesadas, 3D, leyendas redundantes; etiqueta directamente.
Norman: affordances, signifiers, feedback	Los controles parecen operables; cada acción recibe un reconocimiento visible; mapea los controles a los efectos; haz que los errores sean recuperables.
Vignelli / Müller-Brockmann	Una cuadrícula, una escala tipográfica pequeña, pocas tipografías, espaciado consistente. La restricción crea coherencia.
Munari / Aicher	Resuelve el problema con la menor cantidad de medios; sistemas sobre piezas únicas; reutiliza componentes en lugar de inventar.
Krug	No hagas pensar a la gente. Asume que hojean, no leen. Lo obvio vence a lo ingenioso.
Wroblewski	Formularios: menos campos, etiquetas alineadas arriba, validación en línea, valores predeterminados sensatos. El móvil primero fuerza las prioridades.
Frost (atomic design)	Construye a partir de pequeñas partes reutilizables con tokens; la consistencia proviene del sistema, no de la vigilancia.
Tognazzini	Haz que el estado sea visible, protege el trabajo del usuario, mantén las interacciones reversibles, favorece la manipulación directa, mantén las rutas de teclado.
Ive / Rams artesanía	Resuelve los detalles hasta que el objeto parezca inevitable. Honestidad del material sobre el adorno.

Lista de verificación de revisión

Función

• La tarea principal se puede completar rápidamente, con la acción principal inconfundible.
• Cada elemento tiene un trabajo nombrable; no queda nada decorativo.
• Cada elemento interactivo tiene estados hover/focus/active/disabled/loading/error.
• Los casos vacío, error, sin conexión, lento y de contenido largo están diseñados.
• Las acciones son reversibles o confirmadas proporcionalmente al riesgo.
• El texto es sencillo, específico y orientado a la acción; los errores dicen qué sucedió y cómo solucionarlo.
• Se utilizan patrones familiares a menos que una razón funcional indique lo contrario.

Forma (solo después de que la función pase)

• Jerarquía clara: un punto focal por vista; la prueba de entrecerrar los ojos pasa.
• Cuadrícula, escala de espaciado y escala tipográfica consistentes; pocas tipografías y pesos.
• El color es limitado, útil y nunca el único portador de significado.
• La alineación y el ritmo son exactos; nada está 'casi' alineado.

Honestidad y longevidad

• Sin patrones oscuros, escasez falsa o affordances engañosas.
• Nada depende de una tendencia pasajera.

Antipatrones

• Decoración: degradados ornamentales, sombras, ilustraciones, iconos junto a cada etiqueta, bordes alrededor de todo, fondos que reducen el contraste.
• Movimiento gratuito: animación que retrasa una tarea, bucles por atención o parallax. El movimiento debe explicar un cambio (origen, jerarquía, estado) y permanecer por debajo de ~200 a 300 ms para la retroalimentación de la interfaz de usuario. Respeta prefers-reduced-motion.
• Patrones oscuros: confirmshaming, costos ocultos, casillas de suscripción marcadas previamente, anuncios disfrazados, cancelación trampa, insistencia, falsas cuentas regresivas, botones asimétricos para aceptar/rechazar de igual consecuencia.
• Carne misteriosa: controles solo con icono sin etiquetas o tooltips, acciones solo por gesto sin una alternativa visible.
• Descarga de elección: configuraciones y opciones en lugar de buenos valores predeterminados.
• Reinvención: barras de desplazamiento personalizadas, controles de formulario no estándar, navegación hecha a medida por sí misma.
• Inflación de énfasis: todo en negrita, coloreado o con insignia.
• Estilo sobre contenido: diseñar el contenedor antes de que exista el contenido; aprobaciones de lorem ipsum.
• Ocultar con minimalismo: eliminar etiquetas, affordances o estados para verse limpio. Minimal significa esencial, no faltante.
• Escaparate primero: la toma del portafolio se ve bien, los estados vacío y error están en blanco.

Bases (no negociables)

Accesibilidad (WCAG 2.2 AA mínimo)

• Contraste de texto 4.5:1 (3:1 para texto grande y límites/iconos de interfaz de usuario).
• Operación completa con teclado, orden de enfoque lógico, indicador de enfoque visible.
• HTML semántico primero; ARIA solo para llenar vacíos. Etiquetas para todas las entradas; texto alternativo para imágenes significativas.
• Nunca transmitas significado solo con el color. Soporta zoom al 200% y redimensionamiento de texto sin pérdida.
• Honra prefers-reduced-motion y prefers-color-scheme. Sin contenido que parpadee más de 3 veces por segundo.
• Objetivos de al menos 24x24 px CSS, apunta a 44x44 en táctil.

Capacidad de respuesta

• Diseño primero el contenido y primero el móvil; el diseño se adapta al contenido, con puntos de interrupción establecidos donde el contenido se rompe, no en nombres de dispositivos.
• Sin desplazamiento horizontal a 320px de ancho. Unidades relativas, tipografía fluida, min()/clamp().
• Texto del cuerpo ~16px mínimo, longitud de línea ~45 a 75 caracteres, altura de línea ~1.4 a 1.6.
• Tanto táctil como puntero funcionan; hover nunca es el único camino.

Rendimiento como diseño

• Rápido es una característica: activos ligeros, sin cambio de diseño, fuentes del sistema o pocas fuentes web, contenido significativo antes del realce.

Cuando la forma puede liderar (excepciones limitadas)

La forma puede tomar la delantera solo donde sirve a la función. Cada uso debe nombrar la función:

• Reconocimiento: marca, color o firma visual consistente que ayuda a las personas a identificar y confiar en un producto.
• Confianza y credibilidad: pulido profesional donde su ausencia señala riesgo (pagos, salud, seguridad).
• Legibilidad y escaneo: escala tipográfica, espacio en blanco y contraste elegidos para facilitar la lectura y la búsqueda.
• Ajuste emocional a la tarea: tono adaptado al contexto (tranquilo para médico, lúdico para aprendizaje infantil) cuando el estado de ánimo afecta la finalización o la comodidad.
• Delicia con un trabajo: un momento único, breve y omitible que confirma el éxito o enseña un mecanismo (nunca en caminos frecuentes o bloqueantes).
• Contextos dirigidos artísticamente: editorial, marketing, juegos y portafolios donde la experiencia en sí misma es el producto. Incluso allí, la navegación, la lectura y las rutas de compra siguen siendo primero la función.

Si la excepción no se puede expresar como 'esto ayuda al usuario a hacer X', no es una excepción.

Método de trabajo

1. Escribe el usuario, la tarea y las restricciones en 2 o 3 oraciones.
2. Contenido y estructura primero (jerarquía de información, flujo), imágenes al final.
3. Usa contenido real, volúmenes de datos reales y casos extremos reales.
4. Comienza con la solución convencional más simple; agrega solo lo que una prueba o una necesidad declarada justifique.
5. Revisa con la lista de verificación; elimina antes de agregar.
6. Al informar una decisión de diseño, indica la función que cumple y di explícitamente si se rechazó una opción agradable porque perjudicaba la función.