SAAS / STARTUP · Claude Design · HTML

Lumora Cloud — Prompt de diseño web para Claude AI

★★★★★4,9 498 descargas

Plataforma SaaS de productividad y colaboración para equipos remotos Trabajo en equipo sin fricción, desde cualquier lugar.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una landing page one-page completa en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla (sin frameworks, sin dependencias externas salvo Tailwind y Google Fonts). El resultado debe ser autocontenido y funcionar abriendo el archivo directamente en el navegador.

MARCA FICTICIA:
- Nombre: Lumora Cloud
- Sector: Plataforma SaaS de productividad y colaboración para equipos remotos
- Dominio: lumoracloud.com
- Email: hola@lumoracloud.com
- Claim: Trabajo en equipo sin fricción, desde cualquier lugar
- Año: 2025
- Idioma: español de España, tono cercano y directo, sin jerga marketinera, verbos en activo. No incluir precios concretos.

ESTILO VISUAL:
- Paleta: fondo principal #F8F7F4 (crudo claro), texto principal #1A1A1A, color de acento principal #FF6B5B (coral cálido), acento secundario #6C5CE7 (morado suave), gris medio #8A8A8A, blanco puro #FFFFFF para tarjetas.
- Tipografía: 'Inter' para todo el cuerpo y 'Instrument Serif' o 'Fraunces' para titulares grandes del hero y secciones destacadas (cargar desde Google Fonts).
- Estética: minimalismo amplio, mucho aire, esquinas redondeadas medianas (rounded-2xl), sombras sutiles, microinteracciones en hover (scale leve, cambio de color), animaciones suaves con CSS transitions.
- Botones: el primario es pill redondeado relleno coral con texto blanco y sombra suave; el secundario es transparente con borde o solo texto con icono.

ESTRUCTURA (en este orden exacto):

1. HEADER fijo en top, fondo translúcido con blur al hacer scroll. Logo 'Lumora' a la izquierda (texto simple en negro, peso bold). Menú centrado horizontal con enlaces: Valores, Por qué Lumora, Cómo funciona, Preguntas. A la derecha botón CTA coral 'Empezar gratis' con pequeño icono de rayo SVG inline. En móvil colapsar a hamburguesa que abre panel lateral derecho.

2. HERO a pantalla casi completa, fondo crudo. Titular gigante en serif (4-5xl en móvil, 7xl en desktop): 'Tu equipo, en sintonía total'. Subtítulo en sans-serif gris medio (2 líneas máx) explicando la propuesta. Dos botones: primario coral 'Probar Lumora' y secundario con icono play circular 'Ver demo de 2 min'. Debajo, mockup de dashboard ficticio dibujado con divs (tarjetas internas con barras, gráficos simulados con SVG, avatares circulares con iniciales) con sombra grande y rotación leve.

3. BANDA DE LOGOS: texto pequeño centrado 'Equipos que ya confían en nosotros' y debajo fila de 6 nombres de empresas ficticias en tipografía bold gris claro (ej: Norvik, Pluma, Kestrel Studio, Halo&Co, Verdant, Otono Labs).

4. NUESTROS VALORES: título de sección 'Lo que nos mueve' y tres columnas con icono SVG inline grande (coral), título corto y párrafo de 2-3 líneas. Valores: Transparencia radical, Velocidad con cabeza, Cuidado del detalle.

5. TEXTO DESTACADO + IMAGEN: a la izquierda un párrafo grande tipo manifiesto donde algunas palabras clave aparecen resaltadas con fondo coral o subrayado morado animado. A la derecha una composición visual de tarjetas flotantes simulando notificaciones del producto.

6. TABS DE CARACTERÍSTICAS: cuatro pestañas horizontales clicables ('Mensajes', 'Tareas', 'Documentos', 'Calendario'). Al cambiar de tab cambia el contenido inferior: lado izquierdo con título, descripción y lista de 3 ventajas con checks; lado derecho con mockup ilustrado en divs. Implementar con JS vanilla (toggle de clase active y display).

7. SCROLLING TEXT: banda horizontal a ancho completo con frase repetida en serif gigante moviéndose lentamente de derecha a izquierda con CSS animation: 'Colaborar mejor — Pensar claro — Avanzar juntos — '. Separadores con asterisco coral.

8. SLIDER DE TESTIMONIOS: tres testimonios navegables con flechas y dots. Cada uno con foto circular (placeholder gris con iniciales), cita entrecomillada, nombre y cargo en empresa ficticia. Implementar carrusel con JS vanilla.

9. CÓMO FUNCIONA: título 'Empezar es así de simple' y tres pasos en fila con número grande en serif coral (01, 02, 03), título y descripción. Línea punteada horizontal conectando los pasos en desktop.

10. FAQS: acordeón con 5 preguntas plegables. Cada item con borde inferior fino, pregunta a la izquierda y un + que rota a × al abrir. Animación de altura suave. Implementar con JS vanilla.

11. CTA FINAL: sección a pantalla completa con fondo coral, titular serif gigante en blanco 'Empieza hoy, sin compromiso', subtítulo y botón blanco con texto coral 'Crear cuenta gratis'. Debajo línea pequeña 'Sin tarjeta de crédito'.

12. FOOTER: fondo casi negro #1A1A1A, texto claro. Cuatro columnas: logo Lumora + claim corto + email hola@lumoracloud.com; Producto (links: Características, Integraciones, Novedades, Estado); Empresa (Sobre nosotros, Blog, Empleo, Contacto); Legal (Privacidad, Términos, Cookies). Línea divisoria fina y copyright '© 2025 Lumora Cloud. Hecho con calma.' a la izquierda, iconos sociales SVG inline a la derecha.

REQUISITOS TÉCNICOS:
- Un único archivo HTML con Tailwind CDN (cdn.tailwindcss.com) y fuentes Google Fonts en el head.
- Configurar la paleta y fuentes en tailwind.config inline antes de los estilos.
- Todos los iconos como SVG inline (no usar librerías externas de iconos).
- Mockups e imágenes simulados con divs, SVG y gradientes, sin imágenes externas.
- Totalmente responsive: breakpoint principal en 1000px, móvil first.
- Suavizar scroll con scroll-behavior: smooth.
- Animaciones de aparición al hacer scroll usando IntersectionObserver (fade-up sutil).
- Accesibilidad: aria-labels en botones de icono, focus visible, contraste adecuado.
- Código JS limpio al final del body, comentado por secciones (tabs, slider, acordeón, menú móvil, observer).
- No usar lorem ipsum: todos los textos en español de España, originales y coherentes con la marca Lumora Cloud.

5.772 caracteres · 54 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header centrado con logo, menú y botón CTA
1.2 Hero con titular, subtítulo, CTAs y mockup
1.3 Banda de logos de clientes
1.4 Tres valores con iconos
1.5 Texto destacado con palabras coloreadas + imagen
1.6 Tabs de características
1.7 Scrolling text animado
1.8 Slider de testimonios
1.9 Cómo funciona (3 pasos)
1.10 FAQs en acordeón
1.11 CTA final a pantalla completa
1.12 Footer con columnas de links

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumora Cloud
Sector: Plataforma SaaS de productividad y colaboración para equipos remotos
Claim: Trabajo en equipo sin fricción, desde cualquier lugar

Bloques de la home

1.1 Header centrado con logo a la izquierda, menú horizontal y botón CTA destacado a la derecha
1.2 Hero con titular grande, subtítulo, dos botones (primario + secundario con icono play) y mockup de producto debajo
1.3 Sección de logos de clientes en escala de grises
1.4 Bloque 'Nuestros valores' con 3 columnas de iconos, título y descripción
1.5 Sección con texto destacado y palabras resaltadas en color, alineada con imagen lateral
1.6 Tabs horizontales con características del producto (4 pestañas con contenido cambiante e imagen)
1.7 Banda de texto en scroll horizontal animado con frase de marca
1.8 Slider de testimonios con foto circular, cita, nombre y cargo
1.9 Sección 'Cómo funciona' con 3 pasos numerados y línea conectora
1.10 Acordeón de FAQs con preguntas plegables
1.11 CTA final a pantalla completa con fondo de color y botón
1.12 Footer minimalista con logo, links agrupados en columnas y 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

Lumora Cloud — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs