BELLEZA / SPA · Claude Design · HTML

LuxeCorte — Prompt de diseño web para Claude AI

★★★★★4,9 1.117 descargas

Salón de peluquería y belleza de alta gama Diseño elegante para profesionales del estilismo.

↓ 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 LuxeCorte, un salón de peluquería premium, usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. 

**Alcance**: replicar el diseño visual y la estructura del sitio de referencia sin copiar contenido literal. Mantener los siguientes bloques en la página HOME y generar plantillas para las páginas ABOUT, SERVICES, PORTFOLIO y CONTACT siguiendo la misma estética.

**Stack**: 
- `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">`
- Vanilla JS para interacciones (menú hamburger, carrusel hero, slider testimonios, filtro galería, lightbox y validación de formulario).

**Paleta de colores** (hex):
- Primario: #2C1B3D (índigo profundo) 
- Secundario: #D4AF37 (dorado) 
- Fondo claro: #FAF9F6 
- Texto oscuro: #1A1A1A 
- Texto terciario: #555555 

**Tipografía**: 
- Heading: 'Playfair Display', serif, peso 700
- Body: 'Inter', sans-serif, peso 400
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">`

**Header**: barra superior fija, fondo blanco semi‑transparente, logo a la izquierda (svg placeholder), menú de navegación centrado con enlaces Home, Sobre nosotros, Servicios, Portafolio, Contacto y botón destacado “Reserva”. En móviles, colapsar en hamburger con animación de deslizamiento.

**Hero**: sección a pantalla completa con fondo de imagen difuminada (placeholder), título grande en Playfair Display, subtítulo en Inter, dos botones CTA ("Explorar Demo" y "Ver video") y carrusel automático de 6 imágenes del salón (usar `<div class="overflow-hidden relative">` y JS para cambiar slide). Añadir icono de reproducción que abre un lightbox de video.

**Sección Características**: contenedor centrado max‑w‑3xl, subtítulo con icono Webflow estilo, título "Descubre las características clave". Grid de 3 columnas (responsive a 1‑column en móvil) con cards que incluyen número circular dorado, icono, título y breve descripción.

**Galería de Servicios**: grid 4 columnas (2 en tablet, 1 en móvil) con imágenes cuadradas, overlay con título del servicio y botón “Más info”. Hover: escala de imagen y aparición de overlay semi‑transparente.

**Testimonios**: slider horizontal con cards de cliente (foto circular, nombre, comentario). Controls de flecha y paginación.

**Formulario de Contacto**: campos Nombre, Email, Mensaje, botón enviar. Validación simple con JS (required, email format). Mensaje de éxito inline.

**Footer**: fondo #2C1B3D, texto claro, cuatro columnas: Enlaces rápidos, Servicios, Redes sociales (iconos SVG), Información de ubicación & horario. Copyleft con año dinámico.

**Requisitos técnicos**: 
- Todas las interacciones sin dependencias externas salvo Tailwind CDN.
- Código semantic HTML5, accesible (aria‑labels, roles).
- Responsivo usando clases Tailwind (`sm:`, `md:`, `lg:`).
- Optimizar imágenes con atributos `loading="lazy"` y `srcset` placeholders.
- Incluir animaciones suaves con `transition` de Tailwind.
- Comentarios claros en el código para cada bloque.

Genera el archivo completo listo para ser guardado como `index.html` (el resto de páginas pueden ser secciones dentro del mismo archivo con anclajes o plantillas separadas).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logotipo, menú sticky y botón de reserva
1.2 Hero con título, subtítulo, dos botones CTA y carrusel de imágenes del salón
1.3 Sección "Características clave" con título, descripción y tarjetas con iconos y contadores
1.4 Galería de servicios en grid interactivo
1.5 Testimonios de clientes en slider horizontal
1.6 Formulario de contacto rápido
1.7 Footer con enlaces, redes sociales y datos de ubicación

ABOUT

2.1 Header heredado
2.2 Hero con foto del equipo y misión
2.3 Texto descriptivo del salón y valores
2.4 Equipo en cards
2.5 CTA para reserva
2.6 Footer común

SERVICES

3.1 Header heredado
3.2 Hero con título "Servicios"
3.3 Grid de cards de servicios con imágenes y descripciones breves
3.4 Botón "Solicitar cita"
3.5 Footer común

PORTFOLIO

4.1 Header heredado
4.2 Hero con título "Nuestro trabajo"
4.3 Masonry gallery con filtro por tipo de peinado
4.4 Lightbox para ver imágenes en detalle
4.5 Footer común

CONTACT

5.1 Header heredado
5.2 Hero con título "Contacto"
5.3 Formulario de contacto (nombre, email, mensaje, botón enviar)
5.4 Mapa incrustado con ubicación
5.5 Footer común

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LuxeCorte
Sector: Salón de peluquería y belleza de alta gama
Claim: Diseño elegante para profesionales del estilismo

Bloques de la home

1.1 Header con logotipo, menú sticky y botón de reserva
1.2 Hero con título, subtítulo, dos botones CTA y carrusel de imágenes del salón
1.3 Sección "Características clave" con título, descripción y tarjetas con iconos y contadores
1.4 Galería de servicios en grid interactivo
1.5 Testimonios de clientes en slider horizontal
1.6 Formulario de contacto rápido
1.7 Footer con enlaces, redes sociales y datos de ubicació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

LuxeCorte — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

PORTFOLIO

CONTACT

Otros prompts de la misma categoría

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle