SAAS / STARTUP · Claude Design · HTML

Nexora Labs — Prompt de diseño web para Claude AI

★★★★★4,6 1.504 descargas

Plataforma SaaS de automatización de marketing e IA para pymes Herramientas integradas para impulsar 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 **Nexora Labs**, una plataforma SaaS de automatización de marketing con IA. Utiliza **HTML** estático, **Tailwind CSS** vía CDN y **JavaScript vanilla** en un único archivo. Sigue fielmente la estructura y estilo del sitio original (cabecera con menú dropdown, hero con texto dinámico, cards de productos, sección de partners con contadores y logos), pero con contenido totalmente nuevo en español (España) y la paleta y tipografías descritas a continuación.

---
### Paleta de colores
- Primario: #0D47A1 (azul oscuro)
- Secundario: #1976D2 (azul medio)
- Accent: #FFB300 (ámbar)
- Fondo claro: #F5F7FA
- Texto oscuro: #212529

### Tipografía
- Fuente principal: **Inter** (Google Fonts) – peso 400/600/700
- Fuente secundaria (títulos): **Playfair Display** – peso 700

---
### Header
- Logo a la izquierda (SVG placeholder).
- Menú principal con enlaces: **Producto**, **Recursos**, **Precios**, **Empresa**. Los dos primeros tienen dropdowns con 4‑5 enlaces cada uno.
- Botón CTA a la derecha: "Book a demo" con estilo relleno primario.
- Menú responsive con ícono hamburguesa que muestra/oculta la navegación.

---
### Home – Secciones
1. **Hero**
   - Caption con icono y texto "Todo en un ecosistema para tu negocio".
   - Título grande: "La plataforma que" + palabras rotativas ("Potencia", "Escala", "Gestiona", "Automatiza").
   - Subtítulo descriptivo.
   - Botón principal: "Get started free" estilo primario.
   - Cuatro cards horizontales bajo el hero que presentan módulos: **Nexora CRM**, **Nexora Ops**, **Nexora Docs**, **AI Writing Tool**. Cada card incluye icono SVG, nombre y breve descripción.
2. **Partners**
   - Texto "Trusted by" y contador "600+ Brands".
   - Rating con 5 estrellas y texto "4.8/5 Average user rating".
   - Cuadrícula de 12 logos de marcas (usar placeholders SVG).
   - Fondo con sutiles líneas decorativas (borders) en tonos gris claro.
3. **Características** (no en el fragmento pero implícita en otras páginas): sección de 3 columnas con icono, título y párrafo.
4. **Testimonios** (opcional): slider de citas.
5. **CTA final** con fondo acentuado y botón "Book a demo".

---
### Footer
- Tres columnas: Navegación secundaria, Información legal, Suscripción al boletín.
- Íconos de redes sociales (Twitter, LinkedIn, Instagram).
- Texto de copyright con año dinámico.

---
### Interactividad
- Dropdowns y menú móvil con toggles de Tailwind + JS.
- Rotación de palabras en el hero cada 3 s (JS simple).
- Slider de testimonios (opcional, usar CSS scroll‑snap).
- Formulario de contacto con validación básica de campos obligatorios.

---
### Requisitos técnicos
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">`.
- Incluir Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados en `tailwind.config` dentro del script.
- Todo el CSS debe ser aplicado vía clases Tailwind; evitar estilos inline.
- JavaScript al final del body, encapsulado en IIFE para evitar contaminación global.
- Mantener semántica HTML5 (header, nav, main, section, footer).
- El archivo debe ser auto‑contenedor y listo para abrirse en el navegador.

Genera el código completo siguiendo estas indicaciones.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú desplegable (Producto, Recursos) y botón "Book a demo"
1.2 Hero con caption, título con palabras rotativas, descripción y botón "Get started free"
1.3 Cards del hero que presentan productos y herramientas AI
1.4 Sección Partners con texto "Trusted by", número de marcas, rating y rejilla de logotipos

PRODUCT

2.1 Título de producto y descripción introductoria
2.2 Galería de características con iconos y textos
2.3 Demo video embed
2.4 CTA de prueba gratuita

RESOURCES

3.1 listado de artículos del blog con imagen, título y extracto
3.2 caso de estudio destacado con captura y resumen
3.3 botón de contacto rápido

PRICING

4.1 Tabla comparativa de planes con columnas de características
4.2 CTA de suscripción por plan

COMPANY

5.1 Historia de la empresa y valores
5.2 Equipo con fotos y breves bios
5.3 Enlaces a redes sociales

CONTACT

6.1 Formulario de contacto con campos nombre, email, mensaje
6.2 Información de soporte y mapa de ubicación

FOOTER

7.1 Navegación secundaria (Producto, Recursos, Precio, Empresa)
7.2 Enlaces legales (Política de privacidad, Términos de servicio)
7.3 Redes sociales y suscripción a newsletter

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexora Labs
Sector: Plataforma SaaS de automatización de marketing e IA para pymes
Claim: Herramientas integradas para impulsar tu negocio

Bloques de la home

1.1 Cabecera con logo, menú desplegable (Producto, Recursos) y CTA de demo
1.2 Hero con subtítulo, título con palabras cambiantes, descripción breve y botón principal
1.3 Tarjetas destacadas del hero que muestran productos y funcionalidades
1.4 Sección Partners que muestra número de marcas, rating y logotipos de clientes

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