SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,9 1.842 descargas

Plataforma SaaS de gestión operativa para equipos remotos y empresas en crecimiento Convierte procesos dispersos en flujos claros.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web SaaS clásica completa en un único archivo HTML autocontenido para la marca ficticia VELORA CLOUD, una plataforma SaaS de gestión operativa para equipos remotos. Claim: 'Convierte procesos dispersos en flujos claros'. Dominio: veloracloud.com. Email: hola@veloracloud.com. Año: 2025.

STACK TÉCNICO
- Un solo archivo HTML5.
- Tailwind CSS vía CDN (<script src="https://cdn.tailwindcss.com"></script>) configurado inline con los colores y fuentes de marca.
- JavaScript vanilla para: menú móvil, tabs, slider de testimonios, acordeón FAQ, contadores animados al hacer scroll, smooth scroll.
- Sin dependencias externas salvo Tailwind CDN y Google Fonts (Inter).
- Imágenes: usar placeholders de https://images.unsplash.com con queries genéricas (oficina, equipo, dashboard abstracto) y mockups SVG inline cuando sea posible.
- Iconos: SVG inline lineales, trazo 1.5px.
- Accesibilidad: roles ARIA en menús, alt en imágenes, focus visible.
- Responsive mobile-first, breakpoints md y lg.

PALETA
- Azul principal: #2E4BFF (botones y acentos)
- Azul oscuro texto: #0A1140
- Fondo claro: #FFFFFF
- Fondo gris suave: #F5F6FA
- Gris texto secundario: #5B6079
- Bordes: #E6E8F0
- Acento sutil: #EEF1FF

TIPOGRAFÍA
- Familia única: Inter (300, 400, 500, 600, 700).
- Titulares muy grandes, tracking ajustado (-0.02em), pesos 600-700.
- Cuerpo 16-17px, line-height 1.6.
- Botones en 500.

HEADER (1.1)
- Posición absoluta sobre el hero, fondo transparente, se vuelve blanco con sombra ligera al hacer scroll (sticky).
- Logo a la izquierda: texto 'Velora' en bold + 'Cloud' en regular, color azul oscuro.
- Menú horizontal centrado-derecha: Producto, Soluciones, Precios, Recursos.
- A la derecha dos elementos: enlace 'Iniciar sesión' y botón azul sólido 'Probar gratis'.
- En móvil: hamburguesa que abre menú a pantalla completa.

HOME SECCIÓN A SECCIÓN

1.2 HERO
- Altura mínima 90vh, fondo blanco con un degradado muy sutil azul claro arriba.
- Centrado, padding generoso.
- Pre-titular pequeño en azul: 'Plataforma SaaS · 2025'.
- Titular en dos líneas, hasta 64px en desktop: 'Coordina tu equipo. / Acelera cada decisión.'
- Subtítulo gris en máximo 60ch: explica que Velora Cloud unifica tareas, proyectos y conversaciones en un único panel.
- Dos CTAs: 'Empezar gratis' (azul sólido) y 'Ver demo' (outline con icono play).
- Debajo, un mockup grande de dashboard: tarjeta con sombra suave, header simulado con tres puntos, sidebar lateral con iconos, área principal con gráficas de barras y tarjetas de métricas. Construir con divs y SVG inline, nada de imágenes externas para el mockup.

1.3 LOGOS
- Texto centrado pequeño en gris: 'Equipos que ya simplifican su día con Velora'.
- Fila de 6 logos ficticios en gris claro (texto + forma SVG simple). Nombres inventados: Nordika, Brava, Mintwave, Helio, Pasarela, Quartz.

1.4 CARACTERÍSTICAS
- Título sección a la izquierda en dos líneas, descripción corta debajo.
- Grid 3 columnas (1 en móvil) con 6 tarjetas: icono SVG lineal en círculo azul claro, título, párrafo de 2-3 líneas.
- Temas: Tareas en tiempo real, Automatizaciones sin código, Vistas personalizadas, Notificaciones inteligentes, Roles y permisos, Integraciones nativas.

1.5 BLOQUES IMAGEN-TEXTO
- Dos filas alternadas (texto izq + visual der; visual izq + texto der).
- Cada bloque: etiqueta pequeña azul, título grande, párrafo, lista de 3 bullets con check, enlace 'Conocer más →'.
- Visual: tarjetas mockup con tablas, kanban o gráficos construidos con divs.

1.6 ESTADÍSTICAS
- Banda con fondo gris suave (#F5F6FA).
- 4 contadores en fila: '12.000 equipos activos', '38 países', '99,98 % uptime', '4,8 / 5 valoración media'.
- Números muy grandes en azul, etiquetas debajo en gris. Animación al entrar en viewport.

1.7 TABS DE FUNCIONALIDADES
- Pestañas horizontales centradas: Proyectos, Tareas, Informes, Documentos.
- Al hacer clic cambia el contenido inferior: a la izquierda título + descripción + bullets, a la derecha mockup distinto por pestaña.
- Indicador activo con línea inferior azul.

1.8 TESTIMONIOS
- Slider horizontal de 3 tarjetas visibles en desktop, 1 en móvil.
- Cada tarjeta: cita en grande, autor con foto circular (Unsplash), nombre y cargo + empresa ficticia.
- Flechas anterior/siguiente y puntos de paginación.
- 6 testimonios inventados, españoles, tono natural.

1.9 PLANES
- Título sección y subtítulo centrados.
- 3 tarjetas: Inicial, Crecimiento (destacada con borde azul y badge 'Más elegido'), Empresa.
- Sin precios concretos: usar 'Para equipos pequeños', 'Para empresas en expansión', 'A medida'.
- Lista de features con check, CTA por plan.

1.10 FAQ
- Dos columnas en desktop, una en móvil.
- 6 preguntas en acordeón con icono +/− que rota.
- Preguntas naturales sobre prueba gratuita, migración de datos, seguridad, soporte, integraciones, facturación.

1.11 CTA FINAL
- Banda ancha con fondo azul #2E4BFF, esquinas redondeadas grandes, dentro de un contenedor con padding.
- Titular blanco grande: 'Empieza hoy. Configúralo en minutos.'
- Subtítulo blanco con opacidad 80 %.
- Botón blanco con texto azul: 'Crear cuenta gratuita'.

1.12 FOOTER
- Fondo azul oscuro #0A1140, texto blanco / gris claro.
- 4 columnas: marca + descripción corta + iconos sociales (X, LinkedIn, YouTube, GitHub); Producto (Funcionalidades, Integraciones, Novedades, Roadmap); Empresa (Sobre nosotros, Clientes, Empleo, Contacto); Legal (Privacidad, Cookies, Términos, Seguridad).
- Línea divisoria sutil y barra inferior: '© 2025 Velora Cloud · hola@veloracloud.com · veloracloud.com'.

REQUISITOS DE COPY
- Todo en español de España, tono cercano y profesional, frases cortas.
- Nada de superlativos vacíos ('el mejor', 'líder mundial').
- Verbos en activo, segunda persona del singular cuando aporte.

REQUISITOS TÉCNICOS
- Código limpio, comentado por secciones.
- Animaciones suaves (transition 300-500ms) y revelado al hacer scroll con IntersectionObserver.
- Sin errores de consola.
- Estructura semántica: header, main, section, footer.

Devuelve únicamente el archivo HTML final, listo para abrir en navegador.

6.071 caracteres · 109 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header transparente con menú y CTAs
1.2 Hero con titular, subtítulo, dos CTAs y mockup de producto
1.3 Banda de logos de clientes
1.4 Grid de características con iconos
1.5 Bloques alternados imagen-texto
1.6 Contadores de estadísticas
1.7 Tabs de funcionalidades
1.8 Slider de testimonios
1.9 Tabla de planes sin precios
1.10 FAQ en acordeón
1.11 CTA final azul
1.12 Footer en 4 columnas

PRODUCTO

2.1 Header
2.2 Hero secundario con título y breadcrumb
2.3 Visión general del producto en dos columnas
2.4 Grid de módulos con iconos
2.5 Bloque de integraciones (logos)
2.6 CTA final
2.7 Footer

SOLUCIONES

3.1 Header
3.2 Hero secundario
3.3 Tarjetas de casos de uso por sector
3.4 Bloque de beneficios con iconos
3.5 Testimonio destacado
3.6 CTA final
3.7 Footer

PRECIOS

4.1 Header
4.2 Hero secundario con toggle mensual/anual
4.3 Tabla comparativa de planes
4.4 Tabla detallada de features por plan
4.5 FAQ específico de facturación
4.6 CTA final
4.7 Footer

RECURSOS

5.1 Header
5.2 Hero secundario
5.3 Grid de artículos del blog
5.4 Sección de guías descargables
5.5 CTA newsletter
5.6 Footer

CONTACTO

6.1 Header
6.2 Hero secundario
6.3 Formulario de contacto en dos columnas con datos de empresa
6.4 Bloque de oficinas
6.5 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Velora Cloud
Sector: Plataforma SaaS de gestión operativa para equipos remotos y empresas en crecimiento
Claim: Convierte procesos dispersos en flujos claros

Bloques de la home

1.1 Header transparente con logo a la izquierda y menú horizontal a la derecha (Producto, Soluciones, Precios, Recursos) más botones Iniciar sesión y Probar gratis
1.2 Hero a pantalla completa: titular grande en dos líneas, subtítulo breve, dos CTAs (primario azul + secundario outline) y mockup de dashboard del producto debajo
1.3 Banda de logos de clientes en escala de grises con título pequeño centrado
1.4 Sección de características en grid 3 columnas con iconos lineales, título y descripción corta
1.5 Bloque alternado imagen-texto (dos filas) describiendo flujos del producto con bullets y enlace de detalle
1.6 Sección de estadísticas con 4 contadores grandes en azul sobre fondo claro
1.7 Tabs de funcionalidades: pestañas horizontales que cambian la captura mostrada
1.8 Testimonios en slider de tarjetas con foto, cita, nombre y cargo
1.9 Tabla comparativa de planes (3 columnas) sin precios, con lista de features y CTA por plan
1.10 FAQ en acordeón de 6 preguntas
1.11 CTA final ancho con fondo azul, titular blanco y botón claro
1.12 Footer en 4 columnas (marca + descripción, Producto, Empresa, Legal) con barra inferior de copyright y redes

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