TECNOLOGÍA · Claude Design · HTML

NebulaSoft — Prompt de diseño web para Claude AI

★★★★★4,9 929 descargas

Plataforma SaaS de gestión de proyectos y colaboración corporativa Herramientas que simplifican la coordinación del 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 NebulaSoft, una plataforma SaaS de gestión de proyectos. Utiliza HTML sencillo, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo.

---
**Paleta de colores**
- Primary: #0D47A1 (azul oscuro)
- Accent: #1976D2 (azul brillante)
- Background: #F5F7FA (gris muy claro)
- Text: #212121 (gris casi negro)
- Highlight: #FFB300 (ámbar)

**Tipografía**
- Font family: 'Inter', sans‑serif para todo el sitio.
- Títulos: peso 700, tamaños 4xl‑2xl según sección.
- Texto corriente: peso 400, tamaño base 1rem.

**Estructura**
1. **Barra informativa superior** (fixed top, h‑12, bg‑primary, texto blanco, icono informativo a la izquierda, mensaje de anuncio y enlace “Leer más”).
2. **Header principal** con logo a la izquierda, menú de navegación centrado con mega‑dropdowns (Home, Pricing, Blog, Pages) que despliegan tarjetas con imagen, título y breve descripción; enlaces de login y botón “Sign Up” a la derecha. Fondo blanco, sombra ligera.
3. **Hero** (full‑width, min‑h‑screen, bg‑accent, texto blanco) con título grande, subtítulo y dos botones: primaria (bg‑primary) y secundaria (border‑white).
4. **Sección de características** en grid de 3 columnas, tarjetas con sombra, icono SVG, título y párrafo corto. Fondo blanco.
5. **Planes de precios** tabla comparativa de 3 columnas, tarjetas con borde rounded, encabezado con nombre del plan, precio grande, lista de beneficios, botón “Select”. Fondo #F5F7FA.
6. **Testimonios** carrusel simple (JS) con tarjetas que muestran foto circular, nombre, cargo y cita. Fondo blanco.
7. **Call to Action final** con fondo primario, título, formulario breve (email) y botón “Start now”.
8. **Footer** con 4 columnas: Navegación principal, Recursos, Empresa, Contacto. Texto gris oscuro, enlaces en hover azul. Incluye iconos de redes sociales (svg) y datos de contacto.

**Requisitos técnicos**
- Usa Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configura colores personalizados vía `tailwind.config = { theme: { extend: { colors: { primary: '#0D47A1', accent: '#1976D2', highlight: '#FFB300' } } }}`.
- Todas las interacciones (mega‑dropdown, carrusel, botón de abrir carrito simulado) deben implementarse con JavaScript puro sin dependencias externas.
- Mantén el HTML semántico (header, nav, main, section, footer).
- Asegura responsividad: menú colapsa en móvil a ícono hamburguesa, hero y tablas se adaptan a pantalla pequeña.
- Incluye meta tags básicos (charset, viewport, title, description) y favicon ficticio.
- No copiar texto del sitio original; generar contenidos originales en español.

Entrega el código completo listo para guardarse como `index.html`.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra informativa con anuncio y enlace
1.2 Header principal con logo, menú mega‑dropdown, enlace de login y botón de registro
2.1 Hero con título, subtítulo y botones de acción
3.1 Sección de características resaltadas en tarjetas con iconos
4.1 Tabla comparativa de planes de precios
5.1 Bloque de testimonios en carrusel
6.1 Llamada a la acción final con formulario breve
7.1 Footer con enlaces de navegación, redes sociales y datos de contacto

FEATURES

1.1 Encabezado de página con título y descripción breve
1.2 Lista de características en rejilla de tres columnas
1.3 Ilustraciones o iconos decorativos

PRICING

1.1 Tabla de planes con nombre, precio mensual, lista de beneficios y botón de selección
1.2 Comparación de características entre planes

BLOG

1.1 Lista de artículos con miniatura, título, extracto y fecha
1.2 Paginación inferior

ABOUT

1.1 Sección de misión y visión con imagen a la izquierda
1.2 Equipo destacado en tarjetas

CONTACT

1.1 Formulario de contacto con campos nombre, email, mensaje y botón enviar
1.2 Mapa incrustado y datos de sede

LOGIN

1.1 Formulario de acceso con email y contraseña
1.2 Enlace a recuperación de contraseña

SIGN‑UP

1.1 Registro con nombre, email, contraseña y botón crear cuenta

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaSoft
Sector: Plataforma SaaS de gestión de proyectos y colaboración corporativa
Claim: Herramientas que simplifican la coordinación del equipo

Bloques de la home

1.1 Barra informativa con anuncio y enlace
1.2 Header principal con logo, menú mega‑dropdown, enlace de login y botón de registro
2.1 Hero con título, subtítulo y botones de acción
3.1 Sección de características resaltadas en tarjetas con iconos
4.1 Tabla comparativa de planes de precios
5.1 Bloque de testimonios en carrusel
6.1 Llamada a la acción final con formulario breve
7.1 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