AGENCIA DIGITAL · Claude Design · HTML

PixelCine — Prompt de diseño web para Claude AI

★★★★★4,7 2.431 descargas

Agencia de producción y contenidos audiovisuales Herramientas y diseños para contar historias en movimiento.

↓ 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 **PixelCine** (agencia de producción audiovisual) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. El diseño debe replicar la estructura y estilo del sitio analizado: 

- **Paleta de colores**: fondo principal #0a0a0a, textos #ffffff, acentos #ff6b6b, #00d1b2, sombras sutiles y degradados transparentes. 
- **Tipografía**: encabezados con *Inter* (sans‑serif, peso 700) y cuerpo con *Roboto* (peso 400). 
- **Header**: barra fija con logo a la izquierda, menú horizontal (EnlaceDemo, EnlaceFeatures, EnlaceFigma, EnlaceUsabilidad) y botón de acción destacado “Comprar ahora” en esquina derecha (visible solo en escritorio). En móvil, colapsar en icono hamburger que despliega el menú. 
- **Hero**: sección a pantalla completa con fondo ligeramente grisáceo y forma difusa. Texto centrado: título grande, subtítulo y botón CTA “Explorar Demo”. A la derecha, imagen de mockup de teléfono con efecto de escala y sombra. Animaciones de entrada (desplazamiento y fade) al cargar. 
- **Sección Core Features**: contenedor ancho con subtítulo con icono, encabezado “Descubre las características clave”. Grid de 3 columnas, cada tarjeta con icono SVG, título (p. ej. “14+ Páginas”, “20+ Secciones”, “2+ Componentes”) y descripción corta. Añadir formas difusas decorativas alrededor del grid. 
- **Sección promocional de vídeo**: fondo con patrón difuso, overlay semi‑transparente, y área que simula un reproductor de vídeo (imagen placeholder). Texto opcional superior “Ver en acción”. 
- **Footer**: fondo negro, columnas con enlaces de navegación, información de contacto (email hola@pixelcine.com) y iconos de redes sociales (SVG). Mantener tipografía pequeña y contraste alto. 
- **Interactividad**: menú hamburger toggles, smooth scroll a anclas, botones con efecto hover (cambio de fondo a degradado). 
- **Responsividad**: adaptaciones para móvil (stack de columnas, menús colapsados, hero imagen centrada). 
- **Requisitos técnicos**: incluir enlaces a Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`), cargar fuentes Google, usar `data-` atributos para animaciones simples con JS, evitar dependencias externas. Estructura el HTML con secciones claramente identificadas (`<header>`, `<section id="hero">`, `<section id="features">`, `<section id="promo">`, `<footer>`).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú y botón "Comprar ahora"
1.2 Hero con título, subtítulo, botón CTA y visual de mockup de dispositivo
1.3 Sección "Características clave" con subtítulo, encabezado y grid de 3 tarjetas
1.4 Sección promocional de vídeo con fondo difuso y overlay
1.5 Footer con enlaces a sección, política y redes sociales

DEMO

1.1 Título de demostración
1.2 Galería de capturas de pantalla
1.3 Botón para ver demo completa

FEATURES

1.1 Encabezado de características
1.2 Lista de tarjetas describiendo páginas, secciones y componentes

USABILITY

1.1 Texto informativo sobre usabilidad y configuraciones
1.2 Iconos y ejemplos de interacción

CONTACTO

1.1 Formulario simple de contacto
1.2 Información de email y teléfono
1.3 Enlaces a redes sociales

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: PixelCine
Sector: Agencia de producción y contenidos audiovisuales
Claim: Herramientas y diseños para contar historias en movimiento

Bloques de la home

1.1 Cabecera fija con logo, menú lateral y botón de acción
1.2 Hero principal con título, texto descriptivo, botón CTA y visual de dispositivo
1.3 Bloque de características centrales en cuadrícula de 3 columnas
1.4 Sección promocional con fondo difuminado y vídeo simulacro
1.5 Pie de página 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