SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,8 1.103 descargas

Plataforma SaaS de productividad y gestión de flujos de trabajo para equipos distribuidos Conecta tareas, datos y personas en un mismo lienzo.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera una web SaaS completa, autocontenida en un único archivo HTML, para una marca ficticia llamada **Voltari Cloud**, una plataforma SaaS de productividad y gestión de flujos de trabajo para equipos distribuidos. Dominio: voltaricloud.com. Email de contacto: hola@voltaricloud.com. Claim: 'Conecta tareas, datos y personas en un mismo lienzo'. Año: 2025.

## Alcance
Debe ser una single-page con todas las secciones de la home enlazadas mediante anclas en el menú. Diseño moderno, editorial, con mucho aire blanco, líneas finas y un acento de color azul Klein. Estética SaaS clásica: profesional, limpia, con micro-animaciones suaves al hacer scroll.

## Stack técnico
- HTML5 + Tailwind CSS vía CDN (<script src='https://cdn.tailwindcss.com'></script>)
- JavaScript vanilla en un único archivo
- Iconos con lucide (CDN) o SVG inline
- Imágenes placeholder vía https://picsum.photos o gradientes CSS para mockups
- Sin dependencias externas más allá de Tailwind y lucide

## Paleta de color
- Fondo principal: #FFFFFF
- Fondo secundario: #F5F5F2 (beige muy claro)
- Texto principal: #1A1A1A
- Texto secundario: #6B6B6B
- Acento principal: #1F2EBE (azul Klein)
- Acento hover: #1825A0
- Fondo oscuro (footer y CTA): #0E0E10
- Bordes sutiles: #E8E8E5

## Tipografía
- Inter (Google Fonts) para todo el sitio
- Pesos: 400, 500, 600, 700
- Titulares H1: 64-80px, weight 600, tracking ajustado -0.02em
- H2: 44-56px, weight 600
- Body: 16-18px, line-height 1.6

## Header (1.1)
Header fijo, transparente al inicio y con fondo blanco translúcido + blur al hacer scroll.
- Izquierda: logotipo 'Voltari Cloud' en texto, weight 700
- Centro: menú con enlaces 'Producto', 'Soluciones', 'Precios', 'Recursos'
- Derecha: enlace 'Acceder' y botón sólido azul Klein 'Probar gratis'
- En móvil: menú hamburguesa que despliega off-canvas desde la derecha

## Footer (1.12)
Fondo #0E0E10, texto blanco.
- 4 columnas: Producto, Empresa, Recursos, Legal (4-5 enlaces inventados cada una)
- Columna extra a la izquierda con logo, claim breve y formulario de newsletter (input + botón flecha)
- Línea inferior con © 2025 Voltari Cloud · hola@voltaricloud.com · iconos sociales (LinkedIn, X, YouTube)

## Home sección a sección

**1.2 Hero**
- Padding superior amplio (160px en desktop)
- Pequeña etiqueta arriba: 'Nuevo · Versión 4.2 disponible' dentro de un pill con borde
- Titular en dos líneas: 'Trabajo en equipo / sin fricción' (la segunda línea en cursiva o italic ligero)
- Subtítulo a 2 líneas describiendo la plataforma
- Doble CTA: botón sólido azul 'Probar 14 días gratis' + botón ghost 'Ver demo en vídeo' con icono play
- Debajo: mockup de la app en perspectiva ligera (caja con sombra grande y radio 16px, contenido simulado de dashboard con sidebar, cards y gráfica)

**1.3 Banda de logos**
- Texto pequeño centrado: 'Más de 12.000 equipos ya orquestan su trabajo con Voltari'
- 6 logos placeholder en gris (inventa nombres tipo 'Northbeam', 'Klarius', 'Mosaik', 'Verda', 'Lumen&Co', 'Atril')

**1.4 Grid de características 3x2**
- Titular sección + intro corta
- 6 tarjetas con icono lucide, título de 2-3 palabras y descripción de 2 líneas
- Bordes sutiles, hover con elevación ligera
- Funcionalidades: Tableros visuales, Automatizaciones, Documentos colaborativos, Vista calendario, Informes en tiempo real, Permisos granulares

**1.5 Bloques alternados 50/50**
- 3 bloques: el primero con imagen/mockup a la izquierda, el segundo invertido, el tercero a la izquierda
- Cada uno: eyebrow pequeño en azul, H2, párrafo, lista de 3 bullets con check azul, enlace 'Saber más →'

**1.6 Slider de testimonios**
- Fondo beige claro
- Cita grande tipo serif o italic en bold 32px
- Avatar circular + nombre + cargo + empresa
- Flechas de navegación a derecha + indicadores en puntos
- 4 testimonios inventados

**1.7 Contadores**
- 4 columnas con números grandes (60px+) en azul Klein y label debajo: '+12.000 equipos', '+45 países', '8M tareas completadas', '32% menos reuniones'
- Animación de conteo al entrar en viewport (IntersectionObserver)

**1.8 Grid de integraciones**
- Titular: 'Conecta con tus herramientas favoritas'
- Grid de 6x2 (12 tarjetas cuadradas) con logo placeholder de integración (nombres inventados: Slacky, Notea, Drivex, Zappier, Calendaro, etc.)
- Cajas con borde sutil y radio 12px

**1.9 Tabla de planes**
- 3 columnas: Starter, Pro (destacado con borde azul y badge 'Más elegido'), Empresa
- Cada plan: nombre, descripción breve, lista de 6-8 características con check, botón CTA (sin precios concretos, usa 'Empieza gratis', 'Hablemos', etc.)

**1.10 FAQ**
- Dos columnas en desktop, una en móvil
- 8 preguntas con acordeón (click expande/contrae con animación)
- Iconos + y - que rotan

**1.11 CTA final**
- Sección pantalla completa con fondo #1F2EBE (azul Klein)
- Titular blanco enorme: '¿Listos para empezar?'
- Subtítulo en blanco con opacidad 80
- Botón blanco sólido 'Crear cuenta gratis' + enlace ghost 'Hablar con ventas'
- Padding vertical 160px

## Requisitos técnicos
- Responsive completo (mobile-first, breakpoints sm/md/lg/xl)
- Smooth scroll en anclas
- Header con scroll-state (clase añadida al pasar de 50px)
- IntersectionObserver para fade-in suave de secciones y animación de contadores
- Slider de testimonios funcional con JS vanilla
- Acordeón de FAQ funcional
- Menú móvil off-canvas funcional
- Accesibilidad: labels en formularios, aria-expanded en acordeones, focus visible
- Sin lorem ipsum: todo el copy redactado en español de España, tono profesional cercano, verbos en activo, frases cortas
- Inventar todos los nombres, citas y datos manteniendo coherencia con la marca ficticia

5.640 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ú central y CTA
1.2 Hero con titular, subtítulo, doble CTA y mockup
1.3 Banda de logos de clientes
1.4 Grid de características 3x2
1.5 Bloques alternados 50/50 con captura y bullets
1.6 Slider de testimonios
1.7 Bloque de 4 contadores
1.8 Grid de integraciones
1.9 Tabla comparativa de 3 planes
1.10 FAQ en acordeón
1.11 CTA final azul Klein
1.12 Footer oscuro con 4 columnas y newsletter

PRODUCTO

2.1 Header transparente
2.2 Hero secundario con título de página y breadcrumb
2.3 Tabs de módulos del producto (Tareas, Documentos, Calendario, Automatizaciones)
2.4 Bloques alternados 50/50 por cada módulo
2.5 Sección de 'Cómo funciona' con 3 pasos numerados
2.6 Slider de testimonios
2.7 CTA final azul Klein
2.8 Footer

SOLUCIONES

3.1 Header
3.2 Hero secundario
3.3 Grid de sectores (Marketing, Producto, RRHH, Operaciones, Diseño, Ventas)
3.4 Bloque destacado con caso de uso
3.5 Banda de logos
3.6 CTA final
3.7 Footer

PRECIOS

4.1 Header
4.2 Hero secundario con toggle mensual/anual
4.3 Tabla comparativa de 3 planes
4.4 Tabla detallada de funcionalidades por plan
4.5 FAQ en acordeón
4.6 CTA final
4.7 Footer

RECURSOS

5.1 Header
5.2 Hero secundario
5.3 Grid de artículos destacados
5.4 Listado paginado de recursos
5.5 Bloque suscripción newsletter
5.6 Footer

CONTACTO

6.1 Header
6.2 Hero secundario
6.3 Bloque a dos columnas con formulario y datos de contacto
6.4 Mapa estilizado
6.5 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Voltari Cloud
Sector: Plataforma SaaS de productividad y gestión de flujos de trabajo para equipos distribuidos
Claim: Conecta tareas, datos y personas en un mismo lienzo

Bloques de la home

1.1 Header transparente con logo a la izquierda, menú central (Producto, Soluciones, Precios, Recursos) y CTA 'Probar gratis' a la derecha
1.2 Hero con titular grande a dos líneas, subtítulo, doble CTA y mockup de producto en perspectiva
1.3 Banda de logos de clientes en escala de grises con título tenue 'Equipos que confían en nosotros'
1.4 Bloque de características en grid 3x2 con icono, título corto y descripción
1.5 Sección dividida 50/50 con captura del producto a la izquierda y lista de bullets con check a la derecha (alternada en la siguiente)
1.6 Slider horizontal de testimonios con avatar, cita, nombre y cargo
1.7 Bloque de métricas con 4 contadores grandes (usuarios, países, tareas, ahorro)
1.8 Grid de integraciones con logos en cajas redondeadas
1.9 Tabla comparativa de 3 planes con destacado central
1.10 FAQ en acordeón a dos columnas
1.11 CTA final a pantalla completa sobre fondo azul Klein con titular y botón
1.12 Footer oscuro con 4 columnas de enlaces, logo, newsletter y legales

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