SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,9 584 descargas

Plataforma SaaS de pagos digitales para comercios y profesionales Cobra, concilia y crece desde un único panel.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web SaaS / Startup completa y autocontenida para una fintech ficticia llamada **Velora Pay** (dominio velorapay.com, email hola@velorapay.com, año 2025). Sector: plataforma de pagos digitales para comercios y autónomos. Claim: 'Cobra, concilia y crece desde un único panel'. Todo el copy debe ser original en español de España, en tono claro y profesional, sin jerga marketinera y sin precios concretos.

## Stack técnico
- Un único archivo **HTML** con **Tailwind CSS por CDN** y **JavaScript vanilla** embebido.
- Sin dependencias externas más allá de Tailwind y Google Fonts.
- Imágenes vía placeholders (puedes usar gradientes CSS, SVG inline o servicios tipo picsum) y mockups de panel construidos con HTML+CSS.
- Iconografía: SVG inline de trazo fino (lineal, estilo Lucide).
- Responsive completo (móvil, tablet, desktop) y accesible (focus visible, aria-labels, contraste suficiente).

## Identidad visual
- **Paleta** (modo oscuro principal):
  - Fondo base: #0B0D10
  - Superficie/cards: #14181D
  - Borde sutil: #1F242B
  - Texto principal: #F2F4F7
  - Texto secundario: #98A2B3
  - Acento primario (verde lima eléctrico): #C6F24E
  - Acento secundario (azul frío): #6EA8FF
  - Degradado CTA: de #C6F24E a #6EA8FF
- **Tipografía**: 'Inter' para el cuerpo y 'Space Grotesk' para titulares (ambas de Google Fonts). Titulares con tracking ajustado, pesos 500-700, tamaños grandes (clamp 2.5rem a 5rem en hero).
- Bordes redondeados generosos (rounded-2xl/3xl), sombras suaves, mucho aire entre secciones (py-24/32).
- Micro-interacciones: hover con leve scale y cambio de borde, transiciones de 200-300ms, fade-in al hacer scroll (IntersectionObserver).

## Header (en todas las páginas)
- Posición fixed top, fondo translúcido con backdrop-blur, borde inferior 1px #1F242B.
- Izquierda: logo 'Velora Pay' (texto + un símbolo SVG simple, círculo con un trazo diagonal en color acento).
- Derecha: un único botón cuadrado con icono de rejilla 3x3 (puntos) que al hacer clic abre un **overlay lateral derecho** (panel deslizante de ~420px) con fondo #14181D.
- Dentro del overlay: lista vertical de enlaces (Productos, Nosotros, Precios, Blog, Contacto), cada uno con icono lineal a la izquierda, texto y una flechita diagonal arriba-derecha que aparece en hover. Debajo, una imagen ambiente (puede ser un degradado con formas) con bordes redondeados.
- Cierre del overlay con tecla Esc, clic fuera o botón X.

## Footer (en todas las páginas)
- Fondo #0B0D10, padding amplio.
- 4 columnas: (1) Logo Velora Pay + claim + iconos sociales (X, LinkedIn, Instagram, YouTube); (2) Producto: enlaces a Checkout, Links de pago, Suscripciones, API; (3) Empresa: Nosotros, Blog, Empleo, Prensa; (4) Legal: Aviso legal, Privacidad, Cookies, Cumplimiento.
- Línea separadora y fila inferior con '© 2025 Velora Pay. Todos los derechos reservados.' y selector de idioma simulado.

## HOME — secciones en orden

**1.2 Hero**: a pantalla casi completa (min-h-screen). Etiqueta pequeña arriba con punto verde animado y texto 'Nuevo · Conciliación automática v2'. Titular en dos líneas con la segunda en color acento o con un trazo subrayado SVG ondulado. Subtítulo en 1-2 frases. Dos CTAs: primario relleno con degradado y texto oscuro ('Probar la plataforma'), secundario outline ('Ver demo en vídeo' con icono play). A la derecha o debajo, un **mockup de dashboard** construido con HTML+CSS: barra lateral, gráfico de líneas SVG, tarjetas con importes ficticios, lista de transacciones con avatares circulares y badges de estado.

**1.3 Logos de clientes**: título pequeño centrado 'Equipos que ya cobran con Velora'. Tira horizontal con 6 logotipos ficticios en SVG (nombres inventados tipo Norvik, Lumenta, Brío, Kalder, Pavo&Hijos, Tindra) en color #98A2B3 con hover a blanco.

**1.4 Métricas**: 4 columnas separadas por divisores verticales. Cada una con un número grande (contador animado al entrar en viewport) y una etiqueta debajo. Inventa cifras coherentes pero no marketineras (ej: '1,4 B€ procesados', '38 200 comercios', '24 países', '99,2 % aprobación').

**1.5 Características**: titular 'Todo lo que necesitas para cobrar bien'. Grid 3x2 (responsive a 1 col en móvil). Cada tarjeta: borde 1px sutil, fondo #14181D, icono SVG lineal en círculo con tinte acento, título y 2 líneas de descripción. Temas: cobros recurrentes, links de pago, antifraude, multidivisa, conciliación, API.

**1.6 Bloques alternados**: 3 filas en zig-zag (texto-imagen, imagen-texto, texto-imagen). Cada fila con un kicker en acento, titular, párrafo, lista corta con checks y un mockup distinto a la otra mitad (gráfico de barras, calendario de cobros, vista de integraciones).

**1.7 Flujo en 4 pasos**: títulos '01 Conecta', '02 Configura', '03 Cobra', '04 Concilia', dispuestos horizontalmente con líneas punteadas conectando cada paso. En móvil pasan a vertical.

**1.8 Testimonios**: carrusel horizontal con autoplay suave y controles. Tarjetas oscuras con cita entrecomillada, avatar circular, nombre ficticio, cargo y empresa ficticia. 5 testimonios.

**1.9 Integraciones**: layout circular o en cuadrícula 4x2 de logos de herramientas ficticias (nombres inventados de CRMs/ERPs/ecommerce) con un icono central de Velora. Pequeño texto: 'Más de 80 integraciones nativas'.

**1.10 Planes**: 3 tarjetas (Inicia, Crece, Escala). Sin importes; solo listado de lo que incluye cada uno y un botón. La tarjeta central destacada con borde en acento y badge 'Recomendado'.

**1.11 FAQ**: acordeón a una columna ancha centrada con 6 preguntas (seguridad, tiempos de abono, divisas, soporte, cancelación, exportación de datos). Animación de despliegue suave.

**1.12 CTA final**: bloque ancho con fondo degradado de la paleta, esquinas redondeadas, titular grande, subtítulo y botón oscuro.

**1.13 Footer** según especificación general.

## Otras páginas
Crea las páginas **Productos, Nosotros, Precios, Blog, Contacto** enlazadas desde el menú overlay. Pueden ir en el mismo archivo HTML mediante secciones con id y mostrarse/ocultarse vía JS, o como anclas que llevan a bloques diferenciados. Cada una debe respetar el header y footer comunes y tener al menos un hero propio con breadcrumb, contenido específico según la tabla de bloques entregada (productos en grid de tarjetas, equipo en grid, precios con toggle mensual/anual, blog con grid de artículos y filtros tipo chip, contacto con formulario + tarjetas de oficinas).

## Requisitos finales
- Código limpio, comentado por secciones.
- Sin Lorem Ipsum: todos los textos redactados de forma natural en español de España.
- Animaciones discretas, nada estridente.
- Que el resultado se sienta como un producto SaaS premium, sobrio y técnico, con el acento lima como punto de energía visual.

---

## 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>
```

7.078 caracteres · 86 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header translúcido con menú overlay lateral
1.2 Hero con mockup de panel y dos CTAs
1.3 Tira de logos de clientes
1.4 Métricas con contadores animados
1.5 Grid de características 2x3
1.6 Bloques alternados imagen-texto
1.7 Flujo de 4 pasos numerados
1.8 Carrusel de testimonios
1.9 Nube de integraciones
1.10 Resumen de planes
1.11 FAQ en acordeón
1.12 CTA final degradado
1.13 Footer 4 columnas

PRODUCTOS

2.1 Header
2.2 Hero de página con breadcrumb y titular
2.3 Grid de productos en tarjetas grandes (Checkout, Links de pago, Suscripciones, Terminal, API)
2.4 Bloque comparativo de funcionalidades en tabla
2.5 Sección de casos de uso por sector
2.6 CTA final
2.7 Footer

NOSOTROS

3.1 Header
3.2 Hero editorial con foto ambiente y manifiesto
3.3 Bloque de valores en 3 columnas con iconos
3.4 Timeline horizontal de hitos de la empresa
3.5 Grid del equipo con foto, nombre y rol
3.6 Bloque de cultura con galería en mosaico
3.7 CTA de empleo
3.8 Footer

PRECIOS

4.1 Header
4.2 Hero corto con toggle mensual/anual
4.3 Tres tarjetas de plan con lista de incluidos
4.4 Tabla comparativa detallada de funciones
4.5 FAQ específico de facturación
4.6 CTA para hablar con ventas
4.7 Footer

BLOG

5.1 Header
5.2 Hero con artículo destacado grande
5.3 Filtros por categoría tipo chips
5.4 Grid de artículos 3 columnas con imagen, categoría, título y fecha
5.5 Paginación numerada
5.6 Bloque de suscripción a newsletter
5.7 Footer

CONTACTO

6.1 Header
6.2 Hero corto con titular y datos de contacto
6.3 Bloque dos columnas: formulario a la izquierda, info y mapa a la derecha
6.4 Tarjetas de oficinas en 3 columnas
6.5 CTA de soporte 24/7
6.6 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Velora Pay
Sector: Plataforma SaaS de pagos digitales para comercios y profesionales
Claim: Cobra, concilia y crece desde un único panel

Bloques de la home

1.1 Header fijo translúcido con logo Velora Pay a la izquierda y un único icono de menú (rejilla 3x3) a la derecha que abre un overlay lateral con enlaces y una imagen ambiente
1.2 Hero a pantalla completa con etiqueta superior, titular grande en dos pesos, subtítulo descriptivo, dos CTAs (primario relleno y secundario outline) y un mockup de panel de control flotante con tarjetas de transacción
1.3 Tira de logotipos ficticios de clientes en escala de grises con título 'Equipos que ya cobran con Velora'
1.4 Bloque de métricas en 4 columnas con contadores animados (volumen procesado, comercios activos, países, tasa de aprobación)
1.5 Sección de características en grid 2x3 con iconos lineales, título y descripción corta por tarjeta
1.6 Bloque alternado imagen-texto (zig-zag) con 3 filas explicando cobros, conciliación e integraciones, cada una con captura simulada del producto
1.7 Sección de flujo en 4 pasos numerados horizontal con líneas conectoras
1.8 Bloque de testimonios en carrusel con tarjetas oscuras, avatar, nombre, cargo y cita
1.9 Sección de integraciones tipo nube de logos circular con icono central
1.10 Bloque de precios resumido con 3 planes (sin importe concreto, solo características)
1.11 FAQ en acordeón a una columna con 6 preguntas
1.12 CTA final a ancho completo con fondo degradado, titular grande y botón
1.13 Footer oscuro con 4 columnas (marca + claim, producto, empresa, legal), separador, copyright e iconos 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