SAAS / STARTUP · Claude Design · HTML

NimboTech — Prompt de diseño web para Claude AI

★★★★★4,6 4.296 descargas

Plataforma SaaS para gestión de operaciones empresariales Herramientas intuitivas para optimizar tu negocio.

↓ 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 NimboTech, una plataforma SaaS que ayuda a empresas a optimizar sus operaciones. Utiliza únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emula la estructura y los patrones visuales del sitio analizado sin copiar texto ni imágenes originales.

**Paleta de colores**
- Primary: #0A2240 (rich navy)
- Secondary: #1E3A8A (deep blue)
- Accent: #3B82F6 (blue‑500)
- Light: #F9FAFB (gray‑50)
- Gray: #6B7280 (gray‑500)

**Tipografía**
- Font family: "Inter", sans‑serif (cargar desde Google Fonts)
- Headings: font‑weight 700, tracking normal
- Body: font‑weight 400, leading‑relaxed

**Header**
- Barra superior fija con mensaje promocional y fondo primary, texto blanco.
- Navbar sticky con logo a la izquierda, menú multi‑nivel (Home, Pages, Pricing, Blog, Contact) con íconos de flecha, botones "Contact us" y "Our plans" a la derecha.
- Botón hamburguesa para móvil que despliega overlay con los mismos enlaces.

**Hero**
- Sección full‑width, fondo con gradiente primary→secondary, texto centrado: título grande (h1) "Herramientas intuitivas para optimizar tu negocio", subtítulo (p) descriptivo, botón principal "Empieza ahora" (style primary) y secundario "Ver planes" (outline). Incluye ilustración decorativa (SVG genérico) a la derecha.

**Bloques subsecuentes**
1. Valor añadido: fila de 4 iconos circulares con texto corto bajo cada uno.
2. Características: grid de 3 columnas, tarjeta con icono, título (h3) y párrafo.
3. Demo: contenedor con vídeo placeholder (iframe de YouTube) y descripción breve.
4. Testimonios: carrusel sencillo con 3 slides, cada una foto circular, nombre, cargo y comentario.
5. Precios: tabla comparativa de 3 planes (Basic, Pro, Enterprise) con lista de beneficios y botón "Seleccionar".
6. CTA final: sección con fondo accent, formulario de captura (email) y botón "Solicita una demo".

**Footer**
- Fondo dark (#0A2240), columnas: Navegación principal, Recursos, Contacto, Suscripción al newsletter. Texto blanco y enlaces en hover accent. Íconos de redes sociales (Facebook, LinkedIn, X, Instagram) en estilo line art.

**Interactividad**
- Menú dropdown y móvil con transiciones de opacity y height.
- Carrusel de testimonios con autoplay y controles.
- Animaciones suaves al hacer scroll (fade‑in) usando IntersectionObserver.
- Validación básica del formulario de captura.

**Requisitos técnicos**
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">`.
- Añadir `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados con `tailwind.config = {theme:{extend:{colors:{primary:'#0A2240',secondary:'#1E3A8A',accent:'#3B82F6'}}}}`.
- Todo el HTML debe estar semánticamente estructurado con `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`.
- Utilizar clases Tailwind para espaciado, tipografía y colores. No usar clases personalizadas externas.
- El JavaScript debe estar al final del body, sin dependencias externas.
- Asegurar que el sitio sea completamente responsive (mobile‑first).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con aviso promocional
1.2 Cabecera con logo, menú multi‑nivel y botones de acción
1.3 Hero con titular, subtítulo y CTA principal
1.4 Sección de valor añadido (iconos + texto)
1.5 Cuadrícula de características (3 columnas)
1.6 Área de demo/video
1.7 Testimonios en carrusel
1.8 Tabla de precios comparativa
1.9 CTA final con captura de leads
1.10 Footer con navegación, contacto y redes

ABOUT

2.1 Hero interno con título y descripción
2.2 Historia de la empresa en texto + imagen
2.3 Equipo en tarjetas con foto y rol
2.4 Valores y misión en lista con iconos
2.5 CTA a contacto

FEATURES

3.1 Hero de funcionalidades
3.2 Lista de features en tarjetas con ilustraciones
3.3 Caso de uso destacado con video
3.4 Preguntas frecuentes en acordeón
3.5 CTA a prueba gratuita

PRICING

4.1 Hero de precios
4.2 Tabla comparativa de 3 planes
4.3 Lista de beneficios por plan
4.4 FAQ de precios
4.5 CTA de suscripción

CONTACT

5.1 Hero de contacto
5.2 Formulario de contacto (nombre, email, mensaje)
5.3 Información de contacto y mapa integrado
5.4 Enlaces a redes sociales
5.5 CTA de descarga de brochure

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NimboTech
Sector: Plataforma SaaS para gestión de operaciones empresariales
Claim: Herramientas intuitivas para optimizar tu negocio

Bloques de la home

1.1 Barra superior con aviso promocional
1.2 Cabecera con logo, menú desplegable multi‑nivel y botones de acción
1.3 Hero con título grande, subtítulo, llamado a la acción y fondo ilustrado
1.4 sección de valor añadido con iconos y textos breves
1.5 Bloque de características en cuadrícula de tres columnas
1.6 Área de demo o video explicativo
1.7 Testimonios de clientes en carrusel sencillo
1.8 Tabla comparativa de planes de precios
1.9 Llamado a la acción final con formulario de captura
1.10 Footer con enlaces, datos de contacto y redes sociales

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

NimboTech — 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