SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,6 4.213 descargas

SaaS de gestión y automatización de flujos de trabajo para equipos remotos Coordina, automatiza y crece sin fricciones.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web SaaS moderna y completa para una marca ficticia llamada **Lumora Cloud** (dominio lumoracloud.com, email hola@lumoracloud.com, año 2025). Sector: plataforma SaaS de gestión y automatización de flujos de trabajo para equipos remotos. Claim: 'Coordina, automatiza y crece sin fricciones'. Idioma: español de España. Tono: claro, directo, sin jerga marketinera, verbos en activo.

## ALCANCE
Genera un ÚNICO archivo HTML autocontenido que incluya las páginas Home, Producto, Precios, Recursos y Contacto. La navegación entre páginas debe funcionar mostrando/ocultando secciones con JS vanilla (sin recargar). Por defecto se muestra Home.

## STACK TÉCNICO
- HTML5 semántico
- Tailwind CSS vía CDN (https://cdn.tailwindcss.com)
- JavaScript vanilla en un único <script> al final
- Google Fonts vía <link>
- Iconos: SVG inline o Lucide vía CDN
- Sin dependencias externas adicionales más allá de Tailwind y fuentes

## PALETA
- Fondo principal: #f8f8f8 (gris muy claro casi blanco)
- Texto principal: #1a1a1a
- Texto secundario: #5a5a5a
- Acento primario: #6E5BE9 (violeta vibrante)
- Acento secundario: #FF6B5B (coral)
- Bordes sutiles: #e5e5e5
- Superficies sobre fondo: #ffffff

## TIPOGRAFÍA
- Titulares: 'Inter' o 'Plus Jakarta Sans', peso 700-800, tracking ajustado (-0.02em)
- Cuerpo: 'Inter', peso 400-500
- Tamaños generosos: H1 entre 56-80px, H2 entre 40-56px, body 16-18px

## HEADER (común a todas las páginas)
- Transparente sobre el hero, fondo #f8f8f8 con leve sombra al hacer scroll
- Layout centrado: logo 'Lumora' a la izquierda (texto, sin imagen), menú centrado, CTA a la derecha
- Items menú: Nuestros valores, Por qué Lumora, Cómo funciona, Producto, Precios, Recursos, Contacto
- CTA derecha: botón redondeado con sombra suave 'Empezar gratis' en acento primario
- Subrayado animado bajo el item activo al hacer hover
- Menú móvil: hamburguesa que abre panel lateral deslizante desde la derecha

## FOOTER (común)
- Fondo blanco con borde superior sutil
- 4 columnas: Lumora (logo + descripción corta + redes), Producto (enlaces), Empresa (enlaces), Recursos (enlaces)
- Línea inferior con copyright '© 2025 Lumora Cloud' y enlaces legales
- Iconos sociales sutiles (LinkedIn, X, GitHub, YouTube)

## HOME — SECCIÓN A SECCIÓN

**1.2 Hero**
- Padding superior amplio (160px), fondo #f8f8f8
- H1 muy grande a 2 líneas: 'Tu equipo, tus procesos, un solo lugar'
- Subtítulo 18px en gris medio, máximo 2 líneas
- Dos CTAs: primario violeta 'Empezar gratis' y secundario outline 'Ver demo'
- Debajo, mockup ilustrativo de la aplicación: tarjeta blanca grande con sombra suave que muestre una interfaz simulada (kanban con columnas, avatares, etiquetas de colores). Construir el mockup con divs y Tailwind, sin imágenes externas

**1.3 Tira de logos**
- Texto pequeño centrado 'Empresas que ya coordinan con Lumora'
- 6 logos ficticios en gris (puedes usar texto estilizado con tipografías distintas): Nexora, Brevia, Solquant, Maravento, Kioden, Trefil

**1.4 Valores (grid 3 columnas)**
- H2: 'Hecho para equipos que se mueven rápido'
- 3 tarjetas con icono SVG grande superior, título y descripción de 2 líneas:
  - 'Automatiza sin código' / 'Conecta acciones entre tus herramientas con reglas visuales'
  - 'Visibilidad real' / 'Sigue el avance de cada iniciativa en un mismo tablero'
  - 'Colabora sin ruido' / 'Comentarios, decisiones y archivos junto a cada tarea'

**1.5 Texto destacado con palabras rotativas**
- Frase grande centrada: 'Ahorra horas en [WORD] cada semana' donde [WORD] rota entre: reuniones, informes, seguimientos, aprobaciones, coordinación. Animación: fade + slide up con setInterval cada 2.5s

**1.6 Tabs de funcionalidades**
- H2: 'Todo lo que necesitas, organizado'
- 4 pestañas horizontales: Proyectos, Automatización, Reportes, Integraciones
- Al hacer clic, cambia el contenido a la derecha: imagen-mockup en bloque izquierdo (construido con divs) y a la derecha título + descripción + lista de 3 bullets con checkmark
- Transición suave de opacidad al cambiar

**1.7 Carrusel de testimonios**
- H2: 'Lo que dicen quienes ya usan Lumora'
- Carrusel horizontal con 4 testimonios visibles 1-2 a la vez con scroll snap o flechas prev/next
- Cada tarjeta: cita entre comillas grandes, nombre ficticio, cargo y empresa ficticia (ej.: 'Lara Mendizábal, Head of Ops en Brevia')
- Indicadores de paginación inferior (puntos)

**1.8 Cómo funciona (3 pasos)**
- H2: 'Empieza en tres pasos'
- 3 columnas con número grande (01, 02, 03) en acento, título y descripción
  - Conecta tus herramientas
  - Diseña tus flujos
  - Mide y mejora

**1.9 Banda de texto en movimiento**
- Marquee horizontal infinito con frases separadas por puntos: 'Productividad sin caos · Decisiones más rápidas · Equipos alineados · Menos correos · Más enfoque'
- Tipografía muy grande, ligera animación CSS @keyframes translateX

**1.10 FAQ con toggles**
- H2: 'Preguntas frecuentes'
- 6 paneles desplegables con + / − que rotan al abrir
- Preguntas realistas sobre prueba gratuita, seguridad, integraciones, soporte, migración, cancelación

**1.11 CTA final**
- Fondo violeta (#6E5BE9), texto blanco
- H2 grande: 'Empieza hoy, sin tarjeta'
- Botón blanco 'Crear cuenta gratis'

## PRODUCTO (página secundaria)
Hero con título 'Una plataforma, infinitas posibilidades', bloque con texto + mockup, grid 2x3 de funcionalidades con iconos, tabla comparativa simple, CTA final.

## PRECIOS
Hero corto, 3 planes (Starter, Team, Scale) en tarjetas con toggle mensual/anual SIN importes concretos (usar 'consultar' o ticks de características), tarjeta central destacada con borde violeta y badge 'Recomendado', tabla comparativa, FAQ específico.

## RECURSOS
Hero con barra de búsqueda, grid de 6 artículos ficticios con imagen-placeholder (bloque de color con título), categoría y fecha, bloque de suscripción a newsletter inline.

## CONTACTO
Hero corto, formulario en 2 columnas (nombre, email, empresa, mensaje) con datos de contacto al lado (email hola@lumoracloud.com, teléfono ficticio, dirección ficticia en Madrid), bloque con 3 oficinas (Madrid, Berlín, Lisboa).

## REQUISITOS TÉCNICOS
- Responsive completo (móvil 375px, tablet 768px, desktop 1280px+)
- Animaciones suaves al hacer scroll usando IntersectionObserver (fade-in + translateY)
- Mockups y placeholders SIEMPRE construidos con divs y Tailwind, sin URLs externas
- Accesibilidad: aria-labels en botones de menú, navegación por teclado, contraste AA
- Código limpio, comentado por secciones
- Sin precios concretos en ninguna parte
- Todo el copy original en español de España

Entrega un único archivo .html listo para abrir en el navegador.

6.631 caracteres · 119 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header transparente con menú centrado y CTA
1.2 Hero a pantalla completa con titular, subtítulo y mockup
1.3 Tira de logos de clientes
1.4 Grid de 3 valores con iconos
1.5 Texto destacado con palabras animadas
1.6 Tabs de funcionalidades del producto
1.7 Carrusel de testimonios
1.8 Pasos 'Cómo funciona'
1.9 Banda de texto en movimiento
1.10 FAQ con toggles
1.11 CTA final
1.12 Footer minimalista

PRODUCTO

2.1 Header
2.2 Hero secundario con título de página
2.3 Bloque introductorio con imagen lateral
2.4 Grid de funcionalidades (6 tarjetas)
2.5 Comparativa en tabla
2.6 CTA final
2.7 Footer

PRECIOS

3.1 Header
3.2 Hero corto con título
3.3 Tres planes en tarjetas con toggle mensual/anual (sin importes)
3.4 Tabla comparativa de características
3.5 FAQ específico de planes
3.6 Footer

RECURSOS

4.1 Header
4.2 Hero con buscador
4.3 Grid de artículos con imagen y categoría
4.4 Newsletter inline
4.5 Footer

CONTACTO

5.1 Header
5.2 Hero corto
5.3 Formulario en 2 columnas con datos de contacto al lado
5.4 Bloque de oficinas
5.5 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumora Cloud
Sector: SaaS de gestión y automatización de flujos de trabajo para equipos remotos
Claim: Coordina, automatiza y crece sin fricciones

Bloques de la home

1.1 Header transparente con logo a la izquierda, menú centrado (Nuestros valores, Por qué Lumora, Cómo funciona) y CTA destacado a la derecha
1.2 Hero a pantalla completa con titular grande, subtítulo, doble CTA y mockup de aplicación flotante
1.3 Tira de logos de clientes en escala de grises
1.4 Sección de valores con grid de 3 columnas, icono + título + descripción
1.5 Bloque de texto destacado con palabras animadas que rotan (highlighted text)
1.6 Sección tabbed con 4 pestañas mostrando capacidades del producto con imagen + bullets
1.7 Carrusel de testimonios con foto, cita, nombre y cargo
1.8 Sección 'Cómo funciona' con 3 pasos numerados en columnas
1.9 Banda de texto en movimiento horizontal (scrolling text) con claims cortos
1.10 FAQ con paneles desplegables (toggles)
1.11 CTA final centrado sobre fondo de color con titular grande y botón
1.12 Footer minimalista con logo, columnas de enlaces, copyright y redes sociales

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

PRODUCTO

PRECIOS

RECURSOS

CONTACTO

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs