BIENES RAÍCES · Tailwind CDN · Vanilla JS · Claude Design

Lumora Salud – Web de suplementos naturales y bienestar

★★★★★4,6 471 descargas

Tema completo para una tienda online de suplementos naturales, con diseño limpio, hero impactante y secciones de valores, productos y testimonios, optimizado para SEO y velocidad.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa de una marca ficticia llamada "Lumara Salud", un ecommerce de suplementos naturales y bienestar diario. Sector salud y medicina, dominio lumarasalud.com, email hola@lumarasalud.com, año 2025. Claim: "Cuidarte por dentro también se nota por fuera". Tono cercano, calmado, sin promesas milagrosas ni jerga marketinera. Todo el contenido en español de España y 100% original.

ALCANCE: entrega una landing single-file con la HOME completa y funcional. El resto de páginas (Tienda, Producto, Sobre nosotros, Diario, Contacto) déjalas enlazadas en el menú pero no es obligatorio desarrollarlas.

STACK TÉCNICO: un único archivo HTML con Tailwind vía CDN (script de cdn.tailwindcss.com) y JavaScript vanilla embebido. Sin frameworks, sin build, sin dependencias externas salvo Google Fonts e iconos en SVG inline. Imágenes con placeholders de https://images.unsplash.com (usa búsquedas tipo wellness, herbs, skincare, lifestyle).

PALETA:
- Verde principal #2F5D4A (botones, acentos)
- Verde suave fondo #E8EFE8
- Crema fondo principal #F7F4EE
- Blanco puro #FFFFFF
- Texto oscuro #1B1F1C
- Texto secundario #5A6B5E
- Acento cálido #D9A574 (badges, detalles)

TIPOGRAFÍA: titulares en "Fraunces" (serif, weight 400-500, sin tracking exagerado) para hero y H2. Cuerpo en "Inter" (400-500). Tamaños hero h1 entre 56-72px desktop, line-height ajustado.

HEADER fijo, fondo crema con leve blur al hacer scroll. Logo a la izquierda en texto "lumara" en serif minúsculas. Menú centrado: Inicio, Tienda, Sobre nosotros, Diario, Contacto. A la derecha icono de búsqueda, icono de carrito con contador (0) y botón pill verde "Comprar ahora". En móvil hamburguesa con menú lateral.

FOOTER amplio sobre fondo verde oscuro #2F5D4A con texto crema. Cuatro columnas: marca + claim corto + redes (Instagram, TikTok, Pinterest en SVG); Tienda (enlaces a categorías ficticias: Defensas, Descanso, Piel, Digestión); Compañía (Sobre nosotros, Diario, Contacto, Trabaja con nosotros); Ayuda (Envíos, Devoluciones, FAQ, Aviso legal). Línea inferior con © 2025 Lumara Salud y selector de idioma ES/EN.

HOME SECCIÓN A SECCIÓN:

1.1 HERO: dos columnas. Izquierda: badge pequeño con punto verde y texto "Nueva colección de otoño", h1 grande en serif "Rutinas suaves para días intensos", párrafo de 2 líneas explicando que formulan con ingredientes botánicos y dosis honestas. Dos botones: primario verde "Ver catálogo" y secundario outline "Conocer la marca". Debajo, mini fila con tres microbeneficios con iconitos (envío 48h, fórmulas veganas, devolución 30 días). Derecha: mockup de bote de suplemento sobre fondo orgánico crema, con dos tarjetas flotantes superpuestas (una mostrando "4.8 valoración media" con estrellas, otra mostrando "+12.000 personas confían").

1.2 BANDA LOGOS: fondo crema, texto pequeño centrado "Como nos han mencionado" y debajo fila de 5-6 nombres de medios ficticios en gris claro (Revista Verde, Diario Bienestar, Hábito Sano, Mente Plena, Cocina Real).

1.3 PROPUESTA DE VALOR: titular centrado en serif "Una forma honesta de cuidarte", subtítulo. Tres columnas con icono SVG circular, título y dos líneas: "Ingredientes que reconoces", "Dosis que tienen sentido", "Sin promesas que no podamos cumplir".

1.4 PRODUCTOS DESTACADOS: titular "Lo más pedido este mes" con enlace "Ver toda la tienda →" a la derecha. Grid de 4 tarjetas (en móvil 2 columnas). Cada tarjeta: imagen cuadrada con fondo verde suave, badge pequeño en esquina (Nuevo / Bestseller), categoría en small caps, nombre del producto en serif, precio en formato genérico sin cifra concreta (usa "Desde —") y botón ghost "Añadir" con icono +. Productos ficticios: "Calma Nocturna", "Defensa Diaria", "Brillo Interior", "Equilibrio Digestivo". Hover: la imagen hace un leve scale y aparece sombra suave.

1.5 SOBRE LA MARCA (split): izquierda imagen vertical de campo de hierbas o laboratorio limpio. Derecha: eyebrow "Nuestra forma de hacer", h2 "Formulamos despacio, con cabeza", párrafo de 3 líneas. Lista de 4 checks con icono: "Trazabilidad completa de cada lote", "Producción en España", "Pruebas clínicas externas", "Envases reciclables y recargables". Botón outline "Leer la historia".

1.6 TESTIMONIOS: fondo verde suave #E8EFE8. Titular centrado "Lo que nos cuentan". Carrusel funcional con JS (sin librerías) que muestra 1 testimonio grande centrado y permite navegar con flechas y dots. Cada testimonio: 5 estrellas, frase en serif de 2-3 líneas, avatar circular, nombre y rol (ej. "Marina, 34, profesora"). Mínimo 4 testimonios distintos.

1.7 BLOG RECIENTE: titular "Del diario" con enlace lateral "Ver todo →". Tres tarjetas horizontales: imagen arriba, categoría en small caps, titular en serif, fecha y tiempo de lectura. Títulos ficticios tipo "Cómo leer la etiqueta de un suplemento", "Tres rituales de descanso para semanas largas", "Qué le pedimos a un buen probiótico".

1.8 NEWSLETTER: bloque ancho con fondo acento cálido #D9A574 atenuado o verde oscuro, esquinas redondeadas grandes, padding generoso. Titular serif "Apúntate al diario de Lumara", subtítulo de una línea sobre recibir lecturas y novedades sin saturar. Formulario inline: input email y botón "Suscribirme". Microcopia legal debajo.

1.9 Footer descrito arriba.

REQUISITOS TÉCNICOS:
- HTML semántico (header, main, section, footer).
- Totalmente responsive: breakpoints sm, md, lg. Mobile-first.
- Carrusel de testimonios funcional con JS vanilla (botones prev/next y dots clicables, autoplay cada 6s con pausa al hover).
- Menú móvil funcional (toggle clase).
- Animación sutil de fade-in-up al hacer scroll usando IntersectionObserver para los bloques principales.
- Botón "añadir" en tarjetas de producto que incrementa el contador del carrito del header (estado en JS, sin backend).
- Accesibilidad: contrastes AA, aria-labels en iconos, focus visible.
- Sin lorem ipsum: todo el copy redactado en español natural.
- No usar la palabra original de la web fuente ni ninguna marca real reconocible.
- Entregar el HTML listo para abrir en navegador.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

6.373 caracteres · 69 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con titular, CTA dobles y mockup de producto
1.2 Banda de logos colaboradores
1.3 Propuesta de valor en tres columnas
1.4 Grid de productos destacados
1.5 Split sobre la marca con checks
1.6 Carrusel de testimonios
1.7 Tres tarjetas de blog reciente
1.8 Bloque newsletter
1.9 Footer

TIENDA

2.1 Cabecera de categoría con título y breadcrumb
2.2 Barra de filtros laterales (categoría, precio, ingredientes)
2.3 Grid de productos paginado
2.4 Bloque de ayuda con CTA a contacto
2.5 Footer

PRODUCTO

3.1 Galería de imágenes + ficha (nombre, precio, variantes, añadir al carrito)
3.2 Tabs con descripción, ingredientes y modo de uso
3.3 Bloque de beneficios en iconos
3.4 Productos relacionados
3.5 Footer

SOBRE NOSOTROS

4.1 Hero de marca con frase manifiesto
4.2 Historia en formato split con imagen
4.3 Valores en grid de cuatro
4.4 Equipo en tarjetas
4.5 Banda de cifras (años, clientes, productos)
4.6 Footer

DIARIO

5.1 Cabecera con título y buscador
5.2 Grid de artículos con filtros por categoría
5.3 Paginación
5.4 Bloque newsletter
5.5 Footer

CONTACTO

6.1 Hero corto con título
6.2 Split con formulario a la izquierda y datos de contacto a la derecha
6.3 FAQ acordeón
6.4 Footer

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumara Salud
Sector: Marca de bienestar y suplementos naturales para el cuidado diario
Claim: Cuidarte por dentro también se nota por fuera

Bloques de la home

1.1 Hero principal con titular grande a la izquierda, subtítulo, doble CTA y mockup de producto a la derecha
1.2 Banda de logos de medios/colaboradores en escala de grises
1.3 Bloque de propuesta de valor con tres columnas (icono + título + descripción)
1.4 Grid de productos destacados con tarjetas, imagen, nombre, categoría y botón añadir al carrito
1.5 Sección split sobre la marca con imagen a la izquierda y texto + lista de checks a la derecha
1.6 Bloque de testimonios en carrusel con avatar, nombre, rol y estrellas
1.7 Sección de blog/noticias con tres tarjetas de artículos recientes
1.8 Bloque newsletter ancho con fondo de color, titular y formulario inline
1.9 Footer amplio con logo, columnas de enlaces, redes sociales y línea 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