iyuyoung/young-design

Young Design (Diseño Joven)

Crea sitios web que se sientan jóvenes, autorales y liderados por el producto, sin volverse infantiles, decorativos o genéricos. Trata la calidad visual y la calidad de implementación como un solo sistema. Adapta la expresión visual al producto en lugar de aplicar un estilo de casa fijo.

Selecciona el modo de trabajo

Elige un modo antes de trabajar:

• Dirección: define el lenguaje visual, la jerarquía de página, los tokens y los componentes representativos.
• Diseño: crea una página o maqueta completa con contenido realista e intención responsiva.
• Implementación: traduce una dirección o referencia aprobada a código de producción.
• Refinamiento: audita un sitio existente, identifica las brechas de mayor impacto y mejóralo sin desestabilizar el comportamiento.
• Revisión: proporciona retroalimentación visual basada en evidencia sin modificar archivos a menos que se solicite.

Si el usuario pide solo diseño, no implementes el proyecto de producción. Si el usuario pide construir u optimizar el sitio, lleva el trabajo hasta la verificación.

Establece el contrato de diseño

Antes de elegir colores o componentes, determina:

1. Audiencia — quién llega y con qué estado emocional.
2. Promesa — la única cosa que el primer viewport debe dejar clara.
3. Acción principal — el siguiente paso más valioso.
4. Personalidad — tres adjetivos útiles y tres cualidades a evitar.
5. Restricciones — framework, activos de marca, SEO, rendimiento, accesibilidad, impresión o requisitos de despliegue.

Infiera estos elementos del repositorio, la brief y decisiones previas cuando sea posible. Pregunta solo cuando una respuesta faltante cambiaría materialmente el diseño.

Luego define una huella digital de diseño de 1 a 5 para calidez, juego, tactilidad, densidad, precisión y contraste visual. Registra las puntuaciones y una oración que explique la dirección resultante. No le des a productos no relacionados la misma huella digital por defecto.

Usa copia de producto realista y datos representativos. Lorem ipsum, paneles genéricos y pruebas sociales inventadas ocultan problemas de jerarquía.

Construye el sistema visual antes que la página

Lee references/visual-language.md al definir o cambiar la apariencia. Deriva un motivo visual dominante del producto, la audiencia o el flujo de trabajo; el papel y el collage son opciones, no valores predeterminados.

Crea un sistema pequeño y coherente:

• roles de color, no una bolsa de colores;
• tipografía para display, cuerpo y anotación opcional;
• ritmo de espaciado y anchos de contenido;
• reglas para bordes, radios, sombras y materiales;
• lenguaje de iconos e ilustraciones;
• comportamiento de interacción y movimiento;
• reglas de composición para escritorio, tableta y móvil.

Usa tokens de diseño o variables compartidas. Evita estilizar cada sección como un póster aislado.

Preserva la distinción entre:

• capa de marca — voz reconocible, marca, colores, tipografía;
• capa de producto — flujo de tareas, controles, estados, retroalimentación;
• capa de contenido — jerarquía, escaneo, confianza, copia SEO;
• capa de material — papel, cinta, lápiz, textura o acentos de collage.

Los detalles de material deben apoyar la jerarquía. Mantenlos lo suficientemente escasos para que el producto siga siendo creíble y utilizable.

Compón en torno al momento del producto

No predetermines un titular a la izquierda y una captura de pantalla de panel arbitraria a la derecha. Identifica el momento que demuestra que el producto funciona: una recomendación, vista previa, resultado, transformación, hoja de trabajo, comparación o siguiente paso.

El primer viewport generalmente debe contener:

• una promesa específica;
• un momento de producto legible;
• una acción principal;
• señales concisas de confianza o restricción;
• suficiente asimetría o carácter material para sentirse autoral.

Haz que las secciones secundarias respondan preguntas distintas. No repitas la misma cuadrícula de tarjetas bajo diferentes encabezados.

Lee references/component-patterns.md al elegir patrones de héroe, selector, tarjeta, herramienta, directorio o editorial.

Entrega el artefacto correcto

Lee references/output-contracts.md y sigue el contrato para el modo de trabajo seleccionado. Haz explícitos los supuestos, decisiones, intención responsiva y evidencia de verificación para que otro diseñador o ingeniero pueda continuar el trabajo.

Implementa como un sistema real

Lee references/implementation-playbook.md antes de modificar un repositorio o traducir una referencia a código.

Al trabajar en un proyecto existente:

1. Inspecciona el framework, rutas, layouts compartidos, tokens, componentes, pruebas y activos generados.
2. Separa los cambios intencionales de fuente del ruido de salida generada y formato.
3. Preserva los contratos de comportamiento, URLs, hooks de analítica, selectores de prueba, semántica y reglas de impresión.
4. Agrega o revisa las bases compartidas antes de las sobrescrituras específicas de página.
5. Implementa componentes reutilizables para patrones visuales y de comportamiento repetidos.
6. Verifica todos los estados significativos: inicial, seleccionado, hover, foco, carga, vacío, error, éxito e impresión cuando corresponda.
7. Valida en anchos de escritorio, tableta y móvil estrecho.

Prefiere fuentes locales o autogestionadas, marcas SVG y una biblioteca de iconos consistente. Usa imágenes generadas solo cuando tengan un valor narrativo real. No compenses una jerarquía débil con imágenes decorativas.

Refina en orden de impacto

Cuando un sitio se siente "viejo", "genérico" o "no como el diseño", corrige los problemas en este orden:

1. carácter tipográfico y jerarquía;
2. composición del primer viewport;
3. ritmo de espaciado y densidad de contenido;
4. geometría de componentes y estados de interacción;
5. roles de color y contraste;
6. detalles de material y micro-decoración;
7. movimiento y pulido.

No empieces añadiendo sombras, degradados, manchas o animaciones. Esos rara vez reparan una composición débil.

Verifica antes de dar por terminado

Lee references/quality-gates.md para implementación o revisión final. Lee references/review-rubric.md al decidir si un resultado está listo para presentar, enviar o publicar.

Como mínimo, verifica:

• sin desbordamiento horizontal accidental de página;
• el texto de interfaz visible tiene al menos 14px a menos que sea arte no esencial;
• el contraste de texto normal alcanza 4.5:1 y el texto grande 3:1;
• el foco del teclado es claro y los controles interactivos tienen un tamaño táctil cómodo;
• la versión móvil está recombinada, no simplemente reducida;
• los tipos, radios, sombras, iconos y materiales se mantienen consistentes;
• el primer viewport implementado preserva la jerarquía del diseño aprobado;
• la funcionalidad, estructura SEO, archivos generados, descargas y salida de impresión siguen funcionando;
• las comprobaciones de tipos, pruebas, compilación y verificaciones del navegador pasan cuando el proyecto las proporciona.

Exige una puntuación de al menos 85/100 sin ningún bloqueador crítico antes de considerar un resultado listo para publicación. Usa la puntuación de forma diagnóstica; no la infles para cumplir el umbral.

Si la ejecución del navegador no está disponible localmente, indica la limitación ambiental y usa el CI del proyecto en lugar de afirmar verificación visual.

Evita los modos de fallo de Young Design

Nunca predetermines:

• degradados genéricos de startup y tarjetas de vidrio flotantes;
• una serifa anticuada como la principal fuente de "personalidad";
• formas de pastilla excesivas, radios sobredimensionados o cuadrículas de tarjetas uniformes;
• colores pastel por todas partes con contraste insuficiente;
• rotaciones aleatorias, cinta, garabatos o texturas de papel en cada elemento;
• metadatos y etiquetas diminutos utilizados para fabricar sofisticación;
• layouts móviles que ocultan el valor central del producto o fuerzan desplazamiento horizontal a nivel de página;
• reescribir la lógica funcional del producto solo para acomodar un rediseño visual;
• copiar una referencia literalmente en marcas no relacionadas.
• aplicar papel cálido, colores pastel o tarjetas redondeadas cuando el dominio requiere una expresión más nítida, densa o técnica.

El resultado debe sentirse autoral, útil y actual: amigable sin ser infantil, expresivo sin ser ruidoso, y pulido sin sentirse estéril.