SAAS / STARTUP · Claude Design · HTML

NebulaPulse — Prompt de diseño web para Claude AI

★★★★★4,8 3.941 descargas

Plataforma SaaS para gestión de proyectos colaborativos Herramientas que simplifican el trabajo en equipo.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "NebulaPulse" (dominio nebulapulse.com) siguiendo los patrones de UI del HTML proporcionado. Utiliza exclusivamente HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. 

**Paleta de colores**: 
- Primario: #3B82F6 (azul vibrante) 
- Secundario: #10B981 (verde lima) 
- Texto principal: #111827 (gris casi negro) 
- Texto secundario: #6B7280 (gris medio) 
- Fondo: #F9FAFB (gris muy claro) 
- Accent: #F59E0B (ámbar) 

**Tipografía**: 
- Fuente principal: Inter (Google Fonts) 
- Fuente secundaria: Roboto Mono para códigos o destacados 

**Estructura**:
1. **Header** (sticky, shadow) con logo a la izquierda, menú centrado (Home, About, Pricing, Blog, Contact), botón primario "Get started" a la derecha y carrito modal con contador. El menú debe colapsar en móvil a hamburguesa.
2. **Hero**: sección full‑width, fondo suave con ilustración abstracta, título grande (font‑weight 800, text‑4xl md:text-6xl), subtítulo descriptivo, dos botones (primary y secondary) alineados horizontalmente.
3. **Características**: grid de 3 columnas (md:grid-cols-3) con icono SVG, título y párrafo breve. Cada tarjeta tiene hover con sombra y escala ligera.
4. **Integraciones**: barra horizontal de logotipos de terceros (max‑width 6rem cada uno) centrados, con efecto gris‑a‑color al pasar el cursor.
5. **Precios**: tarjetas de planes (Basic, Pro, Enterprise) en flex wrap, borde 2px, encabezado con color primario, lista de features con tick icon, botón CTA dentro de cada tarjeta. La tarjeta del plan destacado usa background primario leve y texto blanco.
6. **Testimonios**: carrusel simple usando CSS scroll‑snap (no librerías) con cards de cita, foto redonda, nombre y cargo.
7. **CTA final**: sección con fondo primario, texto centrado blanco y botón secundario.
8. **Footer**: fondo gris oscuro, cuatro columnas (Producto, Empresa, Recursos, Suscripción). Incluye formulario de newsletter (input email + botón), íconos de redes sociales (svg), y textos de copyright.

**Interactividad**:
- Menú hamburguesa abre cierre con transición.
- Botón del carrito abre modal con detalle de items (estructura dummy). 
- Carrusel de testimonios se desplaza con flechas y scroll‑snap.
- Formularios con validación HTML5 básica.
- Animaciones suaves (fade‑in, slide‑up) usando Tailwind utilities (animate-enter, transition).

**Requisitos técnicos**:
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio y configurar colores personalizados via `tailwind.config` inline.
- Importar fuentes Inter y Roboto Mono mediante `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">`.
- Todo el código en un único archivo `index.html` que pueda abrirse localmente sin dependencias externas aparte de los CDNs indicados.
- Utilizar datos ficticios para textos, imágenes (placeholder via https://via.placeholder.com) y logotipos.
- Mantener la semántica adecuada (header, nav, main, section, footer) y accesibilidad (aria‑labels, alt en imágenes).

Entrega el código completo listo para copiar‑pegar.

---

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

3.495 caracteres · 56 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, navegación, botón "Get started" y carrito modal
2.1 Hero: título grande, descripción, botones primary y secondary, imagen decorativa
3.1 Sección de características: grid 3 columnas, icono + título + texto
4.1 Integraciones: logos de partners en fila horizontal
5.1 Precios: tarjetas de plan (Basic, Pro, Enterprise) con lista de features
6.1 Testimonios: carrusel de citas con foto, nombre y cargo
7.1 CTA final: fondo contrastante, mensaje breve y botón
8.1 Footer: columnas de enlaces, redes sociales, formulario suscripción

ABOUT

1.1 Header idéntico al Home
2.1 Hero interno con título y párrafo descriptivo
3.1 Misión y visión en bloques de texto con iconos
4.1 Equipo: tarjetas con foto, nombre y rol
5.1 CTA y footer comunes

PRICING

1.1 Header
2.1 Tabla de precios comparativa con tres columnas
3.1 FAQ acordeón
4.1 CTA y footer

BLOG

1.1 Header
2.1 Lista de artículos en grid 2 columnas con imagen, título, excerpt y botón leer más
3.1 Paginación
4.1 Footer

CONTACT

1.1 Header
2.1 Formulario de contacto (nombre, email, mensaje, botón enviar)
3.1 Información de contacto y mapa embed
4.1 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaPulse
Sector: Plataforma SaaS para gestión de proyectos colaborativos
Claim: Herramientas que simplifican el trabajo en equipo

Bloques de la home

1.1 Header con logo, menú principal, botón primario y carrito; 2.1 Hero con título, subtítulo, botones y visual decorativo; 3.1 Bloque de características en grid de 3 columnas; 4.1 Integraciones mostradas como logos; 5.1 Tabla comparativa de planes de precios; 6.1 Testimonios en carrusel; 7.1 Llamada a la acción final; 8.1 Footer con links, redes y formulario de newsletter

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

NebulaPulse — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PRICING

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs