RENT A CAR · Claude Design · HTML

Velocara Motors — Prompt de diseño web para Claude AI

★★★★★4,8 697 descargas

Concesionario y alquiler de coches premium y deportivos Encuentra tu próximo coche entre cientos de modelos verificados.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa de un concesionario digital de coches premium llamado **Velocara Motors** (dominio velocaramotors.com, email hola@velocaramotors.com, año 2025). Sector: venta y alquiler de coches deportivos y de gama alta. Claim: 'Encuentra tu próximo coche entre cientos de modelos verificados'. Idioma: español de España, copy 100% original, sin precios concretos, sin jerga marketinera.

**Alcance**: genera la página principal **Listado de coches** completamente funcional a nivel visual, más Home, Ficha de coche, Servicios, Sobre nosotros, Blog y Contacto enlazadas desde el menú.

**Stack técnico**: single-file HTML con Tailwind CSS por CDN y JavaScript vanilla. Sin frameworks. Todo el contenido en el mismo archivo, mostrando/ocultando secciones con JS al hacer clic en el menú. Imágenes via placeholders de Unsplash (coches, interiores, equipo).

**Paleta de color**:
- Fondo principal: #0E0E10 (casi negro)
- Fondo secundario / tarjetas: #17171B
- Texto principal: #F2F2F2
- Texto secundario: #A0A0A8
- Acento primario (CTA, precios, badges): #E63946 (rojo coche deportivo)
- Acento secundario: #FFB400 (amarillo ámbar para badges 'For Rent')
- Bordes sutiles: #2A2A30

**Tipografía** (Google Fonts):
- Titulares: 'Barlow Condensed', sans-serif, weights 600/700, uppercase con letter-spacing ligero
- Cuerpo: 'DM Sans', sans-serif, 400/500
- Datos numéricos / labels: 'Roboto', sans-serif

**Header** (fijo, fondo #0E0E10 con borde inferior #2A2A30, altura 80px):
- Izquierda: logotipo 'VELOCARA' en Barlow Condensed bold uppercase con punto rojo de acento
- Centro: menú con enlaces Inicio · Coches · Servicios · Nosotros · Blog · Contacto
- Derecha: icono lupa, icono corazón con badge, icono usuario y botón rojo 'Solicitar prueba'

**Footer**:
- 4 columnas sobre fondo #17171B: (1) logo + descripción breve + redes sociales, (2) Enlaces rápidos, (3) Contacto (dirección ficticia en Madrid, teléfono ficticio, hola@velocaramotors.com), (4) Newsletter con input email y botón rojo
- Subfooter con '© 2025 Velocara Motors. Todos los derechos reservados.' y enlaces legales

**Página principal a clonar – LISTADO DE COCHES**:
1. **Breadcrumb hero**: banda con imagen panorámica de carretera, overlay oscuro, título grande 'Listado de coches' en Barlow Condensed, breadcrumb 'Inicio / Coches'
2. **Barra de resultados**: fondo oscuro, izquierda contador 'Mostrando 1-12 de 21 vehículos', derecha conmutador grid/lista (iconos) y selector ordenación con opciones: Fecha ascendente, Fecha descendente, Precio ascendente, Precio descendente, Título ascendente, Título descendente
3. **Layout 2 columnas** (sidebar 300px + grid):
   - **Sidebar filtros** con acordeones desplegables, cada categoría muestra contadores entre paréntesis:
     · Estado: En alquiler (9), En venta (12)
     · Tipo: Cabrio (1), Coupé (3), Hatchback (1), Monovolumen (1), Pick-up (1), Sedán (5), Deportivo (8), Familiar (1)
     · Fabricante: Aston Martin, Audi (1), BMW (4), Bugatti (1), Ferrari, Lamborghini (1), Mercedes (4), Nissan (1), Porsche (3), Rolls-Royce (1), Shelby (1), Tesla (3), Volvo (1)
     · Ciudad: Madrid (5), Barcelona (5), Valencia (3), Sevilla (8)
     · Transmisión: Manual, Automática, CVT, Tiptronic
     · Tracción: Delantera, Trasera, 4x4, Total
     · Combustible: Gasolina, Diésel, Eléctrico, Híbrido HEV, Híbrido PHEV, Híbrido MHEV, GNC/GNL, GLP, Bifuel
     · Sliders rango: Kilometraje (0-185.000), Cilindrada (0-5.8L), Año (2017-2025), Precio (500-350.000)
     · Checkboxes equipamiento: Climatizador (18), Asientos calefactables, etc.
     · Botón rojo 'Aplicar filtros' y enlace 'Restablecer'
   - **Grid de coches** 3 columnas (responsive 1/2/3), 12 tarjetas. Cada **tarjeta**:
     · Imagen de coche con overlay al hover
     · Badge superior izquierda: 'EN VENTA' (rojo) o 'EN ALQUILER' (amarillo)
     · Iconos esquina superior derecha: corazón favorito, comparar
     · Marca + Modelo en Barlow Condensed uppercase
     · Subtítulo año + ciudad
     · Fila de 4 micro-datos con iconos: km, transmisión, combustible, motor
     · Precio destacado en rojo (sin importe concreto, usar formato 'Consultar' o '—')
     · Botón 'Ver detalles' outline blanco
4. **Paginación** numérica centrada (1, 2, 3, siguiente) con activo en rojo
5. **CTA pre-footer**: banda fondo oscuro con texto '¿No encuentras el coche que buscas?' y botón rojo 'Habla con un asesor'

**Resto de páginas** (versión más breve pero completa visualmente):
- **Home**: hero slider con coche, búsqueda rápida por marca/modelo, categorías por tipo, 6 destacados, contadores animados (Vehículos disponibles, Clientes satisfechos, Años de experiencia, Ciudades), 3 pasos cómo funciona, carrusel de marcas, 3 testimonios, 3 posts blog, CTA newsletter.
- **Ficha de coche**: galería + miniaturas, título, badges, precio, tabs descripción/características/especificaciones, formulario reserva lateral, 3 relacionados.
- **Servicios**: 4 tarjetas (Venta, Alquiler, Financiación, Tasación), proceso 4 pasos, CTA.
- **Sobre nosotros**: hero, historia, contadores, 4 miembros del equipo, valores en iconos.
- **Blog**: grid 6 artículos + sidebar.
- **Contacto**: 4 tarjetas datos, mapa embed placeholder, formulario.

**Requisitos técnicos**:
- Diseño 100% responsive (móvil, tablet, escritorio)
- Navegación SPA entre páginas con JS (mostrar/ocultar secciones, scroll al top)
- Acordeones de filtros funcionales
- Sliders de rango funcionales (dual handle) en CSS/JS vanilla
- Conmutador grid/lista funcional
- Selector de ordenación funcional (reordena visualmente las cards)
- Hover states elegantes en tarjetas (elevación, zoom imagen)
- Iconos vía Font Awesome CDN
- Accesible (alt en imágenes, aria-labels en botones icono, contraste correcto)
- Sin Lorem Ipsum: todo el copy redactado en español de España, original, creíble para un concesionario premium
- No usar precios numéricos concretos; emplear 'Consultar precio' o guiones
- Animaciones suaves al hacer scroll (fade-in en tarjetas) con IntersectionObserver

6.008 caracteres · 77 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero slider con coche destacado, claim y CTA
1.2 Buscador rápido por marca/modelo/precio
1.3 Categorías por tipo de coche (iconos)
1.4 Coches destacados (grid 6 tarjetas)
1.5 Contadores animados (vehículos, clientes, años, ciudades)
1.6 Bloque 'cómo funciona' en 3 pasos
1.7 Marcas disponibles (logos en carrusel)
1.8 Testimonios de clientes
1.9 Últimas entradas del blog
1.10 CTA newsletter
1.11 Footer

LISTADO DE COCHES

2.1 Header + breadcrumb con título
2.2 Barra de resultados (contador, vista, orden)
2.3 Sidebar de filtros con acordeones y sliders de rango
2.4 Grid de tarjetas de vehículo
2.5 Paginación
2.6 CTA pre-footer
2.7 Footer

FICHA DE COCHE

3.1 Galería principal con miniaturas
3.2 Título, precio, badges y acciones
3.3 Tabs: descripción / características / especificaciones
3.4 Formulario de reserva o consulta
3.5 Vehículos relacionados
3.6 Footer

SERVICIOS

4.1 Hero de sección
4.2 Grid de servicios (venta, alquiler, financiación, tasación)
4.3 Bloque proceso paso a paso
4.4 CTA contacto
4.5 Footer

SOBRE NOSOTROS

5.1 Hero con imagen del equipo
5.2 Historia y misión
5.3 Contadores
5.4 Equipo (grid de tarjetas)
5.5 Valores en iconos
5.6 CTA
5.7 Footer

BLOG

6.1 Hero con título
6.2 Grid de artículos con categorías
6.3 Sidebar (buscador, categorías, recientes, tags)
6.4 Paginación
6.5 Footer

CONTACTO

7.1 Hero con título
7.2 Datos de contacto en tarjetas (dirección, teléfono, email, horario)
7.3 Mapa
7.4 Formulario
7.5 Footer

PROMPTS RELACIONADOS · RENT A CAR

Otros prompts de la misma categoría

Ficha de marca

Nombre: Velocara Motors
Sector: Concesionario y alquiler de coches premium y deportivos
Claim: Encuentra tu próximo coche entre cientos de modelos verificados

Bloques de la home

1.1 Header fijo con logotipo, menú principal multinivel, buscador, favoritos, carrito y botón CTA
1.2 Breadcrumb con título de página 'Listado de coches' sobre imagen panorámica
1.3 Barra superior de resultados con contador de vehículos, conmutador grid/lista y selector de ordenación
1.4 Layout a dos columnas: sidebar de filtros (acordeones por categoría con contadores) y grid de tarjetas de coche
1.5 Tarjeta de vehículo con imagen, badge de estado (alquiler/venta), marca, modelo, año, datos técnicos (kilometraje, transmisión, combustible, motor), precio y acciones (favorito, comparar, ver ficha)
1.6 Sliders de rango para kilometraje, cilindrada, año y precio
1.7 Paginación numérica al final del grid
1.8 Bloque CTA pre-footer con claim y botón de contacto
1.9 Footer con columnas (sobre, enlaces rápidos, contacto, newsletter), redes sociales 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

Velocara Motors — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

LISTADO DE COCHES

FICHA DE COCHE

SERVICIOS

SOBRE NOSOTROS

BLOG

CONTACTO

Otros prompts de la misma categoría

RodaPrime

RuedaLibre Motors

RuedaLibre Motors

RuedaLibre Motors