imagile-dev/design

Diseño

Crea interfaces que parezcan intencionales, no generadas. Cada valor por defecto es una decisión que alguien omitió. Este skill toma cada decisión deliberadamente: primero un brief, luego una construcción hasta un estándar de calidad mínimo, y finalmente una crítica de capturas de pantalla reales.

Dos modos de fallo, y el primero es peor:

1. Genérico. La página podría pertenecer a cualquier producto de su categoría. Lleva los valores predeterminados actuales de la IA, o es tan simple que nadie la recuerda.
2. Ruidoso. Cada elemento compite. La animación, los degradados y los adornos luchan por atención, y nada se lee primero.

La cura para ambos es una idea fuerte, expresada en un solo lugar, dentro de un sistema disciplinado. La restricción no es el objetivo. La intención sí lo es.

1. Elige el modo

Modo	Úsalo cuando	Acción
Construir	Una nueva página, pantalla, componente, presentación o conjunto de imágenes	Secciones 2 a 5
Refinar	"Hazlo más atrevido, más tranquilo, más simple, más colorido, más vivo"	Sección 6
Criticar	"Revisa esto", "¿se ve bien?", una puntuación	references/critique.md
Pulir	Antes de enviar cualquier cosa visual	Sección 7

Refinar nunca rediseña. Mantiene la identidad, el texto y todo fuera de la solicitud. Si la solicitud necesita un rediseño, dilo y detente. Nunca termines a medio camino entre ambos.

2. Carga el contexto primero

1. Lee DESIGN.md en la raíz del repositorio, el CLAUDE.md del repositorio, los tokens existentes (global.css, tailwind.config.*, archivos de tema) y .claude/image-generation/style.md.
2. El brief gana. Cuando DESIGN.md o el usuario fijan un estilo, síguelo exactamente, incluso si el estilo está en la lista de señales. Las reglas a continuación rigen solo las opciones que nadie ha tomado aún.
3. Sin DESIGN.md, explora el repositorio, luego haz un máximo de tres preguntas sobre hechos duraderos: quién lo usa, qué debe lograr y qué pruebas existen. Nunca pidas a alguien que elija una estética en abstracto. Muestra dos o tres opciones en su lugar.
4. Escribe lo aprendido en DESIGN.md siguiendo references/design-md.md. La próxima sesión no debería tener que preguntar de nuevo.
5. Una corrección es una regla permanente. Cuando el usuario corrija una elección visual, añade una línea a "Reglas permanentes" en DESIGN.md en la misma interacción.
6. Usa solo la evidencia disponible. Nunca inventes testimonios, logotipos de clientes, recuentos de usuarios, métricas o citas. Marca los datos como marcadores de posición y enuméralos para que el usuario los confirme.

3. Escribe el brief (Modo Construir)

Publica un brief breve en el chat antes de escribir código. Toma un minuto y previene el resultado genérico.

1. Lectura de diseño. Una línea: "Leyendo esto como una [superficie] para [audiencia], en modo [modo], inclinándose hacia [dirección]."

2. Modo de superficie. Elige uno por superficie, no por producto. La página de aterrizaje de una herramienta para desarrolladores sigue siendo Persuadir.

   Modo	Superficies	Expresión	Variación / Animación / Densidad
   Persuadir	Aterrizaje, precios, lanzamiento, portafolio inicio	Una gran idea, imágenes reales, un campo de color	7 / 6 / 3
   Operar	App, panel de control, ajustes, administración	El sistema es el diseño. Sin espectáculo	3 / 2 / 7
   Leer	Docs, artículos, lecciones	El tipo de letra lleva la página	3 / 2 / 5
   Experiencia	Juegos, aprendizaje lúdico, niños, eventos	Personajes, animación ambiental, humor	8 / 8 / 4

   Los tres diales van de 1 a 10. La variación es de simetría a asimetría audaz. La animación es de estática a cinematográfica. La densidad es de galería a cockpit. Lee las palabras de ambiente en ellos: "minimalista" baja la variación y la densidad, "llamativo" o "animado" sube la animación, "denso" o "pro" sube la densidad. Registra los diales en DESIGN.md.

3. Frase de escena. Quién lo usa, dónde y bajo qué luz. "Una enfermera de turno nocturno revisando un horario en un teléfono en una sala de descanso oscura" decide el modo oscuro o claro. Una etiqueta de categoría como "herramienta para devs significa oscuro" no vale.

4. Frase de idea. "[Algo que solo este sujeto tiene] se convierte en [un dispositivo visual]." Luego realiza la prueba del competidor: intercambia el nombre de un competidor. Si la frase sigue funcionando, la idea es genérica. Reescríbela.

5. Tokens. De cuatro a seis colores con nombre y una estrategia de color (references/color.md). Familias tipográficas y sus roles (references/typography.md). Un concepto de maquetación como una frase más un wireframe ASCII. El nivel de animación.

6. Argumento (solo Persuadir). Una afirmación por sección, cada una con su prueba. Elimina cualquier sección que no tenga una afirmación. No uses por defecto héroe, tira de logotipos, tres características, CTA.

7. Compruébalo con las señales. Para cada eje que el brief deje libre, lee references/tells.md. Pregunta si el tema se puede adivinar solo por la categoría, y luego si el aspecto se puede adivinar por la categoría más "no el aspecto habitual". Si alguna respuesta es sí, revisa esa parte y di qué cambió.

4. Construye hasta el estándar mínimo

Gasta audacia en un solo lugar. Deja que un elemento sea lo memorable, mantén todo lo demás tranquilo, y elimina la decoración que no sirva a la idea. Cuando elimines una señal, llena el espacio con algo real: escala, imágenes, contenido o un campo de color. La mera eliminación deja una página delgada y vacía.

El estándar mínimo se sostiene en cada superficie sin ser anunciado:

• Tokens, no literales. Los colores, tipo, espacio, radio y animación viven como tokens en :root. El modo claro y oscuro proviene de prefers-color-scheme, sobrescribible con data-theme. Un interruptor, cuando está presente, gana.
• Contraste. 4.5:1 para texto, 3:1 para texto grande, iconos, controles y anillos de enfoque. Nunca texto gris sobre un fondo de color.
• Tipo. Como máximo dos familias. Cinco tamaños o menos. Cuerpo de 16px o más, con 45 a 75 caracteres por línea. Los encabezados caben en dos líneas en cualquier ancho.
• Móvil primero. Funciona desde 320px con un margen de 16px y sin desplazamiento lateral. Los objetivos táctiles son de 44px. Las entradas son de 16px para que iOS no haga zoom. Nunca deshabilites el zoom.
• Estados. Cada control tiene estado por defecto, hover, focus-visible, activo, deshabilitado, cargando, error y éxito. Cada región asíncrona tiene cargando, vacío y error.
• Estabilidad. Sin cambios de maquetación. Los paneles animados o asíncronos mantienen una altura fija. Las tarjetas en una cuadrícula comparten una altura con el pie de página fijado.
• Nunca inclines nada clickable. La inclinación es solo para sellos decorativos y pegatinas.
• Animación. Intencionada, interrumpible, solo transform y opacity, y más suave con prefers-reduced-motion. El contenido es visible sin JavaScript.
• Imágenes. Arte real o generado en un estilo coherente. El arte de personajes y decorativo se entrega como un recorte transparente, nunca un cuadro oscuro. Sin texto incrustado en imágenes.
• Texto. Corto, específico y escrito desde el lado del usuario. Las imágenes superan a los párrafos.

Los detalles viven en las referencias. Lee solo lo que la tarea necesita:

Archivo	Cubre
references/typography.md	Elegir tipografías, la escala, la medida, tipo de exhibición, carga
references/color.md	Estrategia de color, tokens OKLCH, modo oscuro, contraste
references/layout.md	Espacio, marco, cuadrículas, jerarquía, responsive y táctil
references/motion.md	Si animar, easing, duraciones, rendimiento, movimiento reducido
references/interaction.md	Estados, formularios, datos de peor caso, velocidad percibida
references/copy.md	Escritura UX, errores, estados vacíos, contenido honesto
references/imagery.md	Dirección de arte, arte generado, fotos, iconos
references/decks.md	Presentaciones de diapositivas y charlas
references/tells.md	La lista desactualizada de valores predeterminados de diseño generado

5. Míralo

La revisión de código no es una revisión de diseño. Renderízalo y míralo.

1. Ejecuta la página y captura capturas de pantalla a 375px y 1440px, más 768px para diseños que cambien allí. Captura el modo claro y oscuro cuando existan ambos. Usa playwright-cli, el panel del navegador o cualquier herramienta de navegador que tenga la sesión.
2. Entrecerrando los ojos en cada captura de pantalla. El elemento primario, el elemento secundario y los grupos deberían leerse en ese orden.
3. Busca colisiones: superposiciones, banners recortados, texto que se envuelve donde no debería, iconos desalineados, cuadrículas desiguales, una fila de 3 más 1 donde corresponde 2 por 2.
4. Critica con references/critique.md, soluciona en su orden de corrección, y captura de nuevo. Detente después de tres rondas e informa lo que queda.
5. Para juegos y piezas interactivas, juégalos. Una prueba de juego de un subagente en ancho móvil encuentra lo que leer el código nunca encontrará.
6. Deja el servidor de desarrollo en ejecución y dale al usuario la URL. Pon las capturas de pantalla finales en el PR: móvil y escritorio, claro y oscuro.

Cuando la dirección esté abierta, como una fuente, un logotipo o una paleta, construye dos o tres maquetas pequeñas una al lado de la otra y deja que el usuario elija. Luego construye la ganadora.

6. Refinar

Cada refinamiento sigue un método: evalúa el estado actual, escribe una tesis de una oración, aplícala en el vocabulario del sistema existente, captura capturas de pantalla, luego pule.

Solicitud	Qué hacer
Más atrevido	Eleva el objetivo al nivel de confianza de sus vecinos: escala, peso, compromiso de color, imágenes. Luego silencia lo que lo rodea
Más tranquilo	Elimina un accesorio a la vez. Baja el dial de animación. Fusiona colores en menos roles
Más simple	Corta secciones que no hacen ninguna afirmación. Reduce las palabras a la mitad. Convierte párrafos en un elemento visual
Más color	Sube un escalón en la escalera de la estrategia de color. Nunca añadas un segundo tono de acento primero
Tipografía	Reconstruye la escala y el emparejamiento desde references/typography.md
Maquetación	Arregla el marco, los bordes izquierdos y el ritmo desde references/layout.md
Animar	Pasa primero la puerta de frecuencia en references/motion.md. Luego añade un momento orquestado
Texto más claro	Aplica references/copy.md
Responsive	Reelabora primero para 375px: una sola columna, objetivos táctiles reales, nada recortado
Endurecer	Introduce datos de peor caso y añade los estados faltantes de references/interaction.md

7. Lista de verificación de envío

Ejecuta esto antes de dar por terminado cualquier trabajo visual:

• DESIGN.md refleja las decisiones tomadas y cualquier corrección dada
• Las capturas de pantalla a 375px y escritorio, claro y oscuro, no muestran colisiones ni recortes
• Nada de references/tells.md aparece a menos que el brief lo haya fijado
• Cada control tiene sus estados, y cada región asíncrona tiene cargando, vacío y error
• Los datos de peor caso se renderizan: nombres largos, cero y un elemento, números enormes
• El teclado llega a todo, el foco es visible y se respeta el movimiento reducido
• El skill de accessibility reporta cero violaciones graves en los temas principales
• Las imágenes son coherentes, recortadas donde deben estar y optimizadas con web-optimize
• El texto se ha reducido a lo que el usuario necesita, sin pruebas inventadas
• El servidor de desarrollo está en ejecución y el PR tiene las capturas de pantalla

Habilidades relacionadas

• accessibility audita WCAG 2.2 AA con axe-core en diferentes anchos, esquemas y temas.
• image-generation crea arte a partir de un style.md con paleta fija. background-removal lo recorta. web-optimize lo envía.
• architecture contiene los valores predeterminados de la pila para sitios en su referencia web.

Créditos

Este skill parafrasea y combina ideas del skill frontend-design de Anthropic (Apache-2.0), Impeccable de Paul Bakaus (Apache-2.0), los skills de ingeniería de diseño de Emil Kowalski (MIT) y el skill de gusto de Leonxlnx (MIT). No se copia ningún texto. Cada archivo de referencia nombra la fuente de sus reglas.