ARQUITECTURA · Claude Design · HTML

LuminCorte — Prompt de diseño web para Claude AI

★★★★★4,7 1.831 descargas

Salón de peluquería de alta gama Diseño elegante para estilos contemporáneos.

↓ 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 **LuminCorte** (salón de peluquería premium) usando **HTML estático + Tailwind CSS CDN + JavaScript vanilla** en un solo archivo. El objetivo es reproducir el diseño visual y la arquitectura de la plantilla analizada, sin copiar contenido textual.

**Alcance**:
- Página principal (HOME) con header, hero con título, descripción, dos botones CTA ("Explorar demo" y "Ver vídeo"), y un carrusel de imágenes tipo slider que muestre capturas de pantalla (usar placeholders). 
- Sección "Core Features" con subtítulo con ícono, título y una cuadrícula de 3 tarjetas; cada tarjeta muestra un número destacado, icono, encabezado y breve texto.
- Footer persistente con logo compacto, enlaces de sección y iconos de redes sociales.
- Otras páginas (Features, About, Services, Portfolio, Blog, Contact) siguiendo la misma barra de navegación y footer; cada una con bloques descritos en la tabla.

**Paleta de colores** (extraída del original):
- #0D0D0D (fondo negro profundo)
- #FFFFFF (texto blanco)
- #F2C94C (amarillo dorado accent)
- #E0E0E0 (gris claro para bordes y fondos secundarios)
- #212121 (gris medio para textos secundarios)

**Tipografía**: usar "Inter" para todo el cuerpo y "Playfair Display" para títulos grandes (cargar desde Google Fonts).

**Header**: logo a la izquierda (placeholder SVG), menú de navegación horizontal centrado, botón CTA a la derecha con fondo amarillo y texto negro. En móviles, colapsar en hamburguesa con overlay.

**Hero**: fondo con gradiente oscuro > negro, texto alineado a la izquierda, botón primary (amarillo) y secondary (borde blanco), a la derecha un slider horizontal con imágenes responsive.

**Sección Core Features**: sección con fondo blanco, texto centrado, tarjetas con borde sutil, número grande en círculo amarillo, icono gris y título en negro.

**Footer**: fondo negro, texto gris claro, links en blanco, iconos de redes (Facebook, Instagram, Twitter) en blanco que cambian a amarillo al hover.

**Interactividad**:
- Menú hamburguesa abre/cierra overlay con transición.
- Slider del hero avanza automáticamente y al hacer click en flechas.
- Lightbox para imágenes de la galería del portfolio.
- Formulario de contacto con validación básica (campos obligatorios).

**Requisitos técnicos**:
- Incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">` y `<script src="https://cdn.tailwindcss.com"></script>`.
- Cargar fuentes con `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">`.
- Todo el CSS adicional debe escribirse dentro de un `<style>` usando las clases de Tailwind cuando sea posible.
- JavaScript vanilla al final del body para manejar el menú móvil, el carousel y el lightbox.
- Mantener estructura semántica (header, nav, main, section, footer).
- Optimizar para dispositivos móviles (responsive) y accesibilidad (atributos alt, aria-labels).

Genera el código completo 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>
```

3.395 caracteres · 57 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, navegación y botón CTA
1.2 Hero principal: título, texto descriptivo, botones "Explorar demo" y "Ver vídeo", carrusel de imágenes ilustrativas
1.3 Sección "Core Features": subtítulo con ícono, título, grid de tarjetas (número, icono, título, descripción)
1.4 ... (otros bloques presentes en el código proporcionado)

FEATURES PAGE

1.1 Header idéntico al de Home
1.2 Sección de características ampliada (título, descripción, tarjetas con iconos y contadores)
1.3 CTA final

ABOUT PAGE

1.1 Header
1.2 Hero de presentación con imagen y texto descriptivo
1.3 Valores del salón en tarjetas
1.4 Equipo con fotos y breves biografías

SERVICES PAGE

1.1 Header
1.2 Lista de servicios con iconos, precios estimados y descripciones
1.3 Botón de reserva

PORTFOLIO PAGE

1.1 Header
1.2 Galería de trabajos en cuadrícula, filtro por categorías
1.3 Lightbox para ampliar imágenes

BLOG PAGE

1.1 Header
1.2 Lista de artículos con miniatura, título y extracto
1.3 Paginación

CONTACT PAGE

1.1 Header
1.2 Formulario de contacto (nombre, email, mensaje)
1.3 Mapa integrado
1.4 Información de localización y redes sociales

FOOTER (presente en todas las páginas)

1.1 Logo reducido
1.2 Enlaces de navegación secundaria
1.3 Iconos de redes sociales
1.4 Copyright y política de privacidad

PROMPTS RELACIONADOS · ARQUITECTURA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LuminCorte
Sector: Salón de peluquería de alta gama
Claim: Diseño elegante para estilos contemporáneos

Bloques de la home

1.1 Header con logo, menú y botón de compra
1.2 Hero con título, descripción, botones de demo y vídeo, y carrusel de imágenes
1.3 Sección de características clave con subtítulo, título y tarjetas numeradas
1.4 ... (continúa según el resto del HTML)
1.5 Footer con enlaces 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