SAAS / STARTUP · Claude Design · HTML

Luminex Capital — Prompt de diseño web para Claude AI

★★★★★4,6 3.197 descargas

Plataforma SaaS de gestión financiera para empresas Control total de tus flujos financieros en un solo panel.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa (HTML único) para la marca ficticia Luminex Capital siguiendo los siguientes requisitos:
- Stack: HTML + Tailwind CSS CDN (https://cdn.tailwindcss.com) + JavaScript vanilla (solo para animaciones simples). Todo en un único archivo.
- Tema visual: dark theme, fondo #0A0A0A, texto principal #E5E5E5, acentos #2563EB (azul), secundarios #4B5563 (gris), highlight #10B981 (verde). Usa tipografía Inter (Google Fonts) para todo el contenido y una fuente monoespaciada para código si es necesario.
- Header (navbar): barra superior fija, contenedor centrado, logo SVG abstracto en color #10B981, nombre de marca en Inter 2xl, menú horizontal con enlaces Home, Features, About, Pricing, Blog, Contact. Botón principal "Get Started" con fondo #2563EB, borde y efecto hover de oscurecimiento, botón secundario con borde transparente y texto #2563EB.
- Footer: fondo #111111, texto #9CA3AF, enlaces en fila, iconos de redes sociales (svg) en color #2563EB.
- Home sections (en orden):
  1. Divisor decorativo superior: línea curva SVG con trazo #2563EB.
  2. Hero: grid 2 columnas (md:grid-cols-2). Columna izquierda con título grande (text-4xl md:text-5xl) que incluye span resaltado en color #10B981, párrafo descriptivo, dos botones (Get Started primary, Contact secondary). Columna derecha con imagen del dashboard (usar placeholder https://via.placeholder.com/800x600) con borde redondeado y sombra. Añadir animación de entrada (fade‑up) usando IntersectionObserver.
  3. Divisor decorativo inferior similar al superior.
- Cada botón debe contener los cuatro SVG de forma que se dibuje un borde animado al hover, replicando el estilo del original.
- Incluir meta tags básicos y favicon genérico.
- No copiar texto del original; crear contenido original en español (España) siguiendo la estructura descrita.
- Añadir clases responsivas de Tailwind para que el diseño se ajuste a móvil, tablet y desktop.
- Incluir scripts al final del body para inicializar las animaciones de scroll.
- El HTML debe ser válido y legible, con comentarios que delimiten cada bloque como "<!-- Navbar -->", "<!-- Hero -->", etc.
Entrega el código completo listo para abrir en el navegador.

---

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

2.535 caracteres · 33 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar con logo, menú y botones Get Started
1.2 Divisor decorativo superior
1.3 Hero: título con énfasis, descripción, botones y mockup de dashboard
1.4 Divisor decorativo inferior

FEATURES

2.1 Navbar repetido
2.2 Lista de funcionalidades en tarjetas con iconos y descripciones
2.3 CTA final con botón

ABOUT

3.1 Navbar
3.2 Sección de misión y visión con imagen
3.3 Equipo en tarjetas
3.4 CTA

PRICING

4.1 Navbar
4.2 Tabla comparativa de planes con botones
4.3 Preguntas frecuentes

BLOG

5.1 Navbar
5.2 Lista de artículos en grid
5.3 Sidebar con categorías

CONTACT

6.1 Navbar
6.2 Formulario de contacto con campos básicos
6.3 Información de contacto y mapa

FOOTER

7.1 Enlaces de navegación, redes sociales y copyright

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luminex Capital
Sector: Plataforma SaaS de gestión financiera para empresas
Claim: Control total de tus flujos financieros en un solo panel

Bloques de la home

1.1 Navbar con logo, menú y botones Get Started
1.2 Divisor decorativo superior
1.3 Hero: título con énfasis, párrafo explicativo, dos botones y mockup de dashboard
1.4 Divisor decorativo inferior

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