AGENCIA DIGITAL · Claude Design · HTML

CineFlux Studios — Prompt de diseño web para Claude AI

★★★★★4,6 1.988 descargas

Agencia creativa especializada en producción y edición de vídeo Ideas visuales que cobran vida.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "CineFlux Studios" (agencia creativa de producción audiovisual) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Replicar el diseño analizado: 
- **Paleta de colores**: #0A0A0A (fondo principal), #FFFFFF (texto), #F5A623 (accento naranja), #E5E5E5 (gris claro), #1A1A1A (secciones oscuras). 
- **Tipografía**: Heading = "Inter" 700, Body = "Inter" 400, cargar vía Google Fonts. 
- **Header**: barra fija con logo a la izquierda, menú horizontal (Demo, Features, Video, Contact), botón destacado “Comprar ahora” a la derecha, hamburguesa para móvil. 
- **Hero**: contenedor con fondo oscuro y forma difusa (usando pseudo‑elementos y blur), título grande, subtítulo, botón primario “Explorar Demo”, imagen de móvil simulada a la derecha con efecto de escala y sombra. 
- **Core Features**: sección con subtítulo pequeño, heading central, grid de 3 tarjetas, cada tarjeta con icono SVG (home, sections, components), título y breve descripción. Añadir formas abstractas de fondo (blurred blobs) como en el original. 
- **Video promocional**: zona con imagen de fondo, overlay semi‑transparente, botón de reproducción centrado que abre un modal con vídeo embebido (YouTube placeholder) y controles personalizados. 
- **Demo**: bloque con captura de pantalla del demo, texto breve y botón “Ver demo”. 
- **Footer**: fondo oscuro, columnas con enlaces (Home, Features, Video, Contact), redes sociales (iconos SVG), texto de copyright y enlace de política de privacidad. 
- **Interactividad**: menú hamburguesa que despliega navegación en móvil, scroll suave, animaciones de aparición (fade‑up) al hacer scroll usando IntersectionObserver, modal de vídeo con cierre al hacer clic fuera. 
- **Requisitos técnicos**: incluir Tailwind CDN `<script src="https://cdn.tailwindcss.com"></script>`, cargar Google Fonts, usar `class="animate-fade-in"` con keyframes personalizados, todo el CSS inline via Tailwind utilities, JavaScript al final del body. No incluir contenido real de la web original; generar textos originales en español de España. Entregar el código listo para copiar‑pegar.

---

## 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.497 caracteres · 28 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y botón de compra
1.2 Hero con título, subtítulo, botón y visual de móvil sobre fondo difuso
1.3 Core Features grid de 3 tarjetas
1.4 Video promocional con overlay
1.5 Demo interactiva (sección placeholder)
1.6 Footer con enlaces y redes sociales

DEMO

2.1 Galería de imágenes y captura de pantalla del demo
2.2 Botón de descarga y enlace a proyecto en línea

FEATURES

3.1 Detalle ampliado de cada característica con icono y descripción
3.2 Layout en dos columnas con ilustraciones

VIDEO

4.1 Reproductor incrustado con controles personalizados
4.2 Texto descriptivo y llamada a acción

CONTACT

5.1 Formulario de contacto simple (nombre, email, mensaje)
5.2 Información de contacto y mapa embebido

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: CineFlux Studios
Sector: Agencia creativa especializada en producción y edición de vídeo
Claim: Ideas visuales que cobran vida

Bloques de la home

1.1 Header con logo, menú y botón de compra
1.2 Hero con título, subtítulo, botón y visual de móvil sobre fondo difuso
1.3 Sección Core Features: subtítulo, encabezado y 3 tarjetas con iconos y texto
1.4 Sección Video promocional: imagen de fondo, overlay y reproducción de vídeo
1.5 Sección Demo interactiva (placeholder)
1.6 Footer con enlaces de navegación y redes sociales

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