SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,8 4.587 descargas

Software SaaS para gestión de relaciones con clientes Plataforma modular para equipos de ventas.

↓ 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 Nexura Labs, una plataforma SaaS de gestión de relaciones con clientes. Usa exclusivamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. El proyecto debe reproducir la estructura y estilo de la web analizada, sin copiar textos ni imágenes reales.

**Paleta de colores**
- Primario: #0D4AFF (azul eléctrico)
- Secundario: #3A3A3A (gris oscuro)
- Fondo: #FFFFFF (blanco)
- Texto principal: #111111
- Texto secundario: #555555
- Bordes/Divisores: rgba(0,0,0,0.1)

**Tipografía**
- Fuente principal: Inter, peso 400/600/700, tamaños variables en rem.
- Fuente secundaria para títulos: Poppins, peso 600, mayúsculas opcional.

**Componentes**
1. **Header** fijo, altura 80px, logo a la izquierda, menú de navegación con dropdowns (Home, About us, Blogs, FAQ, Reviews, Contact us) y botón "Purchase Template" a la derecha (solo como placeholder). Incluye icono de hamburguesa para móvil que despliega el menú.
2. **Hero** centrado, dividido en dos columnas: columna izquierda con h1 grande, párrafo descriptivo, botón primario "Explore demos" (bg-primary, hover: bg-primary‑dark) y enlace secundario "Preview" con flecha SVG. Columna derecha muestra imágenes de dispositivos (macbook, tablet, phone) con animación de fade‑in.
3. **Bloque de métricas** bajo el hero: tres tarjetas con número grande y texto descriptivo, fondo gris muy claro, bordes suaves.
4. **Sección de demos** título "Home" y subtítulo "3 Home Pages". Grid de tres tarjetas, cada una con borde sutil, imagen de demo y overlay que muestra el nombre del home al pasar el cursor.
5. **Footer** fondo gris muy claro, columna con enlaces de navegación (Home, About, Blog, FAQ, Contact), datos de contacto (email, teléfono) y copyright.

**Interactividad**
- Dropdowns del menú aparecen al hacer hover (desktop) o click (mobile).
- Botón "Explore demos" hace scroll suave hasta la sección de demos.
- Animaciones de entrada con `transition` y `opacity` para imágenes de dispositivos y tarjetas.
- Menú móvil se abre/cierran con clase toggled y transform CSS.

**Requisitos técnicos**
- Utiliza el CDN de Tailwind: `<script src="https://cdn.tailwindcss.com"></script>` y configura los colores personalizados.
- Todo el CSS debe estar dentro del mismo archivo mediante clases Tailwind.
- JavaScript en un `<script>` al final del body para manejar el toggling del menú móvil y el scroll suave.
- Estructura semántica: `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`.
- Responsivo: columnas se apilan en móvil (<640px) y se convierten en grid de 2‑3 columnas en tablets y desktop.
- Optimiza las imágenes con `loading="lazy"` y atributos `alt` descriptivos.

Entrega todo el código listo para copiar y pegar en un archivo `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.108 caracteres · 53 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ú desplegable y botón de compra
1.2 Hero principal con título, texto, botones y mockups de dispositivos
1.3 Bloque de métricas (ej. 03 Creative Home Pages, 30+ Inner Page Layout)
1.4 Sección de demos con miniaturas de Home V1‑V3
1.5 Footer con enlaces secundarios y datos de contacto

ABOUT US

2.1 Encabezado interno y texto descriptivo
2.2 Imagen ilustrativa y lista de valores
2.3 Equipo con tarjetas de perfil
2.4 Footer repetido

BLOG

3.1 Lista de artículos con imagen, título y extracto
3.2 Barra lateral con categorías y newsletter
3.3 Paginación
3.4 Footer

CONTACT

4.1 Formulario de contacto con campos nombre, email, mensaje
4.2 Mapa incrustado y datos de localización
4.3 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexura Labs
Sector: Software SaaS para gestión de relaciones con clientes
Claim: Plataforma modular para equipos de ventas

Bloques de la home

1.1 Barra de navegación fija con logo, menú desplegable y botón de compra
1.2 Hero principal con título grande, descripción, botón primario y enlace secundario, junto a ilustración de dispositivos
1.3 Bloque de métricas resaltadas (número + descripción)
1.4 Sección de demos con miniaturas de tres versiones de home y enlaces
1.5 Footer minimalista con enlaces de navegación 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

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

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs