INDUSTRIA / FÁBRICA · Claude Design · HTML

Motorhaus Garage — Prompt de diseño web para Claude AI

★★★★★4,6 2.166 descargas

Taller mecánico y reparación de automóviles premium Diagnóstico preciso y reparaciones que duran.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera una web single-file en HTML con Tailwind CSS vía CDN y JavaScript vanilla para un taller mecánico ficticio llamado 'Motorhaus Garage' (dominio motorhausgarage.com, email hola@motorhausgarage.com, año 2025). Claim: 'Diagnóstico preciso y reparaciones que duran'. Sector: taller mecánico y reparación de automóviles premium independiente. Todo el copy en español de España, original, en activo, sin jerga marketinera y sin precios concretos.

STACK Y ALCANCE
- Un único archivo HTML autocontenido.
- Tailwind CSS por CDN (https://cdn.tailwindcss.com) configurado inline con la paleta y tipografías personalizadas.
- JS vanilla para: menú móvil, slider de hero, contadores animados al hacer scroll, slider de testimonios y acordeón si procede.
- Imágenes vía Unsplash (urls directas, temática: coches, talleres, mecánicos, herramientas, motores).
- Iconos vía Font Awesome 6 CDN.

PALETA (estética industrial dark con acentos cálidos)
- Fondo principal: #0E0E10 (casi negro)
- Fondo secundario: #1A1A1D
- Superficies/cards: #232326
- Acento primario (rojo motor): #E63027
- Acento secundario (amarillo señalética): #F5C518
- Texto principal: #F2F2F2
- Texto suave: #9A9A9F
- Bordes sutiles: #2E2E32

TIPOGRAFÍA
- Titulares: 'Barlow Condensed', sans-serif, uppercase, weights 600-700, tracking ligeramente expandido.
- Cuerpo: 'DM Sans', sans-serif, weights 400-500.
- Detalles/etiquetas: 'Barlow Condensed' uppercase con tracking amplio.
- Cargar desde Google Fonts.

HEADER
- Top bar fina (h-10) sobre fondo #1A1A1D con texto en uppercase pequeño: a la izquierda horario 'Lun-Vie 08:00 - 19:00 · Sáb 09:00 - 14:00', a la derecha teléfono ficticio '+34 910 55 44 33' y 4 iconos sociales.
- Header principal sticky sobre #0E0E10 con borde inferior sutil: logo a la izquierda (texto 'MOTORHAUS' en Barlow Condensed bold con punto rojo y subtítulo 'GARAGE' pequeño), menú central horizontal (Inicio, Servicios, Sobre nosotros, Equipo, Blog, Contacto), a la derecha icono de búsqueda y botón rojo grande 'PEDIR CITA' con flecha.
- Versión móvil con hamburguesa que despliega menú a pantalla completa.

HOME — BLOQUES EN ORDEN

1) HERO (h-screen, mínimo 720px)
- Fondo: imagen oscura de coche deportivo en taller con overlay degradado de #0E0E10 a transparente por la izquierda.
- Contenido alineado a la izquierda con padding generoso.
- Etiqueta superior pequeña en amarillo con barra horizontal: 'TALLER MECÁNICO INDEPENDIENTE'.
- Titular enorme en Barlow Condensed uppercase, 2 líneas, ~7xl: 'REPARACIONES QUE / DEVUELVEN LA VIDA A TU COCHE'.
- Subtítulo en gris suave, 2 líneas.
- Dos botones: primario rojo 'VER SERVICIOS' y secundario outline blanco 'CONTACTAR'.
- Esquina inferior derecha: bloque con teléfono grande y texto 'Atención inmediata'.
- Bullets de paginación del slider en la esquina inferior izquierda.

2) ABOUT US
- Fondo #0E0E10, dos columnas.
- Izquierda: imagen de mecánico trabajando bajo capó con marco rojo decorativo desplazado y badge circular amarillo girando con texto 'DESDE 2008 · CONFIANZA · DESDE 2008 · CONFIANZA'.
- Derecha: etiqueta 'SOBRE NOSOTROS' en amarillo, titular condensado uppercase 'REPARACIÓN RÁPIDA Y FIABLE PARA CUALQUIER MARCA', párrafo descriptivo, lista de 4 ventajas con check rojo y, debajo, bloque destacado con icono de teléfono rojo, texto 'Llama ahora' y número grande '+34 910 55 44 33'.

3) SERVICIOS (grid 3x2)
- Fondo #1A1A1D.
- Encabezado centrado: etiqueta 'QUÉ HACEMOS', titular 'SERVICIOS QUE OFRECEMOS'.
- 6 cards sobre #232326 con borde fino, hover que ilumina borde rojo y eleva ligeramente. Cada card: icono grande rojo arriba, número '01' a '06' en grande translúcido al fondo, título uppercase condensado, descripción breve, enlace 'Saber más →'.
- Servicios: Diagnóstico electrónico, Cambio de aceite y filtros, Frenos y suspensión, Aire acondicionado, Neumáticos y alineación, Revisión pre-ITV.

4) BANNER CONTADORES
- Sección full-width con imagen de fondo de taller y overlay oscuro al 85%.
- 4 contadores en fila separados por líneas verticales finas: '17 Años de experiencia', '8.400 Coches reparados', '12 Mecánicos certificados', '3.200 Clientes recurrentes'.
- Números enormes en amarillo Barlow Condensed, etiquetas blancas uppercase pequeñas.
- Animar los números al entrar en viewport.

5) POR QUÉ ELEGIRNOS
- Dos columnas. Izquierda: imagen de herramientas ordenadas. Derecha: etiqueta 'NUESTRAS VENTAJAS', titular 'POR QUÉ CONFIAR EN NOSOTROS', y lista de 4 ítems con número en círculo rojo (01-04), título e icono: 'Diagnóstico transparente', 'Recambios originales', 'Presupuesto sin sorpresas', 'Garantía de 12 meses'.

6) PROCESO DE TRABAJO (4 pasos)
- Fondo oscuro #1A1A1D.
- 4 columnas con número gigante outline rojo de fondo, icono, título uppercase y descripción corta.
- Pasos: 01 Reserva tu cita, 02 Inspección y diagnóstico, 03 Presupuesto y aprobación, 04 Reparación y entrega.

7) TESTIMONIOS
- Slider horizontal con 3 cards visibles en desktop, 1 en móvil.
- Cada card: comillas rojas grandes, texto del testimonio, 5 estrellas amarillas, separador, foto circular + nombre + ciudad ('Carmen Ribas · Valencia', 'Iker Otaola · Bilbao', 'Sandra Folch · Mataró', 'Joaquín Mendieta · Sevilla').
- Controles flecha izquierda/derecha en rojo y bullets inferiores.

8) EQUIPO
- Encabezado: 'NUESTRO EQUIPO' / 'MECÁNICOS QUE CONOCEN TU COCHE'.
- Grid 4 columnas. Cada card: foto en blanco y negro que pasa a color en hover, overlay inferior con nombre y especialidad, iconos sociales que aparecen al hacer hover desde el lateral.
- Miembros: 'Rubén Castaño · Jefe de taller', 'Alma Vinyets · Diagnóstico electrónico', 'Tomás Bregón · Motor y transmisión', 'Nahia Etxebarri · Frenos y suspensión'.

9) CTA FULL-WIDTH
- Fondo con imagen de coche oscuro y overlay rojo oscuro.
- Centrado: titular uppercase '¿NECESITAS UNA REVISIÓN URGENTE?', subtítulo breve y botón blanco grande 'RESERVAR AHORA'.

10) FOOTER
- Fondo #0E0E10 con borde superior amarillo de 2px.
- 4 columnas: 
  · Sobre Motorhaus: logo, párrafo corto, iconos sociales.
  · Enlaces rápidos: Servicios, Equipo, Blog, Contacto, Política de privacidad.
  · Horario: lista días/horas con icono de reloj.
  · Newsletter: texto breve y campo email con botón rojo flecha.
- Barra inferior separada: '© 2025 Motorhaus Garage. Todos los derechos reservados.' a la izquierda y 'hola@motorhausgarage.com · motorhausgarage.com' a la derecha.

REQUISITOS TÉCNICOS
- Responsive completo (breakpoints sm, md, lg, xl).
- Accesible: contraste correcto sobre fondos oscuros, aria-labels en botones de icono, focus visible en amarillo.
- Animaciones sutiles: fade-up al entrar en viewport con IntersectionObserver, hover transitions de 300ms.
- Sin dependencias externas más allá de Tailwind CDN, Font Awesome CDN y Google Fonts.
- Código limpio, comentado por secciones y un único archivo .html listo para abrir en navegador.

6.865 caracteres · 96 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Top bar fina con horario, teléfono y redes
1.2 Header oscuro con menú y CTA
1.3 Hero pantalla completa con coche y titular
1.4 About us con teléfono destacado
1.5 Grid de servicios 3x2 con iconos
1.6 Banner contadores sobre imagen oscura
1.7 Por qué elegirnos con lista de ventajas
1.8 Proceso de trabajo en 4 pasos
1.9 Slider de testimonios
1.10 Grid del equipo de mecánicos
1.11 CTA full-width de reserva
1.12 Footer en 4 columnas

SERVICIOS

2.1 Header oscuro
2.2 Hero compacto con breadcrumb
2.3 Listado completo de servicios en grid
2.4 Bloque de precios orientativos por categoría
2.5 CTA full-width
2.6 Footer

SOBRE NOSOTROS

3.1 Header oscuro
3.2 Hero compacto con breadcrumb
3.3 Historia del taller con imagen lateral
3.4 Misión, visión y valores en 3 columnas
3.5 Contadores de experiencia
3.6 Grid del equipo
3.7 Testimonios
3.8 Footer

EQUIPO

4.1 Header oscuro
4.2 Hero compacto con breadcrumb
4.3 Grid completo de mecánicos con filtro por especialidad
4.4 Ficha destacada del jefe de taller
4.5 CTA de unirse al equipo
4.6 Footer

BLOG

5.1 Header oscuro
5.2 Hero compacto con breadcrumb
5.3 Listado de artículos en grid 3 columnas con imagen, categoría y fecha
5.4 Paginación
5.5 Footer

CONTACTO

6.1 Header oscuro
6.2 Hero compacto con breadcrumb
6.3 Bloque con datos de contacto en 3 tarjetas (dirección, teléfono, email)
6.4 Formulario de contacto a dos columnas con mapa al lado
6.5 Horario de apertura destacado
6.6 Footer

PROMPTS RELACIONADOS · INDUSTRIA / FÁBRICA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Motorhaus Garage
Sector: Taller mecánico y reparación de automóviles premium
Claim: Diagnóstico preciso y reparaciones que duran

Bloques de la home

1.1 Top bar fina con horario, teléfono y redes sociales
1.2 Header oscuro con logo, menú horizontal y botón CTA de cita
1.3 Hero a pantalla completa con imagen de coche, título condensado en mayúsculas y dos botones (servicios / contacto)
1.4 Bloque About us con etiqueta, titular grande, párrafo descriptivo, lista de bullets y bloque destacado con teléfono
1.5 Sección de servicios en grid 3x2 con iconos, título y enlace 'leer más'
1.6 Banner de contadores sobre fondo oscuro con imagen (años de experiencia, coches reparados, mecánicos, clientes)
1.7 Sección 'Por qué elegirnos' con imagen lateral y lista de ventajas con iconos numerados
1.8 Bloque de proceso de trabajo en 4 pasos horizontales con números grandes
1.9 Slider de testimonios con foto, valoración en estrellas y cita
1.10 Grid del equipo de mecánicos con foto, nombre y especialidad
1.11 CTA full-width con fondo oscuro, titular y botón de reserva
1.12 Footer en 4 columnas (sobre nosotros, enlaces, horario, newsletter) con barra inferior 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