Landing page pulida, paso 1: forma e identidad

Signature — canal de forma e identidad para OpenCode

Derivado de Top 50 Websites for Design Inspiration (50 sitios abiertos en vivo en un navegador, verificados el 22 de octubre de 2026) más el núcleo del proceso de Hallmark de Nutlope. Cada forma e identidad nombra evidencia real del corpus — la biblioteca son observaciones, no folclore de gustos.

División del trabajo (sin difuminar)

• frontend-design es dueño de la artesanía: dirección de arte, juicio tipográfico, juicio cromático, filosofía de movimiento, redacción, el bucle de autocrítica. Cuando se carga, síguelo — no repliques sus reglas aquí.
• Signature es dueño del proceso y la biblioteca: qué forma de página tiene esta construcción, qué identidad lleva, el registro de no repetición, y una lista mecánica de compuertas (para grepear y computar).

Verbos

Construir (por defecto)

1. Divide el briefing en: dominio, audiencia y palabras de energía ("cinematográfico", "denso", "personal", "grandioso").
2. Elige una forma de references/structures.md. Dila en una línea: Shape: <nombre> (runner-up: <nombre> ). Si el briefing es vago, ofrece el trío del dominio — nunca uses silenciosamente el valor por defecto.
3. Verifica contra el corpus: abre 1–2 URL de evidencia de las filas de forma/identidad con el MCP de Playwright (herramientas de navegación + captura de pantalla) o webfetch. Un enlace muerto promueve la siguiente fila. Los anclajes de paleta son semillas hasta que hayas visto la página en vivo.
4. Elige una identidad de references/identities.md que comparta el estado de ánimo de la forma, luego corrige sus semillas de token contra lo que realmente viste.
5. Escribe los tokens primero: un bloque semántico :root + el sello (abajo), antes de cualquier CSS de componente.
6. Construye. Un elemento memorable carga la página; todo lo demás se mantiene en calma (regla de moderación de frontend-design — aplícala, no la rederives).
7. Ejecuta todas las Compuertas y corrige cada fallo. Luego la pasada de gusto — a través de frontend-design si está cargado, de lo contrario contra su lista de calibración de rasgos típicos de IA.

audit <objetivo>

Lee el código/sitio y ejecuta solo las Compuertas. Cada fallo es un punto: archivo:línea — compuerta n.º — corrección en una línea. Solo hallazgos mecánicos; cuando algo es un problema de gusto, nombra el principio relevante de frontend-design en una línea en lugar de inventar una nueva regla. Si existen sellos, informa si la forma repite una construcción anterior.

redesign <objetivo>

Mantén la arquitectura de la información, el texto y los activos de marca. Busca con grep los sellos: la nueva forma debe diferir de la última forma sellada. La identidad puede rotar; cambiar la voz de la marca o la paleta requiere preguntar primero.

study <url | captura de pantalla>

Abre la fuente. Extrae: orden de secciones → forma más cercana; anclajes de paleta (muestra colores reales); roles tipográficos y cualquier fuente observada → identidad más cercana. Emite una línea: study: source=<url> shape≈<Shape> identity≈<Identity> anchors=<hexes>. Si nada en la biblioteca encaja, añade una nueva fila de identidad (formato al final de identities.md) — pero nunca sustituyas silenciosamente el resultado del estudio por una selección de la biblioteca: si el usuario quiere el ADN estudiado textualmente, el sello se convierte en identity=studied:<source> y los valores del estudio se convierten en los tokens.

El registro es código

• Sello en la parte superior de la hoja de estilos principal (y reflejado en la cabecera de index.html para construcciones solo HTML): /* signature: shape=<Shape> identity=<Identity> refs=<urls realmente abiertas> */
• Antes de elegir, busca con grep los sellos existentes en el proyecto. Dos construcciones consecutivas no comparten forma; es preferible no reutilizar la identidad.
• No hay archivo de registro separado. El CSS es el registro.

Contrato

• Los tokens de diseño viven en un solo lugar (propiedades personalizadas :root o el tokens.css/@theme de Tailwind del proyecto). Los nombres son roles semánticos (--color-ink), no valores.
• Reutiliza los nombres de token del proyecto en lugar de sobrescribirlos; extiende el tema de Tailwind, nunca uses valores arbitrarios en línea.
• Una hoja de estilos global existente es solo para añadir: mantén cada directiva @tailwind/@import "tailwindcss" exactamente en su lugar, añade tokens debajo de las reglas existentes, y coloca cualquier @import nuevo al principio. Nunca elimines silenciosamente directivas del framework — eso desestiliza toda la aplicación. Reescribe por completo solo si se solicita explícitamente.
• Ajusta las convenciones de archivos del framework. No reinventes patrones de enrutamiento/diseño que el proyecto ya tenga.
• Alcance: este es un proceso de gusto. Sin texto inventado (si el usuario no ha dado palabras, pregunta); sin lógica de negocio; sin elegir una identidad de marca de la nada — sigue una que te hayan dado.

Compuertas (mecánicas — cada respuesta debe ser "no"; cada fallo = una corrección antes de la entrega)

Disciplina de tokens

1. Fallo si algún #hex, oklch(), rgb() o font-family aparece en un componente que no resuelve a un token nombrado. Súbelo o sustitúyelo.
2. Fallo si algún padding/gap/margin está fuera de la escala de espaciado del proyecto (múltiplos de 4px en ausencia de un token nombrado). Un 17px arbitrario es una señal.
3. Fallo si falta el comentario de sello, o nombra URL que nunca se abrieron realmente.

Supervivencia del diseño 4. Fallo si la página se desplaza horizontalmente en algún ancho de viewport 320–1920px. overflow-x: clip en ambos html y body (no hidden — clip preserva sticky/fixed). 5. Fallo si alguna pista de cuadrícula/fila 1fr que contiene una imagen no es minmax(0, 1fr). 6. Fallo si el texto de tamaño de visualización carece de overflow-wrap: anywhere (y min-width: 0 en su contenedor) — las palabras compuestas largas desbordan en móviles. 7. Fallo si el texto clickeable (botón, navegación, pestaña, etiquetas de CTA) puede envolver a 2 líneas en 320/375/768/1280px.

Hechos del código 8. Fallo en transition: all — nombra las propiedades. 9. Fallo si un elemento lleva más de un efecto hover (translate + scale + shadow + color combos). 10. Fallo si los inputs cambian border-width entre estados; los cambios de estado van a color/outline/shadow. Los anillos de enfoque son outline, no border. Deshabilitado necesita ≥2 de: opacidad, cursor: not-allowed, disabled/aria-disabled. 11. Fallo si algún <svg>/<canvas>/elemento decorativo no tiene ni aria-hidden="true" ni un nombre accesible.

Movimiento y rendimiento 12. Fallo si alguna animación/keyframe carece de un fallback prefers-reduced-motion: reduce. 13. Fallo en contenido que rota automáticamente sin pausa al hacer hover y focus (WCAG 2.2.2). 14. Fallo si el activo héroe LCP es loading="lazy", o un video héroe carece de poster/fetchpriority="high".

Contraste y honestidad 15. Fallo si algún par color/fondo no cumple WCAG 4.5:1 (cuerpo) o 3:1 (texto grande, iconos, anillos de enfoque). Dos puntos calientes: texto que hereda un color mientras un padre cambió de superficie; relleno de botón dentro del 5% de luminosidad de su texto. 16. Fallo en hechos fabricados — métricas, porcentajes, citas, nombres, precios que el usuario nunca proporcionó, llenando espacios de estadísticas. Los espacios de marcador dicen "confirmar", nunca inventar. 17. Fallo en emoji usado como icono de característica/paso/precio; un máximo de una biblioteca de iconos por página. 18. Fallo en chrome redibujado: barras de navegador falsas, muescas de teléfono falsas, marcos de ventana de terminal/IDE falsos. Usa una captura de pantalla real o nada.

Disciplina de biblioteca 19. Fallo si una fuente cargada no es una webfont gratuita/licenciada conocida. Las fuentes de fundición en el corpus (Commercial Type, Klim, Grilli Type, type.today, Pangram Pangram trials) son referencias de visualización — verifica la licencia, pregunta antes de pagar. Google Fonts y las fuentes variables abiertas pasan. 20. Fallo si la forma de esta construcción coincide con el sello más reciente del proyecto (busca con grep primero, según la regla del registro).

Referencias — lee bajo demanda, nunca todo a la vez

• references/structures.md — diez formas de página con esqueletos, evidencia y la tabla de trío de dominio. Lee al elegir forma (construir/rediseñar/auditar).
• references/identities.md — veinte identidades: semillas de paleta, combinaciones de fuentes, evidencia del corpus. Lee al elegir identidad (construir/rediseñar/estudiar).

Ejemplo trabajado (de la guía del propio corpus)

Briefing: "Meet India Journeys — sitio de operador turístico para un viaje fluvial y patrimonial por Kerala." Palabra de dominio "viaje" → trío es Scroll Story · Case Catalog · Luxury Ledger. Elige Scroll Story (runner-up: Case Catalog) porque el tema son lugares mostrados uno a la vez. Abre apple.com y simplychocolate.dk en vivo para estudiar el ritmo de capítulos, el contenido héroe y el tratamiento a sangre. Identidad: Forest Confection (verde intenso + cacao, display condensado) encaja con río y patrimonio; muestra la referencia en vivo antes de fijar los tokens. Sello: /* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */