frangkli/design-rules

Reglas de diseño

Aplica estas reglas dondequiera que el briefing, el DESIGN.md del proyecto y la habilidad de diseño en uso (generalmente impeccable) dejen la elección abierta. Cuando cualquiera de esos hable, esa prevalece. Léelas antes de la primera edición de UI y antes de escribir una crítica o auditoría.

Texto

• La etiqueta de un control nombra su resultado, y la misma palabra se mantiene a lo largo del flujo: un botón "Publicar" produce una confirmación "Publicado".
• El texto de error indica qué falló y cómo solucionarlo, en la voz del producto, sin disculpas.
• Una etiqueta por intención en navegación, hero y footer (elige "Contactar ventas" o "Háblanos", no ambos). La etiqueta de un botón primario cabe en una línea con tres palabras o menos.
• Los encabezados y botones siguen el caso que ya usa el proyecto; un proyecto nuevo usa minúscula inicial (excepto la primera palabra).
• Un registro por página: el texto promocional y el texto conciso del producto no comparten pantalla.
• Comillas y apóstrofos curvos, una elipsis real (…), sin guiones largos (usa punto, coma o dos puntos), como máximo un punto medio por línea.
• Los testimonios ocupan tres líneas o menos e incluyen el nombre y el cargo de la persona.
• Antes de entregar, lee cada cadena visible en la página renderizada una vez, incluidos texto alternativo, estados vacíos y el footer, y elimina el happy talk: frases que solo dicen lo bueno que es algo.

Detalles que omitir cuando el eje es libre

• Paleta: un fondo crema cálido cerca de #F4F1EA con un acento terracota cerca de #D97757 (los colores propios de la interfaz de Claude); el conjunto premium-consumidor #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714; casi negro con matiz (#0B0B0B, #111) que sustituye al negro.
• Tipografía: una palabra de un titular separada con cursiva, peso o color; etiquetas en mayúsculas espaciadas; "→" añadido al texto de enlaces y botones; etiquetas construidas como "PALABRA — fragmento".
• Chrome: etiquetas de versión en el hero (V0.6, BETA) o un footer de versión; indicadores de desplazamiento; tiras de configuración regional, reloj o clima; puntos de estado decorativos o píldoras sobre imágenes; créditos de fotos decorativos; tiras de eslogan como "MARCA. MOVIMIENTO. ESPACIAL."; "Confiado en silencio por".
• Datos: listas de más de cinco elementos dibujados como filas con bordes arriba y abajo; barras de progreso rellenas usadas para comparar valores.

Páginas de persuasión

• Hero: titular de dos líneas o menos en ancho de escritorio, texto de apoyo de 20 palabras o menos, la acción principal visible sin desplazamiento, cuatro elementos de texto o menos, relleno superior de 6rem o menos, y nada debajo de los botones de acción (sin eslogan, tira de confianza o avance de precio).
• Configura el titular en un contenedor ancho con un tamaño fluido (aproximadamente clamp(3rem, 5vw, 5.5rem)) para que ocupe dos o tres líneas en cada ancho.
• La navegación está en una línea, de 64–72px de alto, nunca más de 80px.
• Como máximo un marquee por página y como máximo dos divisiones alternas de imagen/texto en una fila.
• Una cuadrícula bento de N elementos tiene exactamente N celdas y ninguna vacía; con empaquetado denso, verifica que los tramos se entrelacen en cada punto de interrupción.
• Nombra la única cosa que un visitante debería recordar después del primer vistazo, y haz que las decisiones posteriores la sirvan.

Componentes y detalles

• Esquinas redondeadas anidadas: radio interior = radio exterior − el espacio entre ellas.
• En una fila de tarjetas, fija la acción de cada tarjeta a su borde inferior para que los botones queden alineados; las listas de características de precios comienzan a la misma altura en cada columna.
• El tipo de letra en cursiva con descendentes obtiene un interlineado de 1.1 o más más un poco de relleno inferior, para que no se recorte nada.
• Los párrafos del cuerpo usan text-wrap: pretty para que ningún párrafo termine con una palabra solitaria.
• Los enlaces visitados se ven diferentes donde la gente vuelve al contenido (documentos, listas de artículos). No se envían marcadores de posición href="#".
• Un carril lateral plegable tiene 56–72px de ancho, mantiene sus etiquetas en el DOM, tiene objetivos de 44×44px, establece aria-expanded en el alternador e inert en el contenido oculto.
• Las secciones de altura completa usan dvh o svh, nunca 100vh.
• Sin desplazamiento horizontal en ningún ancho. Recorta el desbordamiento de elementos animados o desplazados con overflow-x: clip; hidden rompe el posicionamiento fijo.
• Los efectos vinculados al desplazamiento se ejecutan con animaciones CSS impulsadas por desplazamiento o un IntersectionObserver, no con el estado del framework escrito por evento de desplazamiento o por fotograma.
• La metaetiqueta viewport permite el zoom (sin user-scalable=no, sin maximum-scale=1). Las transiciones nombran sus propiedades en lugar de transition: all.
• Un sitio público envía un enlace de salto al contenido, un 404 personalizado, un favicon, título, meta descripción y etiquetas Open Graph, y enlaces legales en el footer.
• Mantén la especificidad CSS plana y verifica que las reglas de nivel de sección (.section) y las reglas de componente (.cta) no se cancelen entre sí el relleno o el margen.

Modo oscuro

• color-scheme: dark en la raíz, para que los controles de formulario y las barras de desplazamiento sigan el tema.
• El texto del cuerpo es blanco roto (alrededor de #E0E0E0, con matiz de la paleta), no blanco puro.
• Los acentos reducen un 10–20% de saturación de sus valores del tema claro.

Crítica y auditoría

Informa estos hallazgos dentro de la propia estructura de crítica o auditoría de la habilidad de diseño; no añaden nuevas secciones de informe.

• Prueba del tronco, por página: ¿podría un visitante por primera vez decir qué sitio es este, en qué página está, cuáles son las secciones principales, cuáles son sus opciones aquí, dónde está en la estructura y cómo buscar? Tres o menos respuestas claras es un hallazgo de alta gravedad.
• Buena voluntad: comienza en 70. Resta 15 por precios ocultos o detalles de contacto, o un tour forzado; 10 por formatos de entrada punitivos (rechazar espacios en un número de tarjeta) o solicitar información que la tarea no necesita; 5 por opción ambigua. Informa la puntuación con cada deducción.
• Primer vistazo: nombra las primeras tres cosas en las que se posa la vista, y si son las tres que importan.
• Happy talk: informa el recuento de palabras de la página y la proporción que es happy talk.

Rediseños

Antes de reemplazar la apariencia de un sitio en vivo, registra una línea base de SEO (títulos, meta descripciones, encabezados, URLs indexadas). Mantén los slugs de URL, las etiquetas de navegación, los nombres y el orden de los campos de formulario, el logotipo, el texto legal y de consentimiento, y los identificadores de análisis a menos que el usuario apruebe un cambio.

Variantes, composiciones y fuentes

• Dos variantes están demasiado cerca si sus titulares pudieran intercambiarse sin que nadie lo notara; lleva una de ellas más lejos.
• Para leer detalles en una composición generada, regenera esa sección más grande en lugar de recortar el tablero.
• La ronda de capturas de pantalla por lotes cubre anchos de 375, 768 y 1440px.
• Corrige una página construida con ediciones específicas en las partes que fallan; regenera archivos completos solo para una reconstrucción.
• Confirma cada fuente en su listado oficial (Google Fonts, Fontshare o la fundición) y toma su URL de allí; marca una cara no confirmada como pendiente en lugar de adivinar un nombre o URL.