SAAS / STARTUP · Claude Design · HTML

Lumen Forge — Prompt de diseño web para Claude AI

★★★★★4,8 872 descargas

Plataforma SaaS para automatizar flujos de trabajo en equipos remotos Trabajo coordinado, sin reuniones de más.

↓ 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 externos más allá de Tailwind. La marca es **Lumen Forge**, una startup SaaS que ofrece una plataforma para automatizar flujos de trabajo en equipos remotos. Dominio ficticio: lumenforge.com. Email de contacto: hola@lumenforge.com. Claim: 'Trabajo coordinado, sin reuniones de más'. Año: 2025. Todo el copy debe estar en español de España, original, en tono cercano pero profesional, con verbos en activo y sin jerga marketinera. No incluyas precios concretos.

## Stack y técnica
- HTML5 semántico, Tailwind CSS por CDN (script de cdn.tailwindcss.com), JS vanilla en un <script> al final del body.
- Single-file, autocontenido, sin imágenes externas: usa SVG inline para iconos, logos de clientes ficticios y mockups, y degradados/figuras CSS para los fondos visuales.
- Tipografía: importa 'Inter' desde Google Fonts (pesos 400, 500, 600, 700) y úsala como sans-serif por defecto.
- Animaciones suaves: scroll suave entre anclas, fade-in al hacer scroll usando IntersectionObserver, contadores animados con requestAnimationFrame.

## Paleta
- Fondo claro base: #F6F6F4
- Texto principal: #1A1A1A
- Texto secundario: #5C5C5C
- Acento primario (vivo): #FF5C39
- Acento secundario (frío): #2E5BFF
- Superficies tarjeta: #FFFFFF con borde sutil #ECECEC
- Sección oscura CTA: #111111 con texto blanco

## Estructura visual general
Estética 'material' moderna: esquinas redondeadas medias (rounded-2xl), sombras suaves, mucho aire blanco, jerarquía clara, ilustraciones geométricas planas.

## Header (fijo, transparente al inicio, con fondo blanco al hacer scroll)
- Layout centrado: logo a la izquierda ('Lumen Forge' en texto, sin imagen), menú de navegación centrado con 3 enlaces ancla: 'Nuestros valores', '¿Por qué Lumen Forge?', 'Cómo funciona'. A la derecha un botón sólido en color acento primario con icono de rayo SVG y texto 'Solicitar acceso'.
- En móvil: hamburguesa animada (3 líneas a X) que abre un panel lateral desde la derecha.

## Home, sección a sección

**1.2 Hero** (min-h-screen, fondo #F6F6F4)
- Pre-titular pequeño en mayúsculas con punto delante: '• Plataforma de automatización'
- Titular H1 enorme (text-6xl md:text-7xl) en dos líneas: 'Tu equipo avanza, las **tareas repetitivas** desaparecen.' La palabra entre asteriscos va en color acento primario y subrayada con un trazo a mano (SVG).
- Subtítulo breve (2 líneas) explicando que Lumen Forge conecta herramientas y elimina pasos manuales.
- Dos botones: principal sólido 'Probar gratis 14 días' y secundario outline 'Ver demo' con icono play.
- A la derecha un mockup SVG de una interfaz de tablero kanban estilizado con tarjetas flotantes.

**1.3 Banda de logos**
- Texto pequeño centrado: 'Equipos que ya forjan su día a día con nosotros'.
- Carrusel automático horizontal infinito con 6 logos de clientes inventados en SVG monocromo (nombres: Norvell, Brimar, Kelpie & Co, Tessera, Ondalab, Mahonia).

**1.4 Nuestros valores** (id='valores')
- Encabezado de sección con etiqueta pequeña 'Principios' y H2 'Cómo entendemos el trabajo'.
- Grid de 3 columnas (1 en móvil) con tarjetas blancas con icono SVG arriba, título y descripción de 3 líneas:
  · 'Menos ruido, más foco' – sobre reducir notificaciones.
  · 'Procesos que se explican solos' – sobre claridad.
  · 'Tu stack, tu ritmo' – sobre integraciones.

**1.5 Testimonios** (id='testimonios')
- Slider horizontal con flickity-style (implementado con scroll-snap y botones de control en JS vanilla).
- 4 tarjetas grandes con comilla decorativa SVG, cita de 3-4 líneas inventada, avatar SVG circular con iniciales, nombre ficticio y cargo:
  · Marta Ibáñez, Lead de operaciones en Norvell.
  · Hugo Castaño, CTO en Tessera.
  · Lucía Verdejo, Project Manager en Ondalab.
  · Iván Reixach, Director de producto en Mahonia.

**1.6 ¿Por qué Lumen Forge?** (id='por-que')
- H2 a la izquierda con párrafo introductorio.
- Layout en dos columnas: a la izquierda, lista de 4 tabs verticales clicables (Automatizaciones visuales, Integraciones nativas, Permisos por equipo, Informes en tiempo real). A la derecha, panel grande con mockup SVG que cambia según el tab activo (paneles, gráficos de barras, diagrama de flujo, lista de permisos).
- El tab activo muestra borde izquierdo en acento primario.

**1.7 Cómo funciona** (id='como-funciona')
- H2 'Tres pasos y listo'.
- Tres bloques horizontales con número grande (01, 02, 03) en outline, título y descripción:
  · Conecta tus herramientas en minutos.
  · Diseña el flujo arrastrando bloques.
  · Mide, ajusta y repite.
- Línea de conexión punteada entre pasos.

**1.8 Contadores**
- Banda con fondo oscuro #111111, texto blanco.
- 4 contadores animados al entrar en viewport: '320+ equipos activos', '1,8M tareas automatizadas', '47 integraciones nativas', '99,98% uptime'.

**1.9 FAQ**
- H2 'Preguntas frecuentes'.
- 6 paneles acordeón (solo uno abierto a la vez) con preguntas tipo: '¿Cuánto tarda la implantación?', '¿Necesito perfil técnico?', '¿Qué pasa con mis datos?', '¿Se integra con mi suite actual?', '¿Hay periodo de prueba?', '¿Puedo cancelar cuando quiera?'. Respuestas de 2-3 líneas, originales.

**1.10 CTA final**
- Sección ancho completo con fondo acento primario #FF5C39, texto blanco, titular grande 'Empieza a forjar tu flujo hoy', subtítulo corto y un botón blanco con texto 'Crear cuenta gratis'.

**1.11 Footer**
- Fondo blanco, borde superior fino.
- Cuatro columnas: logo + claim breve; Producto (Características, Integraciones, Novedades); Empresa (Sobre nosotros, Blog, Contacto); Legal (Aviso legal, Privacidad, Cookies).
- Línea inferior con: '© 2025 Lumen Forge. Hecho con calma desde Valencia.' a la izquierda, e iconos sociales SVG (X, LinkedIn, GitHub) a la derecha. Email de contacto hola@lumenforge.com visible.

## Requisitos técnicos finales
- Accesible: roles ARIA donde aplique, contraste suficiente, focus visible.
- Responsive impecable de 360px a 1440px.
- Sin dependencias externas más allá de Tailwind CDN y Google Fonts.
- Código limpio, comentado por secciones.
- Todo el JS necesario (menú móvil, tabs, acordeón, slider testimonios, contadores, scroll suave, fade-in) incluido al final del body en un único bloque.

6.279 caracteres · 87 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 botón de acción
1.2 Hero con titular en dos líneas y palabra resaltada
1.3 Banda de logos de clientes en scroll
1.4 Grid de valores en 3 columnas con iconos
1.5 Slider de testimonios con tarjetas
1.6 Tabs verticales con mockups
1.7 Pasos numerados 'Cómo funciona'
1.8 Contadores animados
1.9 FAQ acordeón
1.10 CTA final ancho completo
1.11 Footer minimalista

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumen Forge
Sector: Plataforma SaaS para automatizar flujos de trabajo en equipos remotos
Claim: Trabajo coordinado, sin reuniones de más

Bloques de la home

1.1 Header transparente con menú centrado y botón de acción a la derecha
1.2 Hero a pantalla completa con titular en dos líneas y palabra resaltada
1.3 Banda de logos de clientes en scroll horizontal
1.4 Bloque 'Nuestros valores' en grid de 3 columnas con iconos
1.5 Sección de testimonios en slider con tarjetas grandes
1.6 Bloque '¿Por qué Lumen Forge?' con tabs verticales y mockups
1.7 Sección 'Cómo funciona' con 3 pasos numerados
1.8 Contadores animados con métricas de impacto
1.9 FAQ con paneles acordeón
1.10 CTA final a ancho completo con fondo de color sólido
1.11 Footer minimalista con enlaces 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

Lumen Forge — 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