SAAS / STARTUP · Claude Design · HTML

NebulaSoft — Prompt de diseño web para Claude AI

★★★★★4,7 1.641 descargas

Plataforma SaaS para gestión de proyectos y colaboración Herramientas que simplifican tu flujo de trabajo.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Diseña una página web completa para la marca ficticia NebulaSoft, una plataforma SaaS de gestión de proyectos. Utiliza solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y estilo del sitio analizado: 

- **Paleta de colores**: #0D0D0D (fondo principal), #FFFFFF (texto), #1E40AF (accent azul), #F3F4F6 (gris claro de secciones), #E5E7EB (bordes). 
- **Tipografía**: Inter (sans‑serif) para cuerpo y headings, peso 400‑700. 
- **Header**: barra fija con logo a la izquierda, menú central con enlaces Home, Pages (dropdown con Main Pages, Inner Pages, Utility pages), About, Features, Pricing; a la derecha botón de carrito con icono y contador. Responsive: colapsa a hamburguesa en móvil. 
- **Hero**: contenedor centrado, título grande, subtítulo, botón principal (bg‑blue‑800, hover:bg‑blue‑900, texto blanco) y una ilustración a la derecha. 
- **Bloques de la home**: 
  1. Características destacadas: grid 3‑col, tarjetas con icono, título y breve descripción, borde sutil. 
  2. Galería de screenshots: carrusel simple (JS) con flechas laterales. 
  3. Testimonios: cards con foto circular, nombre, cargo y cita, fondo gris claro. 
  4. CTA de suscripción: fondo azul, texto blanco, botón grande. 
- **Footer**: fondo #0D0D0D, columnas con enlaces (Product, Company, Resources, Legal) y sección inferior con redes sociales y contacto (email: hola@nebulasoft.com). 
- **Interactividad**: dropdown del menú, carrito modal que muestra items ficticios, carrusel de screenshots y testimonios, acordeón en FAQ (en página Pricing). Todos los componentes deben ser accesibles (ARIA) y responsivos. 
- **Requisitos técnicos**: incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio, habilitar `tailwind.config` inline para colores personalizados; usar `data-` attributes para control de estado del carrito y del dropdown; no usar frameworks externos. Genera el código completo listo para copiar y 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>
```

2.314 caracteres · 31 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menú principal, dropdown de páginas y botón de carrito
1.2 Hero principal con título, subtítulo, botón principal y visual complementario
1.3 Sección de características destacadas en tarjetas con iconos
1.4 Área de integración de productos / galería de screenshots
1.5 Testimonios en carrusel simple
1.6 Llamada a la acción de suscripción
1.7 Footer con enlaces de navegación, redes y datos de contacto

ABOUT

2.1 Encabezado interno con breadcrumb
2.2 Historia de la empresa en dos columnas
2.3 Valores y misión en bloques con iconos
2.4 Equipo con tarjetas y fotos
2.5 CTA de contacto

FEATURES

3.1 Lista de funcionalidades en grid de tarjetas
3.2 Detalle de cada función con ilustración
3.3 Comparativa de planes
3.4 CTA de prueba gratuita

PRICING

4.1 Tabla comparativa de precios
4.2 Beneficios por plan en listado
4.3 Preguntas frecuentes en acordeón
4.4 CTA de compra

BLOG

5.1 Lista de artículos en tarjetas con imagen y extracto
5.2 Sidebar con categorías y búsqueda
5.3 Paginación
5.4 Footer común

CONTACT

6.1 Formulario de contacto en dos columnas
6.2 Información de localización y redes
6.3 Mapa embebido
6.4 Footer común

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaSoft
Sector: Plataforma SaaS para gestión de proyectos y colaboración
Claim: Herramientas que simplifican tu flujo de trabajo

Bloques de la home

1.1 Barra de navegación fija con logo, menú principal, dropdown de páginas y botón de carrito
1.2 Hero principal con título, subtítulo, botón principal y visual complementario
1.3 Sección de características destacadas en tarjetas con iconos
1.4 Área de integración de productos / galería de screenshots
1.5 Testimonios en carrusel simple
1.6 Llamada a la acción de suscripción
1.7 Footer con enlaces de navegación, redes 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