AUTOMOCIÓN · Claude Design · HTML

LustraPrime Detail — Prompt de diseño web para Claude AI

★★★★★4,8 449 descargas

Estudio profesional de detallado y cuidado integral de vehículos Detallado profesional para coches que merecen brillar.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web one-page en HTML+TailwindCSS (CDN) + JS vanilla, todo en un único archivo index.html, para una marca ficticia llamada 'LustraPrime Detail', estudio profesional de detallado y cuidado integral de vehículos. Dominio: lustraprime.com. Email: hola@lustraprime.com. Año: 2025. Claim: 'Detallado profesional para coches que merecen brillar'. Idioma: español de España. Tono: técnico, masculino, premium pero cercano, sin jerga marketinera ni precios concretos.

ESTÉTICA
- Esquema oscuro tipo automoción premium.
- Paleta: fondo principal #0E0E10 (casi negro), secundario #15151A, acento rojo #E63946, acento rojo oscuro #B5121B, texto principal #F2F2F2, texto secundario #A0A0A8, bordes sutiles #2A2A30.
- Tipografías Google Fonts: titulares en 'Barlow Condensed' (700, uppercase, tracking ligeramente abierto), cuerpo en 'DM Sans' (400/500).
- Imágenes de coches deportivos, manos puliendo carrocería, primer plano de llantas, espuma y detalle. Usa Unsplash con búsquedas tipo car detailing, polish, supercar, garage.
- Botones rectangulares con esquinas mínimas (radius 2px), CTA principal rojo con hover invertido, secundario outline blanco.
- Mucho uso de tipografía condensada gigante, números grandes, líneas finas separadoras rojas.

HEADER
- Fijo, fondo translúcido oscuro con blur al hacer scroll.
- Izquierda: logo textual 'LUSTRAPRIME' en Barlow Condensed con punto rojo final.
- Centro: menú horizontal en mayúsculas (Inicio, Servicios, Sobre Nosotros, Galería, Blog, Contacto).
- Derecha: teléfono ficticio +34 910 00 00 00 con icono y botón rojo 'Pedir cita'.
- En móvil: hamburguesa que abre menú lateral oscuro a pantalla completa.

HOME (secciones en este orden)

1.1 HERO pantalla completa (100vh). Imagen de fondo de coche deportivo oscuro con overlay degradado negro. Claim enorme en dos líneas con Barlow Condensed (ej. 'Recuperamos / el brillo original'). Subtítulo corto en DM Sans. Dos CTA: 'Pedir presupuesto' (rojo) y 'Ver servicios' (outline). Indicador de scroll animado abajo.

1.2 Banda horizontal con 4 ventajas: icono lineal + título corto + frase (Productos certificados, Más de 12 años, Recogida y entrega, Garantía escrita). Fondo #15151A, separadores verticales rojos finos.

1.3 Sobre nosotros a dos columnas. Izquierda imagen vertical de detallador trabajando, con marco rojo desplazado. Derecha: pretítulo rojo en mayúsculas 'Quiénes somos', titular condensado grande, párrafo, lista con tildes rojos y CTA 'Conoce el taller'.

1.4 Grid de 4 servicios destacados (Lavado premium, Pulido y corrección, Tratamiento cerámico, Limpieza de tapicería). Tarjetas oscuras con imagen arriba, icono rojo, título Barlow, descripción y enlace 'Saber más →'. Hover: zoom suave en imagen y borde rojo.

1.5 Banda parallax con imagen de fondo de carrocería brillante con overlay oscuro. 4 contadores grandes en Barlow Condensed (12 Años de oficio, 3.480 Coches tratados, 1.250 Clientes fieles, 18 Premios sectoriales). Animación de conteo al entrar en viewport con IntersectionObserver.

1.6 Proceso en 4 pasos horizontales con número grande rojo translúcido detrás, título y descripción corta (Inspección, Preparación, Tratamiento, Entrega). En móvil se apilan.

1.7 Galería filtrable. Botones de filtro arriba (Todo, Pulido, Cerámica, Interior, Llantas). Mosaico de 8 imágenes con overlay rojo en hover y lupa central. JS vanilla para filtrar con data-attributes.

1.8 Slider de testimonios. Fondo #15151A. Tarjeta central grande con comilla roja, texto del cliente inventado (3 testimonios distintos con nombres ficticios españoles, modelo de coche y 5 estrellas). Flechas y bullets rojos. Auto-play cada 6s.

1.9 CTA de presupuesto a dos columnas. Izquierda: pretítulo, titular grande 'Cuéntanos qué necesita tu coche', párrafo y datos (dirección ficticia en Polígono Industrial Las Encinas, Madrid; teléfono; email; horario). Derecha: formulario oscuro con campos Nombre, Email, Teléfono, Modelo del coche, Servicio (select), Mensaje y botón rojo 'Solicitar presupuesto'. Validación básica JS.

1.10 Carrusel infinito de logotipos de marcas (textuales en blanco translúcido, inventados o genéricos tipo Audi, BMW, Mercedes, Porsche, Ferrari, Tesla, Lexus, Range Rover) en escala de grises con hover blanco.

1.11 FOOTER oscuro #0A0A0C en 4 columnas:
- Marca + descripción breve + iconos sociales redondos rojos.
- Enlaces rápidos.
- Horario semanal en formato lista.
- Newsletter con input y botón rojo.
Subfooter con línea separadora fina: '© 2025 LustraPrime Detail · Aviso legal · Privacidad · Cookies'.

REQUISITOS TÉCNICOS
- Un solo archivo index.html, sin frameworks.
- TailwindCSS por CDN (script play CDN).
- Configurar tailwind.config inline con colores personalizados y fuentes.
- Cargar Google Fonts (Barlow Condensed y DM Sans) y Font Awesome 6 por CDN para iconos.
- JS vanilla para: menú móvil, scroll suave, header con blur al hacer scroll, contador animado, slider testimonios, filtro de galería, validación de formulario.
- Accesible: contraste AA, alt en imágenes, aria-labels en botones de icono, focus visible.
- Responsive impecable en 360, 768, 1024 y 1440px.
- Animaciones suaves con transitions Tailwind y pequeñas reveals con IntersectionObserver (fade-up).
- Todo el copy redactado original en español de España, sin precios y sin nombres reales de otras marcas detalladas; los logos del carrusel pueden ir como texto neutro tipo 'Marca 01' a 'Marca 08' si se prefiere.
- No incluir enlaces externos rotos ni referencias a webs reales del sector.

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero pantalla completa con claim y CTA
1.2 Banda de ventajas con iconos
1.3 Sobre nosotros a dos columnas
1.4 Grid de servicios destacados
1.5 Banda de contadores parallax
1.6 Proceso en 4 pasos
1.7 Galería de trabajos con filtros
1.8 Slider de testimonios
1.9 CTA presupuesto + formulario
1.10 Carrusel de marcas
1.11 Footer oscuro 4 columnas

SERVICIOS

2.1 Cabecera interna con breadcrumb
2.2 Listado completo de servicios en grid
2.3 Bloque de paquetes comparativos
2.4 FAQ en acordeón
2.5 CTA final reservar cita
2.6 Footer

SOBRE NOSOTROS

3.1 Cabecera interna
3.2 Historia del taller a dos columnas
3.3 Equipo en grid de tarjetas
3.4 Valores con iconos
3.5 Banda de contadores
3.6 Footer

GALERIA

4.1 Cabecera interna
4.2 Mosaico filtrable de trabajos
4.3 CTA presupuesto
4.4 Footer

BLOG

5.1 Cabecera interna
5.2 Grid de artículos con imagen, fecha y extracto
5.3 Paginación
5.4 Footer

CONTACTO

6.1 Cabecera interna
6.2 Mapa y datos a dos columnas
6.3 Formulario de contacto extendido
6.4 Horario y redes
6.5 Footer

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LustraPrime Detail
Sector: Estudio profesional de detallado y cuidado integral de vehículos
Claim: Detallado profesional para coches que merecen brillar

Bloques de la home

1.1 Hero a pantalla completa con imagen de coche, claim grande en tipografía condensada y CTA
1.2 Banda de iconos de propuesta de valor (3-4 ventajas)
1.3 Bloque 'Sobre nosotros' a dos columnas con imagen y texto + botón
1.4 Servicios destacados en grid de 4 tarjetas con icono, título y descripción
1.5 Banda parallax con contadores animados (años, coches, clientes, premios)
1.6 Sección 'Cómo trabajamos' en 4 pasos numerados horizontales
1.7 Galería de trabajos antes/después en mosaico con filtro por categoría
1.8 Testimonios en slider horizontal con foto y valoración en estrellas
1.9 Bloque CTA de presupuesto a dos columnas: formulario y datos de contacto
1.10 Logos de marcas de coche con las que trabajan en carrusel
1.11 Footer oscuro con 4 columnas (marca, enlaces, horario, redes) y subfooter de copyright

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