SAAS / STARTUP · Claude Design · HTML

NebulaSync — Prompt de diseño web para Claude AI

★★★★★4,6 3.177 descargas

Plataforma SaaS de automatización e IA para empresas Herramientas de IA que simplifican tu día a día.

↓ 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** (plataforma SaaS de automatización e IA) usando **HTML** + **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El diseño debe replicar la estructura y estética del sitio fuente sin copiar ningún texto literal.

---
### Paleta de colores (extraída del original)
- Primario: #0EA5E9 (azul cian)
- Secundario: #1E3A8A (azul oscuro)
- Texto principal: #0F172A (gris casi negro)
- Texto secundario: #64748B (gris medio)
- Fondo claro: #F9FAFB (gris muy claro)
- Fondo oscuro: #111827 (gris casi negro)

---
### Tipografía
- Fuente principal: **Inter** (Google Fonts), peso 400‑700
- Fuente de encabezados: **Inter** bold, con estilos de tracking y leading como en el original.

---
### Componentes UI a recrear
1. **Header**
   - Logo a la izquierda (usa un placeholder SVG).
   - Menú de navegación horizontal con enlaces: Home, About, Features, Contact.
   - Botón destacado “Get Started” a la derecha.
   - Menú hamburguesa para móviles que abre un panel lateral.
2. **Hero section**
   - Contenedor central con título grande, texto descriptivo y dos botones CTA (primario y secundario).
   - Rating con 5 estrellas y texto "4.9/5 based on 128 reviews".
   - Imagen ilustrativa a la derecha (placeholder SVG). Animaciones de entrada suave (fade‑up) usando CSS (Tailwind utilities). 
3. **Logos de clientes**
   - Grid de 8‑12 logos (placeholder SVG) en filas responsivas.
4. **Features section**
   - Subtítulo pequeño, título con énfasis en una palabra.
   - Texto resumen.
   - Tarjetas de característica (3‑4 columnas en desktop, 1‑2 en móvil) con icono, título y descripción corta.
5. **Footer**
   - Fondo oscuro, columnas de enlaces (Producto, Empresa, Recursos) y datos de contacto.
   - Íconos de redes sociales (placeholder).
   - Texto de copyright.

---
### Requisitos técnicos
- Utiliza **Tailwind CDN** (`<script src="https://cdn.tailwindcss.com"></script>`) y configura los colores personalizados en la etiqueta `<script>` de Tailwind.
- Todas las interacciones (menú móvil, acordeón, animaciones on‑scroll) deben implementarse con **JavaScript vanilla** y observarse con `IntersectionObserver` para los efectos de aparición.
- El HTML debe ser semántico (`<header>`, `<nav>`, `<section>`, `<footer>`).
- Incluir meta tags básicos (charset, viewport, descripción genérica).
- No usar ninguna librería externa aparte de Tailwind y los fonts de Google.
- El archivo debe ser autocontenido: incluye los estilos inline de Tailwind config y el script al final del body.

---
### Entrega
Devuelve el código completo listo para guardar como `index.html`. El sitio debe ser totalmente responsivo y reproducir la jerarquía de bloques, colores y tipografía descritos, manteniendo la sensación moderna y orientada a la conversión del diseño original.

---

## 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.176 caracteres · 67 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y menú responsive
1.2 Hero: título destacado, texto introductorio, botones “Comenzar gratis” y “Ver demo”, rating con estrellas y reseñas
1.3 Logos de clientes en carrusel estático
1.4 Características: subtítulo, título con énfasis, párrafo descriptivo, tarjetas de feature (icono, título, descripción)
1.5 Footer: columnas de enlaces (Producto, Empresa, Recursos), redes sociales y datos de contacto

ABOUT

2.1 Header (reutilizable)
2.2 Hero interno con título y texto descriptivo
2.3 Equipo y valores
2.4 Call to action

CONTACT

3.1 Header
3.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
3.3 Información de soporte y mapa

FEATURES

4.1 Header
4.2 Lista de características detalladas (imagen + texto) en layout alternado
4.3 CTA final de registro

FAQ

5.1 Header
5.2 Preguntas frecuentes en acordeón
5.3 CTA secundario

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaSync
Sector: Plataforma SaaS de automatización e IA para empresas
Claim: Herramientas de IA que simplifican tu día a día

Bloques de la home

1.1 Header con logo y navegación principal, 1.2 Hero con título, subtítulo, dos botones CTA y rating, 1.3 Bloque de logos de clientes, 1.4 Sección de características con subtítulo, título, descripción y tarjetas de feature, 1.5 Footer con enlaces 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

CONTACT

FEATURES

FAQ

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs