badmuriss/incredibly-pretty-websites

Sitios web increíblemente bonitos

Una única fuente de verdad para las decisiones visuales y técnicas detrás de un sitio web que parece haber sido creado por un equipo de producto real, no por un modelo de lenguaje que adivinó "moderno y limpio".

Coordinación con $refero-design

Cuando $refero-design esté disponible, cárgalo primero y déjalo que se encargue de la investigación visual, el enrutamiento de herramientas Refero, la síntesis, el bloqueo de referencia y el libro de decisiones. Utiliza esta habilidad después de ese bloqueo para implementar las restricciones de implementación: el alcance del sistema existente, el modo de superficie, las opciones de framework, la artesanía espacial y de interacción, el comportamiento responsivo, las comprobaciones anti-slop y la validación renderizada.

La secuencia es fija:

1. $refero-design investiga estilos, pantallas y flujos en proporción a la tarea.
2. $refero-design elige una dirección principal y registra las influencias secundarias acotadas.
3. Esta habilidad traduce el bloqueo aprobado en un contrato de dirección y una UI de producción.
4. Esta habilidad valida el resultado renderizado contra el bloqueo y las plataformas compatibles.

No ejecutes ambas habilidades como autoridades de gusto que compiten. Refero proporciona evidencia de producto y visual. Esta habilidad proporciona la disciplina de ejecución en frontend. Si el MCP de Refero no está disponible, $refero-design utiliza su respaldo integrado, y luego esta habilidad continúa desde el bloqueo resultante.

El framework predeterminado es React (Vite / Next / vite-react-ssg). Astro, Vue y vanilla CSS/JS también son ciudadanos de primera clase; los modismos específicos de cada framework están en framework-adapters.md. Si no se especifica nada, asume React. Cuando el sistema existente es Astro o el resumen requiere EmDash, conserva el renderizado del servidor y usa componentes de Astro por defecto, añadiendo islas de framework solo donde la interacción realmente las necesite.

Cómo usar

0. Lee direction-workflow.md. Resuelve la verdad del sistema existente, luego establece CHANGE_SCOPE y SURFACE_MODE.
1. Investiga en proporción al alcance. La investigación completa es obligatoria para world; local hereda la superficie circundante.
2. Utiliza el preajuste de tipo de proyecto (Sección 1) para calibrar la restricción del dominio y el costo técnico, no para elegir la estética.
3. Deriva la dirección a partir de la evidencia. Utiliza los arquetipos de ambiente y diseño como vocabulario y desafiantes, nunca como un menú obligatorio.
4. Registra el contrato de dirección antes del código, luego construye cada sección desde cero.
5. Aplica las referencias técnicas para espaciado, movimiento, estados, capacidad de respuesta y accesibilidad.
6. Haz una autoevaluación contra la Sección 14 y las Marcas de IA en la Sección 13, luego completa los pases visuales acotados.

Archivos de referencia:

• direction-workflow.md — contexto objetivo, CHANGE_SCOPE, SURFACE_MODE, contrato de dirección, compuerta de maquetas, finalización acotada
• foundations.md — límites autorizados para el tipo de héroe, altura del puerto de vista, propiedades de movimiento, cejas y prioridad del sistema existente
• spatial-design.md — escala de 4 puntos, jerarquía, consultas de contenedor
• motion-design.md — easing, duraciones, movimiento reducido, un catálogo de patrones de transición
• interaction-design.md — los 8 estados, focus-visible, popovers, modales
• laws-of-ux.md — heurísticas de composición con investigación nombrada: Hick, Miller, Fitts, Von Restorff, Peak-End, Jakob, carga cognitiva
• form-validation.md — tiempo de validación, la máquina de estados de entrada, :user-invalid, resúmenes de errores, esquema como contrato entre pilas
• responsive-design.md — mobile-first, consultas de puntero, área segura, srcset
• framework-adapters.md — equivalentes de React / Vue / vanilla para movimiento, estado, hidratación
• component-libs.md — (solo React) componentes animados copiados: Magic UI, React Bits, iconos animados de Lucide a través del registro de shadcn
• scroll-motion.md — (Nivel 3) GSAP ScrollTrigger + Lenis smooth-scroll, con barreras de rendimiento/accesibilidad
• design-references.md — (investigación, gratuita) la capa de investigación sin Refero: leer los tokens reales de un sitio en vivo, paquetes DESIGN.md, galerías gratuitas, sistemas de diseño públicos y un banco de segmento → referencias
• media-pipeline.md — fotografía de stock gratuita (Pexels/Unsplash/Pixabay/dominio público, con las reglas de alojamiento por fuente) + catálogo con licencia de Magnific a través de REST + imágenes generadas a través de dos vías pares ($image-gen / Magnific MCP), rutas de recorte alfa, + (Nivel 3, con límite de costo) imagen→video a través de Magnific, con una receta <video>
• style-interview.md — (modo entrevista) cuándo preguntar al usuario por la dirección, el guión de la ronda, cómo construir candidatos a partir de la investigación en lugar de ofrecer la lista de arquetipos como menú
• redesign.md : (modo rediseño) Escanear, Diagnosticar, Arreglar; detección de modo (Greenfield / Preserve / Overhaul); lo que nunca cambia en silencio
• conversion-diagnosis.md — (páginas de aterrizaje) la compuerta de entrega previa al texto más el diagnóstico de adquisición y conversión en diez capas

El SEO, las puntuaciones de accesibilidad y los Core Web Vitals no se auditan aquí. Esta habilidad construye; la verificación de una URL en vivo pertenece a la habilidad site-audit, que posee las reglas de SEO en la página (título, meta, canónico, OG, esquema, robots, sitemap), la capa AEO/GEO, la ejecución de axe-core y el presupuesto de CWV. Construye según la lista de verificación previa al vuelo de §14, luego apunta site-audit a la URL desplegada.

Una página de aterrizaje en vivo se diagnostica antes de reescribir su texto. Lee conversion-diagnosis.md, abre la página desplegada en un perfil de navegador de usuario real y en un perfil renderizado de Googlebot, y establece si ambos reciben una página funcional. Un script roto, una primera pantalla lenta, un rastreador bloqueado, un CTA muerto o un formulario inutilizable superan el pulido del texto. El SEO gana la visita; la experiencia entregada tiene que convertirla en un cliente potencial.

---

Dos modos: autónomo (predeterminado) vs entrevista

Autónomo (predeterminado): trabaja a partir del contexto que ya tienes más suposiciones razonables del preajuste. No le preguntes nada al usuario. ¿Falta un detalle? Asume el valor más probable, anota la suposición en una línea, continúa. Este es el único modo seguro cuando no hay un humano en el bucle.

Entrevista: se activa cuando la invocación lo solicita explícitamente (--interview, "modo entrevista", "pregúntame qué estilo"), o cuando CHANGE_SCOPE=world, la sesión está atendida y el usuario no ha fijado ninguna referencia ni marca. Se ejecuta en dos fases: recopila el resumen (segmento/producto, audiencia, objetivo, tono, objeción, restricciones, sitios que ya les gustan), luego investiga primero y vuelve con dos o tres direcciones concretas para elegir — lienzo, tipo, acento, estrategia de medios, movimiento característico y el producto real del que proviene cada uno. El objetivo es un sitio con la cara del usuario en lugar de un predeterminado competente.

Ambos modos realizan la investigación en la Sección 0, y ambos terminan en el mismo bloqueo de referencia y contrato de dirección. La única diferencia es quién toma la decisión de gusto. Protocolo completo, guión de preguntas, la regla anti-menú y los límites de ronda: style-interview.md.

¿Rediseñando un sitio existente en lugar de construir desde cero? Consulta redesign.md para el modo de rediseño (Escanear, Diagnosticar, Arreglar) y las reglas de Preservar vs. Revisar. Ambos modos anteriores siguen siendo aplicables; un rediseño simplemente también protege lo que el sitio en vivo ya gana.

---

0. INVESTIGAR PRIMERO — proporcional al alcance del cambio

No negociable para CHANGE_SCOPE=world. Una marca totalmente definida no excusa saltarse la investigación estructural para un mundo nuevo o de reemplazo. Para surface, investiga estructuras y flujos comparables mientras preservas el sistema existente. Para local, la superficie circundante es la evidencia principal; investiga solo lo que no pueda responder. Consulta direction-workflow.md.

Cada decisión visual comienza a partir de evidencia de lo que los productos reales realmente lanzaron, no de la memoria del modelo sobre "buen gusto". Los modelos son fuertes en código y lógica, y débiles en gusto de producto, por lo que debes anclar el gusto a referencias reales.

Dónde investigar

Premium recomendado — Refero (refero.design). Si las herramientas mcp__refero__* están disponibles, úsalas primero. Tres capas:

• Estilos (dirección visual, comienza aquí): refero_search_styles(query) → refero_get_style(...).
• Pantallas (UI concreta): refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...), refero_get_similar_screens(...), refero_get_screen_image(...).
• Flujos (viajes de varios pasos — incorporación/compra): refero_search_flows(...) → refero_get_flow(...).
• Las pantallas usan UUIDs, los flujos usan IDs numéricos. Pagina solo con page. get_screen_image cuesta una llamada de visión — úsalo solo cuando necesites inspeccionar píxeles.

Ruta gratuita (sin Refero) — design-references.md. Refero hace que este paso sea rápido; no es lo que lo hace posible. La ruta gratuita produce el mismo bloqueo de referencia a partir de la misma clase de evidencia, y el archivo contiene toda la agenda de contactos: cómo leer los tokens reales de un sitio en vivo con curl/WebFetch (la evidencia más sólida que existe, mejor que cualquier captura de pantalla), los paquetes DESIGN.md de código abierto (de primera mano en VoltAgent/official-design-md, más de 70 marcas de ingeniería inversa en VoltAgent/awesome-design-md), las galerías verificadas como gratuitas (siteinspire, httpster, minimal.gallery, onepagelove secciones, dark.design, navbar.gallery, footer.design), los sistemas de diseño públicos y un banco de segmento → productos reales para estudiar para que nunca comiences desde una consulta en blanco.

Versión corta si no lees nada más: elige dos o tres productos reales en el segmento, ábrelos, extrae su pila de tipos y propiedades CSS personalizadas, nombra qué hace que cada uno sea bueno y regístralo. Nunca bloquees un rasgo que no hayas mirado realmente.

El flujo de trabajo

1. Contexto + resumen breve: resuelve la verdad del sistema existente, CHANGE_SCOPE, SURFACE_MODE, qué / para quién / plataforma / objetivo / tono / objeción / restricción. (Autónomo: infiere. Entrevista: pregunta.)
2. Estilos primero: dos o tres búsquedas desde diferentes ángulos — uno estético, uno de dominio/segmento, una marca de referencia sólida. Abre de una a tres direcciones sólidas.
3. Pantallas/flujos cuando necesites estructura de pantalla concreta o lógica de viaje. Para SURFACE_MODE=persuade, el objetivo de píxel debe ser en sí mismo una superficie de marketing persuasiva con un medio focal visible. Las páginas legales/términos, documentación, directorios, registros de cambios, índices de archivo, paneles y páginas editoriales solo de texto son contraejemplos, nunca el bloqueo de pantalla principal. Nombra el medio focal del objetivo y un momento visual de apoyo antes de codificar. Si la pantalla inspeccionada funciona debido a fotografía, ilustración, imágenes de producto o movimiento, preserva ese papel de medios. Reemplazarlo con tipografía, reglas, metadatos o tarjetas vacías es desviación de referencia.
4. Sintetizar — no promediar. Elige una dirección principal dominante y preserva sus rasgos distintivos. Las referencias secundarias prestan un detalle cada una. Nunca la media tibia de todo: si una referencia es oscura, una es serifa, una es ácida, la respuesta no es crema educada + serifa educada.
5. Bloqueo de referencia + libro de decisiones + contrato de dirección antes de codificar:
   • Bloqueo de referencia: la dirección principal + de tres a cinco rasgos a preservar (lienzo, tipo, acento, diseño, densidad, medios) + qué tomar prestado de las secundarias + reglas de roles (solo CTA, solo código, solo decorativo) + estrategia de medios (real / generado / stock / marcador de posición).
   • Libro de decisiones: una tabla decisión | fuente | rol/regla | por qué. Cada elección visual importante se remonta a una referencia, una restricción del cliente, una verdad visual existente o una regla de artesanía en esta habilidad. Sin fuente significa que no se envía.
   • Contrato de dirección: los cinco bloques cortos en direction-workflow.md. El pase final verifica el renderizado contra ellos.
6. Implementar usando los preajustes (Sección 1), niveles (PREMIUM_TECH_TIER) y reglas anti-slop (Sección 13).

Qué anula qué (investigación vs esta habilidad)

DURO — la verdad del producto, la accesibilidad y el sistema existente ganan:

• En el ámbito local y surface, los tokens de marca establecidos y las convenciones de componentes superan los valores predeterminados de gusto de esta habilidad. No reemplaces una fuente existente, el color de marca púrpura, el sistema Lucide, el radio o el lenguaje de componentes a menos que el usuario autorice un rediseño o solicite eliminar esa marca. Consulta foundations.md.
• La accesibilidad, la corrección semántica, el comportamiento funcional, los activos reales y las restricciones explícitas del usuario siempre ganan. Arregla un error de contraste sin usarlo como permiso para rediseñar el producto.
• En el ámbito world, los rasgos de contenido y gusto se aplican a cada nueva elección: uso excesivo de em-dash, píldoras decorativas flotantes, púrpura de IA por reflejo, fuentes predeterminadas sin razón, personas falsas de IA en testimonios e iconos dentro de cajas decorativas.
• No clones un estilo directamente; mantén los roles de token intactos (un acento solo para CTA permanece solo para CTA).

SUAVE — una referencia real gana (estructura y diseño):

• La estructura de la página, el orden y número de secciones, la forma del pie de página, la forma del héroe, la variación del diseño, la densidad: se rigen por la investigación, no por una plantilla fija. Las reglas estructurales en esta habilidad son valores predeterminados sensatos, no ley — si las referencias muestran una estructura diferente y buena para el caso, sigue las referencias.
• La estructura solo está "mal" si rompe la usabilidad, la conversión o la capacidad de respuesta — no porque diverja del valor predeterminado de esta habilidad.

0.1 — Visu

...