BLOG / REVISTA · Claude Design · HTML

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

★★★★★4,9 4.529 descargas

Agencia creativa especializada en diseño digital y desarrollo web Soluciones visuales que inspiran y convierten.

↓ 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 **Luminova Studios**, agencia digital de diseño y desarrollo, replicando el estilo visual y la arquitectura del sitio de referencia. Utiliza solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. 

**Paleta de colores** (extraída del original):
- #0D0D0D (negro profundo) 
- #1A202C (gris muy oscuro) 
- #2D3748 (gris carbón) 
- #4A5568 (gris medio) 
- #FFFFFF (blanco) 
- #38B2AC (turquesa accent) 

**Tipografía**: Inter (sans‑serif) para todo el texto; usar weights 400, 500, 600 y 700. 

**Estructura global**:
- **Header** fijado, con logo a la izquierda, menú principal centrado (Home, Projects, Services, About, Blog, Shop), botón "Contact" a la derecha y mini‑icono de carrito que muestra cantidad. En móvil, colapsar en ícono hamburguesa que despliega menú lateral. 
- **Hero** ocupando pantalla completa, fondo gris oscuro, título grande (4xl, peso 700, color blanco), subtítulo (lg, peso 400, tono #A0AEC0) y botón primario con fondo turquesa y flecha animada. 
- **Sección Proyectos**: grid 3‑col en desktop, 2‑col tablet, 1‑col móvil; cada tarjeta con imagen de fondo, overlay oscuro al hover y título centrado. 
- **Sección Servicios**: tres tarjetas horizontales con íconos SVG en turquesa, título en blanco y descripción gris claro. 
- **Testimonios**: carrusel simple (JS) que rota automáticamente, cada slide con foto circular, nombre, cargo y texto en gris. 
- **Blog**: tarjetas 2‑col con imagen, categoría, título y fecha. 
- **Footer**: fondo #1A202C, columnas: Navegación, Servicios, Legal, Suscripción. Incluye formulario de email (input con borde #38B2AC, botón turquesa) y enlaces a redes sociales (iconos SVG). 

**Interactividad**:
- Menú móvil abre/cierra con transición de 300ms. 
- Botón de carrito muestra cantidad y abre modal sencillo con lista de productos (solo markup estático). 
- Carrousel de testimonios avanza cada 5 s y permite navegación manual con flechas. 
- Enlaces de navegación con efecto de subrayado al hover. 

**Requisitos técnicos**:
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio. 
- Añadir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">` y aplicar `font-family: 'Inter', sans-serif;`. 
- Todo el CSS debe expresarse mediante clases de Tailwind (no CSS externo). 
- JavaScript debe estar dentro de `<script>` al final del body, sin dependencias externas. 
- Asegurar accesibilidad: `aria-label` en botones, `role="navigation"` en el header, contraste suficiente. 
- El HTML debe estar bien indentado y validado. 

Entrega el código completo listo para copiar‑pegar en un archivo `index.html`.

---

## 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>
```

3.041 caracteres · 53 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú y carrito
1.2 Hero con título, subtítulo y CTA
1.3 Cuadrícula de proyectos destacados
1.4 Tarjetas de servicios
1.5 Carrusel de testimonios
1.6 Últimas entradas del blog
1.7 Footer con enlaces, redes y suscripción

PROJECTS

2.1 Lista de proyectos en grid responsive
2.2 Filtro por categoría
2.3 Detalle de proyecto con galería y descripción

SERVICES

3.1 Presentación de servicios en secciones verticales
3.2 Iconos y descripciones breves

ABOUT

4.1 Historia y valores de la agencia
4.2 Equipo con fotos y roles

BLOG

5.1 Feed de artículos en tarjetas
5.2 Sidebar con categorías y últimos posts

SHOP

6.1 Catálogo de productos en grid
6.2 Página de producto con galería y botón "Añadir al carrito"

CONTACT

7.1 Formulario de contacto sencillo
7.2 Mapa incrustado y datos de ubicación

PROMPTS RELACIONADOS · BLOG / REVISTA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luminova Studios
Sector: Agencia creativa especializada en diseño digital y desarrollo web
Claim: Soluciones visuales que inspiran y convierten

Bloques de la home

1.1 Cabecera con logo, menú principal, botón de contacto y carrito; 1.2 Hero con título, subtítulo y llamada a acción; 1.3 Cuadrícula de proyectos destacados; 1.4 Servicios en tarjetas con íconos; 1.5 Testimonios con carrusel sencillo; 1.6 Blog reciente con tarjetas; 1.7 Pie de página con enlaces, redes y formulario de suscripción

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