SAAS / STARTUP · Claude Design · HTML

NebulaSync — Prompt de diseño web para Claude AI

★★★★★4,8 4.259 descargas

Plataforma SaaS de voz generada por IA y gestión de contenidos multimedia Herramientas de voz IA para tu negocio digital.

↓ 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 **NebulaSync** (dominio nebulasync.com) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El proyecto debe reproducir el diseño visual y la estructura de la plantilla analizada, sin copiar ningún texto original. 

**Alcance**:
- Header fijo con logo, menú de navegación principal (Home, Pages con mega‑menu, Contact) y botón de carrito que muestra la cantidad de items.
- Hero a pantalla completa con fondo degradado lineal (azul #0A4DFF → cian #00E5FF) y texto central (título grande, subtítulo y botón CTA). Utiliza tipografía **Inter** (peso 400/600) para cuerpo y **Poppins** (peso 700) para títulos.
- Sección de características: 3 columnas, cada una con ícono cuadrado con fondo #F0F4FF, título y breve descripción.
- Grid de productos: tarjetas con sombra ligera, imagen placeholder, nombre, breve descripción y botón "Añadir al carrito". Botón con fondo #0A4DFF y efecto hover #0066FF.
- Testimonios: carrusel simple (auto‑slide cada 5 s) con foto circular, nombre, cargo y comentario. Fondo gris claro #FAFAFA.
- CTA final: barra con fondo #0A4DFF, texto invitando a suscribirse y formulario de email inline (input con borde #CCCCCC, botón azul).
- Footer: fondo #1A1A1A, columnas de enlaces (Empresa, Producto, Legal) y zona de newsletter (input + botón). Incluye iconos de redes sociales en blanco.

**Paleta de colores**:
- Primario: #0A4DFF
- Secundario: #00E5FF
- Fondo claro: #F5F9FF
- Fondo oscuro: #1A1A1A
- Texto primario: #222222
- Texto claro: #FFFFFF

**Tipografía**:
- Headings: Poppins, weight 700, tracking -0.5px
- Body: Inter, weight 400, line‑height 1.6

**Componentes interactivos**:
- Menú mega‑dropdown (hover o click) con transición opacity 200ms.
- Carrito modal que se abre al hacer click en el icono, muestra lista de items (uso de JSON estático para ejemplo).
- Carrusel de testimonios con botones prev/next.
- Botones con animación scale 1.05 en hover.

**Requisitos técnicos**:
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` y configurar `tailwind.config = { theme: { extend: { colors: { primary: '#0A4DFF', secondary: '#00E5FF' } } } }`.
- Usar `flex`, `grid` y utilidades responsivas de Tailwind para que el sitio sea totalmente adaptable (mobile‑first). 
- Todo el CSS debe provenir de Tailwind; evitar estilos personalizados fuera de la configuración.
- JavaScript en bloque `<script>` al final del body: manejo de dropdown, apertura/cierre del carrito modal, lógica del carrusel y envío ficticio del formulario de newsletter (preventDefault + console.log).
- Añadir comentarios HTML que describan cada sección para facilitar la comprensión del diseñador.

Entrega el código completo listo para copiar‑pegar en un archivo `index.html` que reproduzca fielmente la estética y la experiencia de usuario descritas.

---

## 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.206 caracteres · 54 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 de carrito
1.2 Hero con fondo lineal y texto destacado
1.3 Sección de características en tres columnas con íconos
1.4 Grid de productos destacados con tarjetas interactuas
1.5 Testimonios rotativos en carrusel simple
1.6 Llamada a la acción final con formulario de suscripción
1.7 Footer con enlaces de navegación, redes sociales y datos de contacto

ABOUT US

2.1 Header idéntico al home
2.2 Hero con imagen de fondo y texto institucional
2.3 Texto descriptivo con imagen al lado
2.4 Equipo en cards de 3 columnas
2.5 Valores y misión en bloques horizontales
2.6 Footer estándar

PRICING

3.1 Header
3.2 Hero con título y descripción breve
3.3 Tabla comparativa de planes (3 columnas)
3.4 Preguntas frecuentes en acordeón
3.5 Footer

BLOG

4.1 Header
4.2 Lista de artículos en grid de 2 columnas
4.3 Sidebar con categorías y últimos posts
4.4 Footer

CONTACT

5.1 Header
5.2 Hero con formulario de contacto (nombre, email, mensaje)
5.3 Mapa estático de ubicación
5.4 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaSync
Sector: Plataforma SaaS de voz generada por IA y gestión de contenidos multimedia
Claim: Herramientas de voz IA para tu negocio digital

Bloques de la home

1.1 Header con logo, menú principal y botón de carrito
1.2 Hero con fondo lineal y texto destacado
1.3 Sección de características en tres columnas con íconos
1.4 Grid de productos destacados con tarjetas interactuas
1.5 Testimonios rotativos en carrusel simple
1.6 Llamada a la acción final con formulario de suscripción
1.7 Footer con enlaces de navegación, redes sociales y datos de contacto

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

NebulaSync — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

PRICING

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs