SAAS / STARTUP · Claude Design · HTML

NebulaTask — Prompt de diseño web para Claude AI

★★★★★4,7 4.582 descargas

Plataforma de colaboración y gestión de tareas con IA Simplifica la coordinación de equipos mediante inteligencia artificial.

↓ 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 para la marca ficticia NebulaTask, una plataforma SaaS de gestión de tareas con IA. Utiliza exclusivamente HTML5, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. Reproduce la estructura y estilo del sitio de referencia: barra de navegación fija con logo SVG, enlaces (Home, Pricing, About Us, Sign Up, Blog) y botón "Request a Demo"; hero oscuro con título grande en degradado azul‑violeta, párrafo descriptivo y imagen de presentación; carrusel horizontal de logotipos de clientes (scroll automático y controles táctiles); sección de características en grid de 3 columnas, cada una con icono SVG y texto; tabla de precios con tres tarjetas con sombra, encabezado, lista de beneficios y botones; formulario de suscripción a newsletter; footer oscuro con enlaces de sección, iconos de redes sociales y datos de contacto.

Paleta de colores: 
- Fondo principal: #0A0A0A
- Texto principal: #E5E5E5
- Texto secundario: #A0A0A0
- Accento degradado: linear‑gradient(135deg, #64C2DB, #7476ED, #C994DF, #E56F8C)
- Botón primario fondo: #1F2937, hover: #374151
- Botón secundario fondo: transparent, border: #4B5563, hover: #6B7280

Tipografía: "Inter" (Google Fonts) para todo el texto, peso 400‑600.

Comportamiento interactivo:
- Menú móvil colapsable con animación lottie simple (ícono de hamburguesa → cruz).
- Scroll suave al hacer clic en anclas.
- Carrusel de logos con auto‑play cada 3 s y pausa al hover.
- Accordion en sección FAQ.
- Validación mínima del formulario (campos obligatorios).

Requisitos técnicos:
- Incluir `<meta charset="utf-8">`, viewport responsive y `<title>NebulaTask – IA para la colaboración</title>`.
- Cargar Tailwind vía CDN (`https://cdn.tailwindcss.com`). Configurar `tailwind.config = {theme:{extend:{colors:{primary:'#1F2937',secondary:'#4B5563'}}}}`.
- Incluir Google Font Inter.
- Todo el CSS debe escribirse usando clases Tailwind; evitar estilos inline excepto los necesarios para degradados.
- JavaScript al final del body para menú móvil, carrusel y validación de formularios.
- Estructura semántica con `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`.
- Comentarios claros en el código para cada bloque.

Entrega el archivo completo listo para abrir en el navegador y visualizar el diseño clonado.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación superior con logo, enlaces y botón demo
2.1 Hero con título degradado, párrafo descriptivo, imagen ilustrativa y overlay
3.1 Carrusel de logos de clientes
4.1 Bloque de características con iconos y texto
5.1 Tabla de precios con tres planes
6.1 Formulario de suscripción a newsletter
7.1 Footer con enlaces, redes sociales y datos de contacto

PRICING

1.1 Encabezado con título y descripción breve
2.1 Grid de tres tarjetas de precios, cada una con plan, precio, lista de beneficios y botón
3.1 Preguntas frecuentes en accordion
4.1 Footer reutilizado

ABOUT US

1.1 Encabezado con título y texto institucional
2.1 Equipo y valores en cards
3.1 Testimonios en slider
4.1 Footer reutilizado

BLOG

1.1 Lista de artículos en tarjetas con imagen, título y excerpt
2.1 Sidebar con categorías y suscripción
3.1 Footer reutilizado

CONTACT

1.1 Formulario de contacto con campos nombre, email, mensaje y botón
2.1 Mapa incrustado
3.1 Footer reutilizado

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaTask
Sector: Plataforma de colaboración y gestión de tareas con IA
Claim: Simplifica la coordinación de equipos mediante inteligencia artificial

Bloques de la home

1.1 Barra de navegación superior con logo, enlaces y botón demo
2.1 Hero con título degradado, párrafo descriptivo, imagen ilustrativa y overlay
3.1 Carrusel de logos de clientes
4.1 Bloque de características con iconos y texto
5.1 Tabla de precios con tres planes
6.1 Formulario de suscripción a newsletter
7.1 Footer con enlaces, 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

NebulaTask — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

PRICING

ABOUT US

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs