EDUCACIÓN · Claude Design · HTML

NebulaPulse — Prompt de diseño web para Claude AI

★★★★★4,6 4.225 descargas

Plataforma SaaS para aplicaciones de mensajería y colaboración Herramientas de charla para equipos modernos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático en un único archivo HTML que replique el diseño visual y la estructura de una página de inicio SaaS de mensajería, sin copiar ningún texto original. Usa la marca ficticia "NebulaPulse". Tecnologías: HTML5, Tailwind CSS vía CDN, JavaScript vanilla (solo para el menú hamburguesa y animaciones simples). 

Paleta de colores: fondo principal #0A0A0A, textos #FFFFFF, acento primario #00E5FF, acento secundario #FF3CAC, gris de soporte #4A4A4A. 
Tipografía: "Inter" para títulos (font‑weight 700) y "Roboto" para cuerpo (font‑weight 400), importados de Google Fonts.

HEADER: barra fija con logo a la izquierda, menú centrado con enlaces Home, Demo, Inner Page, Utility, Authentications, y botón CTA "Comprar plantilla" con estilo linear gradient (#00E5FF → #FF3CAC). Menú colapsable en móvil con icono hamburguesa animado.

HOME SECTION: 
1. Hero grande, centrado, con título "Plataforma de charla avanzada" (h1, 4xl, color blanco), párrafo descriptivo (lg, gris #CCCCCC). Dos botones CTA: "Comprar plantilla" (estilo linear) y "Más plantillas" (estilo oscuro). 
2. Área de imágenes a la derecha: contenedor flex con dos imágenes superpuestas, bordes redondeados, sombras suaves.

FOOTER: fondo #111111, columnas con enlaces (Home, Demo, ...), información de contacto (email hola@nebulapulse.com), y redes sociales como iconos SVG simples.

INTERACTIVIDAD: menú hamburguesa que alterna la visibilidad del menú en móvil, botones con efecto hover de desplazamiento de ícono (dos versiones del mismo SVG, uno desplazado). Animaciones de aparición de textos en hero usando CSS @keyframes y clases de Tailwind (opacity‑0 → opacity‑100, translate-y).

Requisitos técnicos: incluir Tailwind CDN `<script src="https://cdn.tailwindcss.com"></script>` y Google Fonts links, estructurar HTML con secciones semánticas (`<header>`, `<section id="home">`, `<footer>`). Mantener todo el CSS en línea mediante clases de Tailwind, y el JS al final del body dentro de `<script>` sin dependencias externas.

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.415 caracteres · 35 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú principal y botón "Comprar plantilla"
1.2 Hero: título grande, párrafo descriptivo, botones "Comprar plantilla" y "Más plantillas"
1.3 Galería de imágenes heroicas en columnas superpuestas
1.4 Footer: enlaces de navegación, información de derechos y redes sociales