BIENES RAÍCES · Claude Design · HTML

Mirador Casas — Prompt de diseño web para Claude AI

★★★★★4,7 1.905 descargas

Inmobiliaria premium con catálogo de propiedades, agentes y herramientas de valoración Encuentra el hogar que encaja contigo.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera una web completa de UNA SOLA PÁGINA HTML autocontenida (single-file) usando HTML5 + Tailwind CSS por CDN + JavaScript vanilla (sin frameworks, sin build, sin dependencias externas salvo Tailwind CDN y Google Fonts) para la marca ficticia siguiente. Todo el copy debe ser original en español de España, tono profesional y cercano, verbos en activo, sin tópicos marketineros y sin precios concretos.

MARCA
- Nombre: Mirador Casas
- Sector: Inmobiliaria premium con catálogo de propiedades en venta y alquiler, agentes propios, oficinas físicas y herramientas de valoración para particulares.
- Dominio: miradorcasas.com
- Claim: Encuentra el hogar que encaja contigo
- Email: hola@miradorcasas.com
- Teléfono ficticio: +34 910 22 44 88
- Año: 2025

STACK Y REQUISITOS TÉCNICOS
- Un único archivo index.html con todo embebido.
- Tailwind vía CDN (script de play CDN).
- Iconos: usar SVG inline o Lucide vía CDN.
- Imágenes: usar Unsplash con URLs de tipo source.unsplash.com o picsum.photos con seed, todas referidas a arquitectura, interiores, casas, ciudades y retratos.
- JS vanilla para: menú móvil, pestañas del buscador, slider de propiedades, contadores animados al hacer scroll, carrusel de partners, acordeón en sección de servicios y formularios con validación básica.
- Responsive total (mobile-first), breakpoints sm/md/lg/xl.
- Accesible: roles ARIA, alt en imágenes, focus visibles.
- Smooth scroll en anclas internas.

PALETA
- Verde oliva oscuro principal: #2F3E2E
- Verde oliva medio (acento): #5A7553
- Crema fondo: #F5F1EA
- Blanco puro: #FFFFFF
- Gris texto: #4A4A4A
- Negro suave: #1A1A1A
- Dorado sutil para detalles: #B89968

TIPOGRAFÍA (Google Fonts)
- Titulares: Halant (serif, weights 400 y 500)
- Texto y UI: Roboto (weights 300, 400, 500, 700)

HEADER (presente en toda la página, transparente sobre hero y sólido al hacer scroll)
- Top bar fina superior con fondo verde oliva oscuro: a la izquierda teléfono y email con iconos; a la derecha iconos cuadrados de Facebook, X, Instagram y LinkedIn.
- Header principal transparente con logo en blanco a la izquierda (texto Halant: Mirador Casas) y menú horizontal a la derecha con: Inicio, El estudio, Propiedades (desplegable: Destacadas, Galería, Informe de mercado), Agentes (desplegable: Equipo, Oficinas), Búsqueda (desplegable: Básica, Avanzada), Compradores y vendedores (desplegable: Acceso clientes, Valoración), Contacto, Mi cuenta.
- En móvil: logo centrado, botón hamburguesa que abre offcanvas lateral izquierdo con el menú colapsable.
- Al hacer scroll más de 80px el header pasa a fondo crema con texto verde oliva oscuro.

HOME, SECCIÓN A SECCIÓN

1.3 Hero a pantalla completa (min-h-screen)
- Imagen de fondo: casa moderna con jardín, oscurecida con overlay verde oliva al 45%.
- Centrado: pretítulo en dorado (Inmobiliaria desde 2008), titular grande en Halant (dos líneas, ej: "Casas con carácter / en las mejores zonas"), subtítulo breve.
- Caja blanca semitransparente con buscador de pestañas: Comprar, Alquilar, Vacacional. Campos: ubicación (input con icono), tipo de propiedad (select), dormitorios (select), rango de precio (select). Botón verde oliva "Buscar".
- Enlace inferior: "Búsqueda avanzada" con flecha hacia abajo.

1.5 Banda de contadores
- Fondo crema, 4 columnas con número grande en Halant verde oliva y etiqueta debajo: 1.240 propiedades activas, 38 agentes, 16 ciudades, 4.700 clientes satisfechos. Animación de conteo al entrar en viewport.

1.6 Propiedades destacadas
- Título de sección centrado con kicker dorado "Selección Mirador" y H2 Halant "Propiedades destacadas".
- Grid de 6 tarjetas (3 columnas desktop, 2 tablet, 1 móvil). Cada tarjeta: imagen con badge superior (En venta / En alquiler), título de la propiedad, dirección con icono, fila inferior con dormitorios, baños y m² con iconos, y precio en grande abajo a la derecha.
- Botón "Ver todas las propiedades".

1.7 Búsqueda por ciudades
- Mosaico de 5 tarjetas con foto de ciudad (Madrid, Barcelona, Valencia, Bilbao, Málaga), overlay y nombre + número de propiedades. Layout asimétrico (una grande a la izquierda, cuatro pequeñas).

1.8 Slider de propiedades premium
- Fondo verde oliva oscuro. Título en blanco "Selección premium".
- Slider horizontal con 3 tarjetas visibles, flechas laterales blancas, dots inferiores. Tarjetas con imagen grande, etiqueta dorada, título y datos básicos.

1.9 Servicios para compradores y vendedores
- Fondo crema, 3 columnas con icono circular verde oliva: Compra asistida, Venta con plan a medida, Asesoría legal y financiera. Cada bloque con título Halant, párrafo y enlace "Saber más".

1.10 Agentes destacados
- Grid de 4 agentes (nombres ficticios: Lucía Arroyo, Mateo Vidal, Carla Reyes, Iván Domínguez). Foto retrato, nombre, cargo, contadores de propiedades, iconos sociales en overlay al hover.

1.11 CTA valoración gratuita
- Banda con fondo dorado #B89968, texto a la izquierda en blanco (titular Halant + descripción) y botón blanco a la derecha "Solicitar valoración".

1.12 Últimas noticias
- 3 columnas tipo blog: imagen, fecha y categoría, titular Halant, extracto, "Leer artículo". Títulos ficticios sobre mercado inmobiliario, reformas y financiación.

1.13 Carrusel de partners
- Banda blanca con 6-8 logos en escala de grises que avanzan en bucle horizontal automático.

1.14 Footer
- Fondo verde oliva oscuro #2F3E2E, texto en crema, 4 columnas:
  1) Logo + descripción breve + iconos sociales
  2) Enlaces rápidos (Inicio, El estudio, Propiedades, Agentes, Contacto)
  3) Contacto (dirección ficticia en Calle del Mirador 18, Madrid; teléfono; email)
  4) Newsletter con input email y botón dorado
- Subfooter con línea separadora: © 2025 Mirador Casas · Aviso legal · Privacidad · Cookies.

ADEMÁS, incluye al final del documento, dentro de la misma página y usando navegación por anclas con scroll suave, versiones resumidas en sección de las páginas internas anunciadas en el menú (cada una como bloque diferenciado con su propio hero corto y contenido representativo): El estudio, Listado de propiedades con filtros, Galería slider, Informe de mercado, Equipo de agentes, Oficinas, Búsqueda avanzada, Acceso clientes, Formulario de valoración, Contacto y Panel de usuario. Cada sección debe respetar la jerarquía visual definida y reutilizar la paleta y tipografía.

DETALLES FINALES
- Todos los formularios deben validar campos requeridos en cliente y mostrar mensaje de éxito ficticio al enviar (sin backend).
- Cuida microinteracciones: hover en tarjetas (ligero lift y sombra), transiciones suaves 200-300ms, focus rings accesibles.
- No incluyas analítica, ni scripts de tracking, ni librerías de pago.
- Entrega un único bloque de código HTML completo y funcional copiando y pegando.

6.743 caracteres · 93 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Top bar con contacto y redes
1.2 Header transparente con menú principal
1.3 Hero pantalla completa con buscador por pestañas
1.4 Buscador avanzado expandible
1.5 Contadores de logros
1.6 Propiedades destacadas en grid
1.7 Búsqueda por ciudades en mosaico
1.8 Slider de propiedades premium
1.9 Servicios para compradores y vendedores
1.10 Agentes destacados
1.11 CTA valoración gratuita
1.12 Últimas noticias del blog
1.13 Carrusel de partners
1.14 Footer completo

SOBRE EL ESTUDIO

2.1 Hero interior con breadcrumb
2.2 Historia del estudio con imagen lateral
2.3 Valores en 4 columnas con icono
2.4 Equipo directivo
2.5 Cifras de la compañía
2.6 CTA contacto

PROPIEDADES DESTACADAS

3.1 Hero interior con buscador compacto
3.2 Filtros laterales y ordenación
3.3 Listado en grid con paginación
3.4 CTA suscripción a alertas

GALERÍA SLIDER

4.1 Hero interior
4.2 Slider grande de propiedades con miniaturas
4.3 Detalles de la propiedad activa

INFORME DE MERCADO

5.1 Hero interior
5.2 Gráficos y KPIs del mercado por zonas
5.3 Tabla comparativa de precios medios
5.4 Descarga de informe

AGENTES BIO

6.1 Hero interior
6.2 Ficha del agente con foto grande, datos y biografía
6.3 Listado de sus propiedades
6.4 Formulario de contacto directo

LISTADO DE AGENTES

7.1 Hero interior
7.2 Grid de agentes con filtro por oficina
7.3 Paginación

LISTADO DE OFICINAS

8.1 Hero interior
8.2 Tarjetas de oficinas con dirección y teléfono
8.3 Mapa general

BÚSQUEDA BÁSICA

9.1 Hero interior con buscador simple
9.2 Resultados en grid

BÚSQUEDA AVANZADA

10.1 Hero interior
10.2 Formulario avanzado con todos los campos
10.3 Resultados con mapa lateral

ÁREA DE CLIENTE

11.1 Hero interior
11.2 Login y registro en dos columnas
11.3 Recuperación de contraseña

FORMULARIO DE VALORACIÓN

12.1 Hero interior
12.2 Formulario por pasos para tasación gratuita
12.3 Explicación del proceso en 4 pasos

CONTACTO

13.1 Hero interior
13.2 Datos de contacto en 3 columnas
13.3 Formulario
13.4 Mapa

PANEL DE USUARIO

14.1 Sidebar con navegación de cuenta
14.2 Resumen con favoritos, búsquedas guardadas y mensajes
14.3 Edición de perfil

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Mirador Casas
Sector: Inmobiliaria premium con catálogo de propiedades, agentes y herramientas de valoración
Claim: Encuentra el hogar que encaja contigo

Bloques de la home

1.1 Top bar con teléfono, email y redes sociales
1.2 Header transparente sobre hero con logo claro y menú horizontal con desplegables
1.3 Hero a pantalla completa con imagen residencial, titular serif grande y buscador integrado por pestañas (Comprar / Alquilar / Vacacional)
1.4 Buscador avanzado con campos de ubicación, tipo, dormitorios, precio y botón
1.5 Banda de contadores de logros (propiedades, agentes, ciudades, clientes)
1.6 Grid de propiedades destacadas con tarjetas (foto, etiqueta, precio, dirección, m², dormitorios, baños)
1.7 Sección de búsqueda por ciudades con tarjetas tipo mosaico con foto y contador
1.8 Slider de propiedades premium con flechas laterales
1.9 Bloque de servicios para compradores y vendedores (3 columnas con icono)
1.10 Grid de agentes destacados con foto, nombre, cargo y enlaces
1.11 Banda CTA de valoración gratuita con fondo de color
1.12 Últimas noticias del blog inmobiliario en 3 columnas
1.13 Logos de partners en carrusel
1.14 Footer oscuro con 4 columnas (sobre, enlaces, contacto, newsletter) y subfooter legal

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