BIENES RAÍCES · Claude Design · HTML

Aurelia Estates — Prompt de diseño web para Claude AI

★★★★★4,8 804 descargas

Inmobiliaria de propiedades residenciales y de lujo Encuentra el hogar que se ajusta a tu vida.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web inmobiliaria completa de una sola página HTML autocontenida usando HTML5 + Tailwind CSS vía CDN + JavaScript vanilla, todo en un único archivo. Marca ficticia: Aurelia Estates, inmobiliaria especializada en propiedades residenciales y de lujo. Dominio aureliaestates.com, email hola@aureliaestates.com, teléfono +34 910 220 480, año 2025. Claim: 'Encuentra el hogar que se ajusta a tu vida'. Idioma: español de España. Todo el copy debe ser original, en activa, sin jerga marketinera y sin precios concretos.

ESTILO VISUAL
- Paleta: fondo principal #0E1014 (casi negro), superficies #15181F, texto claro #F4F1EC, texto secundario #A8A29A, acento cálido dorado #C9A86A, acento secundario #8B6F3F, líneas sutiles rgba(255,255,255,0.08).
- Tipografía: títulos con 'Playfair Display' serif (cargada vía Google Fonts), cuerpo con 'Inter' sans-serif. Pesos: títulos 400-500, cuerpo 300-400.
- Estética elegante, espaciada, imágenes grandes con tratamiento ligeramente oscuro. Botones rectangulares con borde fino dorado o sólidos dorados con texto oscuro. Hover sutil con transición.
- Usa imágenes de Unsplash (URLs con source.unsplash.com o images.unsplash.com) de arquitectura, interiores y ciudades.

STACK
- Un solo archivo index.html.
- Tailwind via CDN <script src="https://cdn.tailwindcss.com"></script> con configuración inline para fuentes y colores personalizados.
- Iconos con Lucide via CDN.
- JS vanilla para: tabs del buscador hero, carruseles (propiedades y testimonios) con botones prev/next, menú móvil tipo offcanvas, contadores animados al hacer scroll (IntersectionObserver), validación básica del formulario newsletter y contacto.

ESTRUCTURA DE LA HOME (en orden)

1) TOP BAR (oculto en móvil)
- Fondo translúcido oscuro.
- Izquierda: teléfono con icono y email con icono.
- Derecha: dropdown de moneda (EUR, USD, GBP, CHF) y dropdown de unidad de superficie (m², pies²).

2) HEADER transparente sobre el hero
- Logo a la izquierda ('Aurelia Estates' en serif blanco).
- Menú horizontal centrado/derecha: Inicio, Sobre nosotros, Alquiler, Venta, Agentes, Blog, Contacto.
- Botón 'Acceder' a la derecha con borde dorado.
- Al hacer scroll, header se vuelve sólido #0E1014 con sombra sutil (sticky).

3) HERO a pantalla completa (100vh)
- Imagen de fondo de una villa moderna iluminada, con overlay oscuro al 55%.
- Título grande serif en dos líneas: 'Hogares con alma, ubicaciones con futuro'.
- Subtítulo breve.
- Buscador centrado con dos pestañas ('Comprar' y 'Alquilar') sobre una caja oscura semitransparente con borde dorado. Campos: ubicación, tipo de propiedad, habitaciones, rango de precio. Botón 'Buscar' dorado con icono lupa.
- En la parte inferior del hero, una fila discreta con tres mini-stats (Propiedades activas, Ciudades, Clientes felices).

4) PROPIEDADES DESTACADAS
- Sección con fondo #15181F.
- Antetítulo dorado pequeño 'Selección Aurelia' y título serif 'Propiedades destacadas'.
- Grid de 6 tarjetas (3 columnas en desktop, 2 en tablet, 1 en móvil).
- Cada tarjeta: imagen 16:10, etiqueta superior izquierda ('En venta' o 'En alquiler') dorada, corazón favorito arriba derecha, abajo bloque con título de propiedad, dirección, fila inferior con iconos (habitaciones, baños, m²) y nombre del agente. Hover: leve zoom de imagen.
- Botón 'Ver todas las propiedades' al final, outline dorado.

5) CIUDADES POPULARES
- Antetítulo y título 'Explora por ciudad'.
- Grid de 4 tarjetas verticales altas con imagen de ciudad (Madrid, Barcelona, Valencia, Marbella son ejemplos, pero usa nombres inventados como Valdebrisa, Solmar, Costa Linar, Altamonte para coherencia con marca ficticia... no, mejor usa ciudades reales españolas).
- Cada tarjeta: imagen ocupando toda la tarjeta, overlay gradiente inferior, nombre de ciudad en serif y número de propiedades disponibles.

6) SOBRE NOSOTROS
- Dos columnas: izquierda imagen de un agente o interior elegante con marco; derecha texto.
- Antetítulo dorado 'Quiénes somos', título serif 'Más de una década acompañando decisiones de vida'.
- Párrafo de 4-5 líneas con descripción honesta de la agencia.
- Lista con 3-4 puntos clave con icono dorado.
- Fila de 4 contadores animados (años de experiencia, propiedades vendidas, agentes, clientes).
- Botón 'Conócenos' dorado.

7) CARRUSEL PROPIEDADES NUEVAS
- Fondo #0E1014.
- Título 'Recién incorporadas'.
- Carrusel horizontal con flechas, mostrando 3 tarjetas a la vez en desktop, formato similar a sección 4 pero con cinta lateral 'Nuevo'.

8) AGENTES
- Fondo #15181F.
- Título 'El equipo que escucha'.
- Grid de 4 tarjetas de agentes con foto vertical en blanco y negro, nombre serif, especialidad debajo, fila de iconos sociales y enlace 'Ver perfil'.

9) CTA PUBLICAR PROPIEDAD
- Banda full-width con imagen de fondo arquitectónica y overlay oscuro fuerte.
- Título serif grande centrado: '¿Quieres vender o alquilar tu propiedad?'.
- Subtítulo de una línea.
- Dos botones: 'Publicar ahora' (sólido dorado) y 'Hablar con un agente' (outline blanco).

10) BLOG
- Título 'Desde nuestro cuaderno'.
- Grid de 3 entradas con imagen, categoría dorada, fecha, título serif, extracto breve y enlace 'Leer artículo' con flecha.
- Inventa títulos sobre vivienda, decoración, mercado.

11) TESTIMONIOS
- Fondo oscuro.
- Título 'Lo que dicen quienes ya viven con nosotros'.
- Carrusel con tarjetas centradas: comilla dorada grande, párrafo del testimonio, nombre del cliente, ciudad. 3 testimonios mínimo.

12) FOOTER
- Fondo #0B0D11.
- Cuatro columnas: 
  a) Logo + descripción breve + iconos sociales (Instagram, Facebook, LinkedIn, YouTube).
  b) Enlaces (Inicio, Sobre nosotros, Alquiler, Venta, Agentes, Blog).
  c) Contacto (dirección ficticia en Madrid, teléfono, email, horario).
  d) Newsletter con campo email y botón 'Suscribirse' dorado, más mini texto de privacidad.
- Línea divisoria sutil.
- Barra inferior con copyright '© 2025 Aurelia Estates. Todos los derechos reservados.' a la izquierda y enlaces a Aviso legal, Privacidad y Cookies a la derecha.

REQUISITOS TÉCNICOS
- Responsive completo (móvil, tablet, desktop).
- Accesible: contrastes correctos, alt en imágenes, aria-labels en botones de icono, navegación por teclado.
- Animaciones suaves (transiciones 200-400ms, fade-in al entrar en viewport).
- Código limpio, comentarios por sección, sin dependencias externas más allá de Tailwind CDN, Lucide y Google Fonts.
- Sin enlaces rotos: todos los href internos apuntan a anclas (#propiedades, #ciudades, etc.).
- Validación de formularios con feedback visual.
- Optimiza para que la primera renderización sea limpia y elegante.

No uses ningún nombre, claim, dirección o copy de webs reales. Todo el contenido textual debe ser inventado por ti respetando estas instrucciones.

6.737 caracteres · 100 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Top bar con contacto y selectores de moneda/superficie
1.2 Header transparente con navegación principal
1.3 Hero pantalla completa con buscador por pestañas
1.4 Propiedades destacadas en grid
1.5 Ciudades populares
1.6 Sobre nosotros con contadores
1.7 Carrusel de propiedades nuevas
1.8 Agentes inmobiliarios
1.9 CTA publicar propiedad
1.10 Últimas entradas del blog
1.11 Testimonios en carrusel
1.12 Footer con columnas y newsletter

SOBRE NOSOTROS

2.1 Cabecera con título e imagen de fondo
2.2 Historia de la empresa en dos columnas
2.3 Misión, visión y valores en tarjetas
2.4 Equipo directivo
2.5 Contadores de logros
2.6 CTA de contacto
2.7 Footer

ALQUILER

3.1 Cabecera con buscador compacto
3.2 Barra de filtros (tipo, habitaciones, precio, ubicación, orden)
3.3 Listado de propiedades en grid con paginación
3.4 Mapa lateral opcional con pines
3.5 Footer

VENTA

4.1 Cabecera con buscador compacto
4.2 Barra de filtros avanzados
4.3 Listado de propiedades en grid con paginación
4.4 Mapa lateral opcional
4.5 Footer

AGENTES

5.1 Cabecera con título
5.2 Grid de agentes con foto, nombre, especialidad y contacto
5.3 CTA unirse al equipo
5.4 Footer

BLOG

6.1 Cabecera del blog
6.2 Entrada destacada grande
6.3 Grid de entradas con categorías y fecha
6.4 Sidebar con buscador, categorías y entradas recientes
6.5 Paginación
6.6 Footer

CONTACTO

7.1 Cabecera con título
7.2 Bloque con datos de contacto e iconos
7.3 Formulario de contacto
7.4 Mapa de ubicación de la oficina
7.5 Footer

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Aurelia Estates
Sector: Inmobiliaria de propiedades residenciales y de lujo
Claim: Encuentra el hogar que se ajusta a tu vida

Bloques de la home

1.1 Top bar con teléfono, email, selector de moneda y selector de unidad de superficie
1.2 Header transparente con logo, menú horizontal y acceso a cuenta
1.3 Hero a pantalla completa con imagen de fondo, título serif grande y buscador de propiedades con pestañas (Comprar / Alquilar)
1.4 Sección de propiedades destacadas en grid con tarjetas (foto, precio, dirección, habitaciones, baños, m²)
1.5 Bloque de ciudades populares con tarjetas verticales e imágenes
1.6 Sección sobre nosotros con texto a un lado e imagen al otro y contadores numéricos
1.7 Slider de propiedades nuevas en carrusel horizontal
1.8 Sección de agentes inmobiliarios con tarjetas (foto, nombre, especialidad, redes)
1.9 Bloque CTA oscuro a ancho completo invitando a publicar propiedad
1.10 Últimas entradas del blog en grid de 3 columnas
1.11 Banda de testimonios de clientes en carrusel
1.12 Footer oscuro con columnas (sobre, enlaces, contacto, newsletter) y barra 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