BELLEZA / SPA · Claude Design · HTML

Vórtice Visual — Prompt de diseño web para Claude AI

★★★★★4,8 1.183 descargas

Plataforma de streaming de video y contenidos multimedia Espacio digital para disfrutar y crear videos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia Vórtice Visual, una plataforma de streaming y creación de contenidos de video. Usa únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. El proyecto debe reproducir el diseño de referencia (hero con video de fondo, mega‑menú, bloques en cuadrícula, botones animados y footer) pero con los siguientes requisitos:

- Paleta de colores: #0A0A0A (fondo oscuro), #FFFFFF (texto), #1E90FF (acentos azul), #F5F5F5 (gris claro para fondos secundarios).
- Tipografía: "Inter" para títulos y "Roboto" para cuerpo, ambos importados desde Google Fonts.
- Header: barra de navegación fija, logo a la izquierda (texto Vórtice Visual), mega‑menú con columnas que despliegan enlaces a Home, Servicios, Portafolio, Blog, Contacto. Botón "Contáctanos" a la derecha con efecto hover que cambia de color azul a blanco.
- Hero: sección a pantalla completa con video de fondo (placeholder mp4), overlay oscuro 40%, título grande "Mundo de video sin límites", subtítulo descriptivo, botón principal "Explorar" con animación de escala.
- Bloque "Nuestros Servicios": grid de 4 columnas, cada una con ícono, subtítulo y texto breve. Usa animaciones de aparición al hacer scroll.
- Llamada a la acción: botón circular con icono de flecha, efecto pulsante, enlaza a sección "Portafolio".
- Portafolio: grid de 3 columnas con tarjetas de proyecto (imagen, título, categoría). Hover muestra sombra y breve descripción.
- Testimonios: carrusel automático de 3 slides, cada slide con cita y avatar circular.
- Suscripción: formulario simple (email) con botón "Suscribirme", validación básica en JS.
- Footer: fondo #0A0A0A, columnas con enlaces rápidos, redes sociales (iconos SVG), dirección y correo.
- Todas las interacciones (menú desplegable, carrusel, scroll‑reveal) deben implementarse con JS puro sin dependencias externas.
- El HTML debe estar semánticamente estructurado (header, nav, main, section, footer). Incluye comentarios descriptivos.
- Asegúrate de que el sitio sea totalmente responsivo: colapsa el menú en icono hamburguesa en móvil, transforma la cuadrícula a una columna y adapta el video hero.

Entrega el código listo para copiar‑pegar en un archivo index.html que reproduzca fielmente este diseño con los textos originales en español proporcionados.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.660 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con video de fondo y mensaje principal
1.2 Cuatro columnas con título “Servicios”, subtítulo y texto descriptivo
1.3 Botón circular de llamada a la acción “Ver proyectos”
1.4 Sección de trabajos recientes en grid de 3 columnas
1.5 Testimonios rotativos con citas de clientes
1.6 Área de suscripción al newsletter
1.7 Footer con logo, enlaces útiles, redes sociales y datos de contacto

ABOUT US

1.1 Hero estático con título y párrafo introductorio
1.2 Historia de la empresa en dos columnas con imagen
1.3 Equipo destacado con tarjetas de perfil
1.4 Valores y misión en lista de iconos
1.5 Footer (misma estructura que home)

PORTFOLIO

1.1 Hero con filtro de categorías
1.2 Grid de proyectos (imagen + título + categoría)
1.3 Paginación
1.4 Footer

BLOG

1.1 Hero con barra de búsqueda
1.2 Lista de artículos en cards (fecha, título, extracto)
1.3 Sidebar con categorías y últimos posts
1.4 Footer

CONTACT

1.1 Hero con formulario de contacto (nombre, email, mensaje)
1.2 Mapa incrustado
1.3 Información de contacto y horarios
1.4 Footer

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Vórtice Visual
Sector: Plataforma de streaming de video y contenidos multimedia
Claim: Espacio digital para disfrutar y crear videos

Bloques de la home

1.1 Hero con video de fondo y mensaje principal
1.2 Bloque de servicios / beneficios en cuadrícula de 4 columnas
1.3 Llamada a la acción con botón animado
1.4 Portafolio de trabajos recientes (grid)
1.5 Testimonios y logotipos de clientes
1.6 Formulario de suscripción al boletín
1.7 Footer con enlaces, redes sociales y datos de contacto

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Vórtice Visual — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

PORTFOLIO

BLOG

CONTACT

Otros prompts de la misma categoría

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle