Creador de Sitios Web de Marca Tecnológica

¿Qué hace Creador de Sitios Web de Marca Tecnológica?

Transforma el posicionamiento de la marca en un sitio web tecnológico listo para abrir, con el objetivo de alcanzar un acabado de nivel Awwwards. Entrega un index.html completo que incluye todos los estilos, interacciones y lógica responsive, sin pseudo-código ni partes omitidas. El objetivo de calidad no implica garantía de premios o respaldo de marca.

Uso y Salida

• Lee el nombre de la marca, producto, audiencia, idioma, material gráfico, objetivos de CTA y código existente proporcionados por el usuario. Las nuevas instrucciones del usuario tienen prioridad sobre los valores predeterminados de esta skill.
• Cuando falte información, completa la página con una marca demo clara y un texto coherente; no inventes clientes reales, certificaciones, métricas de rendimiento o premios. Los datos de ejemplo deben ser identificables como valores de demostración.
• Redacta por defecto en chino. Primero define una narrativa central de la marca y un eje visual principal, luego integra las siguientes características de diseño, evitando mezclar logotipos y tipografías de múltiples marcas de forma mecánica.
• Al generar el sitio web, guarda index.html en el directorio de salida escribible de la tarea. Si el usuario solicita la salida directa del código, responde con un bloque de código HTML completo; si solicita un archivo, entrega el enlace del archivo. No confundas la generación de esta skill con una solicitud para generar un sitio web de ejemplo.
• Este es un flujo de creación HTML local. Solo realiza acciones externas (despliegue, alojamiento o publicación) cuando el usuario lo solicite explícitamente.

Sistema Visual

Usa una cuadrícula de espaciado base de 8px y gestiona centralmente los parámetros de fondo, texto, bordes, colores de acento, espaciado, bordes redondeados y animación mediante variables CSS. Adapta automáticamente los modos claro y oscuro con prefers-color-scheme, asegurando que ambos modos tengan una jerarquía completa y legibilidad.

Integra los siguientes cuatro genes de diseño, asignando prioridad según el contenido:

• Apple: Amplio espacio en blanco y foco centrado; blanco #FFFFFF, negro #000000, texto corporal #1D1D1F, azul #0066CC. Tipografía sans-serif del sistema o Inter, priorizando pesos 300–600, con jerarquía entre títulos grandes y texto corporal fino. Navegación con vidrio esmerilado, sombras ligeras, escala scale(0.98) al presionar; revelación progresiva con cubic-bezier(0.25, 0.1, 0.25, 1), 400–600ms.
• Google: Cuadrícula Bento modular con agrupación de información clara. Azul #4285F4 como acento secundario; rojo #EA4335, amarillo #FBBC05, verde #34A853 solo para detalles menores en gráficos o estado. Paralaje natural y animaciones activadas por viewport, con suficiente espacio de respiración.
• Microsoft: Secciones técnicas oscuras, matrices digitales o cuadrículas de baja opacidad, fuente de luz azul-púrpura. Tarjetas con bordes redondeados de 6–12px, bordes nítidos, degradados sutiles en los bordes y resplandor exterior al hover; expresa profundidad mediante capas y sombras direccionales.
• Yingji Hurricane (影视飓风): Hero narrativo a pantalla completa, títulos superpuestos, subtítulos que aparecen línea por línea y transiciones de sección con scroll largo. Tonos fríos con resplandor azul-cian, partículas, líneas de escaneo y gráficos de datos que sirven a la narrativa; visualmente nítido y transparente, evitando la decoración excesiva.

Las áreas de contenido claro y las secciones técnicas oscuras pueden alternarse, pero mantén consistencia en tipografía, espaciado y componentes. Los acentos de color deben ser moderados; evita que todas las tarjetas usen diferentes colores de alta saturación simultáneamente.

Arquitectura de Página Predeterminada

1. Navegación: Fija en la parte superior, con fondo de vidrio esmerilado, que se vuelve más compacta y opaca al hacer scroll; subrayado animado al hover o despliegue suave. Menú hamburguesa completamente funcional en móvil.
2. Hero: Al menos un viewport de impacto visual cinematográfico, donde la navegación no oculte el título ni el CTA. Título de aproximadamente 64px en escritorio, 48px en móvil, usando clamp() para adaptarse a pantallas estrechas; subtítulo de aproximadamente 1.5rem. Dos CTA principales, fondo degradado de baja saturación, partículas o cuadrícula; los elementos entran en secuencia con retardo. Si no hay un video adecuado, usa un gráfico de producto CSS/SVG elaborado, sin depender de videos externos.
3. Destacados: Diseño Bento de 12 columnas en escritorio, combinando proporciones 7:5, 6:6, etc., para crear un ritmo asimétrico, evitando dividir todas las tarjetas en partes iguales. Las tarjetas se elevan al hover, se amplían ligeramente y muestran un resplandor en el borde, con soporte para inclinación ligera del puntero.
4. Narrativa de Contenido: Imagen y texto alternados a izquierda, derecha e izquierda, con secciones que presentan una progresión clara. En móvil, el orden de lectura debe ser natural y unificado. Al entrar al viewport, transición suave con fade-in, los elementos internos pueden elevarse 12px ligeramente, con paralaje de fondo suave.
5. Datos y Tecnología: Cuadrículas, incrementos numéricos, barras de progreso y gráficos técnicos; se activan una vez al entrar al viewport, mostrando el valor final exacto con su unidad al terminar.
6. Pie de Página: Cuatro columnas simples en escritorio, apiladas naturalmente en móvil, enlaces con desplazamiento sutil al hover, información de derechos de autor y marca completa en la parte inferior.

Implementación de Animaciones e Interacciones

• La animación estándar de interacción utiliza cubic-bezier(0.4, 0, 0.2, 1), aproximadamente 400ms. Las transiciones globales all del prompt original deben implementarse enumerando explícitamente propiedades como transform, opacity, box-shadow, border-color, evitando animaciones no deseadas en alto y ancho.
• La animación de desplazamiento típica es opacity: 0 → 1, translateY(24px) → 0, con un stagger de 150ms en el mismo grupo. Usa IntersectionObserver para activar bajo demanda; si el usuario no puede ejecutar JS o falla la CDN, el contenido debe seguir siendo visible.
• Botones: hover se elevan 2px y sombra más profunda, active escala 0.98; las tarjetas pueden ampliarse hasta 1.02, asegurando que no se recorten ni cubran contenido adyacente. El subrayado de enlaces se expande desde el centro.
• El fondo del Hero tiene un seguimiento ligero del puntero; las tarjetas ofrecen un resaltado cercano al cursor e inclinación limitada; los botones pueden tener ondas al hacer clic. Usa capas de transformación independientes o variables CSS para evitar que las animaciones de entrada, hover, inclinación y paralaje sobrescriban transform entre sí.
• Combina las actualizaciones de puntero y scroll mediante requestAnimationFrame, restableciendo al salir del puntero. Las partículas se implementan con Canvas de baja densidad o CSS; pausa cuando la página no es visible o el lienzo está fuera de pantalla. Evita lecturas continuas de diseño y creación repetitiva de DOM.
• Solo activa el seguimiento del puntero, el resplandor y el fondo de seguimiento cuando hover: hover y pointer: fine. En móvil, reduce el costo de partículas, paralaje y desenfoque, manteniendo el contenido principal y los CTA.
• Cuando prefers-reduced-motion: reduce esté activo, desactiva partículas, paralaje, seguimiento, inclinación, ondas y animaciones de desplazamiento; muestra inmediatamente el contenido completo, valores finales y progreso. Maneja tanto la inicialización de JS como los cambios de preferencia.

Restricciones Técnicas

• Archivo único HTML5, usando etiquetas semánticas header, nav, main, section, footer. Tailwind CSS v3 se importa mediante una CDN verificada y con versión explícita, sin mezclar configuración de v4.
• Estilos y lógica en línea, con comentarios de sección que indiquen estructura del documento, estilos de tema, componentes, responsive, accesibilidad e interacciones; explica el propósito de los estados de animación, observadores y lógica de degradado, sin repetir el significado del código línea por línea.
• Prioriza JS nativo; si es realmente necesario, importa una dependencia ligera de Anime.js, verificando la API oficial y el método de carga de la versión seleccionada. No mezcles la llamada anime() de v3 con la API animate() de v4. No agregues GSAP, jQuery ni otros frameworks para animaciones opcionales.
• Mobile-first: por defecto cubre menos de 640px, ajusta desde 640px, tableta a 768px, escritorio desde 1024px. Verifica pantallas estrechas de 320px, contenido horizontal y títulos largos, evitando desplazamiento horizontal.
• Usa unidades de viewport como 100svh para adaptarse a navegadores móviles; la navegación fija debe tener espacio superior de contenido, scroll-margin-top para anclas y un enlace de salto de navegación.
• Prioriza recursos del primer pliegue: la imagen principal del Hero no debe cargarse de forma perezosa; las imágenes inferiores se cargan de forma perezosa con dimensiones o relación de aspecto explícitas. Las imágenes tienen alt, y los gráficos decorativos usan aria-hidden. Las soluciones CDN requieren conexión a Internet; no declares disponibilidad offline completa; mantén CSS base en línea para reducir el impacto de fallos externos.
• Las interacciones usan botones y enlaces reales. Los botones de menú tienen nombre, aria-expanded y aria-controls; soporta Escape, foco razonable después de abrir, y devolución del foco al cerrar. Proporciona un :focus-visible claro; los menús ocultos no deben ser enfocables con el teclado.
• El contraste del texto corporal y la interfaz de usuario clave debe ser al menos 4.5:1. No uses tonos claros de azul tecnológico para texto de bajo contraste. Todos los CTA deben tener un destino válido o una interacción local completa; no uses href="#" vacío, descargas inválidas o solo avisos emergentes.

Verificación de Entrega

Abre el archivo generado en un navegador disponible y verifica en pantalla estrecha, tableta, escritorio, modos claro y oscuro, efectos reducidos, operación del menú con teclado, anclas, CTA, estado final de valores y errores de consola. Si no puedes ejecutar el navegador, realiza una revisión estática e indica honestamente el alcance de la verificación; no afirmes haber realizado una verificación real en el dispositivo.

Verifica que el contenido del primer pliegue sea legible sin esperar animaciones o CDN, las tarjetas no tengan desbordamiento, los títulos no estén ocultos, los recursos de imagen estén disponibles, las animaciones no entren en conflicto con las propiedades de transformación, y no haya contenido oculto cuando los efectos están desactivados. Corrige los problemas encontrados y entrega el archivo completo, sin omitir implementaciones con "similar" o comentarios de tareas pendientes.