SAAS / STARTUP · Claude Design · HTML

NebulaSoft — Prompt de diseño web para Claude AI

★★★★★4,7 1.062 descargas

Software como Servicio (SaaS) para gestión empresarial Herramientas que simplifican la gestión diaria.

↓ 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 que reproduzca el diseño y la estructura de la página descrita, bajo la marca ficticia NebulaSoft. Utiliza únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. 

**Paleta de colores**: 
- Primary: #1E3A8A (azul marino) 
- Secondary: #3B82F6 (azul brillante) 
- Accent: #10B981 (verde esmeralda) 
- Background: #F9FAFB (gris muy claro) 
- Text primary: #111827 (gris casi negro) 
- Text secondary: #6B7280 (gris medio)

**Tipografía**: 
- Fuente principal: Inter (Google Fonts) – peso 400, 500, 700. 
- Fuente secundaria para encabezados: Poppins, peso 600.

**Header**: barra superior oculta en móvil con anuncio de "Ahorra 25% en planes anuales (tiempo limitado)". Header fijo con logo (NebulaSoft), menú de navegación horizontal con dropdowns (Home, Pages, Pricing, Blog, Contact). Botón CTA "Contáctanos" y número telefónico al lado. Menú responsive con icono hamburguesa.

**Hero**: sección a pantalla completa, fondo blanco, texto grande centrado: "SOLUCIONES SAAS Y STARTUP" repetido como efecto marquee sutil. Subtítulo descriptivo y dos botones: "Contáctanos" (estilo sólido) y "Nuestros planes" (borde). Imagen a la derecha (placeholder).

**Bloque de características**: 3 columnas, cada una con ícono SVG, título y breve descripción.

**Métricas**: 4 contadores horizontales con números grandes (p.ej. 10K+ usuarios, 99% uptime, 1M+ transacciones, 4.9 rating) y texto explicativo.

**Testimonios**: carrusel simple (auto‑slide cada 5 s) con tarjetas que incluyen foto circular, nombre, cargo y cita.

**Planes tarifarios**: 3 tarjetas alineadas, cada una con título, precio (ej. "Plan Básico", "Plan Pro", "Plan Enterprise"), lista de características y botón "Seleccionar". Tarjeta central resaltada con fondo accent y texto blanco.

**CTA final**: sección con fondo secondary, título invitando a probar y formulario de email simple + botón "Empezar ahora".

**Footer**: fondo rich‑navy (#1E3A8A), columnas con enlaces (Empresa, Producto, Recursos, Legal), información de contacto (teléfono, email), íconos sociales (Facebook, LinkedIn, X, Instagram) y copyright.

**Interactividad**: 
- Dropdowns del menú que aparecen al hover (en escritorio) y al click (en móvil). 
- Botón de hamburguesa que abre/ciorre el menú lateral. 
- Contadores animados al entrar en viewport. 
- Carrusel de testimonios con transición fade.
- Smooth scroll para anclas internas.

**Requisitos técnicos**: 
- HTML5 semantic (header, nav, main, section, footer). 
- Tailwind CDN incluido en <head>. 
- Script al final del body para manejar dropdowns, contador y carrusel sin dependencias externas. 
- Todo el código debe estar en un único archivo index.html, listo para servir.

Genera el código completo siguiendo estas especificaciones.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con anuncio promocional
1.2 Header con logo, menú principal con dropdowns, botón de contacto y número telefónico
1.3 Hero principal con mensaje destacado y botones CTA
1.4 Sección de características resaltadas en columnas
1.5 Bloque de métricas con contadores
1.6 Área de testimonios en carrusel sencillo
1.7 Comparativa de planes tarifarios en tarjetas
1.8 Llamada a la acción final con formulario breve
1.9 Footer con enlaces, redes sociales y datos de contacto

ABOUT

2.1 Banner interno con título
2.2 Texto descriptivo de la empresa y misión
2.3 Imagen ilustrativa
2.4 Equipo destacado en tarjetas
2.5 Valores en iconos
2.6 CTA para contactar

FEATURES

3.1 Lista de funcionalidades con iconos
3.2 Imagen o vídeo explicativo
3.3 Beneficios en bloques de texto
3.4 CTA a prueba gratuita

PRICING

4.1 Tabla comparativa de planes
4.2 Detalle de precios y características
4.3 Botón de suscripción por plan
4.4 Preguntas frecuentes

CONTACT

5.1 Formulario de contacto simple
5.2 Mapa de ubicación (placeholder)
5.3 Información de teléfono y email
5.4 Enlaces a redes sociales

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaSoft
Sector: Software como Servicio (SaaS) para gestión empresarial
Claim: Herramientas que simplifican la gestión diaria

Bloques de la home

1.1 Barra superior con anuncio promocional
1.2 Header con logo, menú principal con dropdowns, botón de contacto y número telefónico
1.3 Hero principal con mensaje destacado y botones CTA
1.4 Sección de características resaltadas en columnas
1.5 Bloque de métricas con contadores
1.6 Área de testimonios en carrusel sencillo
1.7 Comparativa de planes tarifarios en tarjetas
1.8 Llamada a la acción final con formulario breve
1.9 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

NebulaSoft — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

FEATURES

PRICING

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs