SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,8 1.041 descargas

SaaS de herramientas colaborativas para equipos digitales Simplificamos la colaboración en línea.

↓ 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 en un solo archivo HTML que reproduzca el diseño visual y la estructura de la plantilla descrita, pero con la marca ficticia Nexura Labs. Usa Tailwind CSS desde CDN y JavaScript vanilla (sin frameworks). Mantén la siguiente paleta de colores: primario #0D6EFD (azul brillante), secundario #6C757D (gris neutro), acento #FFC107 (amarillo), fondo #F8F9FA (gris muy claro), texto principal #212529 (gris oscuro). Tipografía: Inter (Google Fonts) para encabezados y texto, peso 400/600/700 según jerarquía.

### Requisitos de layout
- **Header**: barra de navegación fija, logo a la izquierda (texto Nexura Labs en Inter Bold), menú desplegable con 4 columnas (Home Pages, Inner Pages, Utility Pages, Contact), botón destacado "Get Started" con borde azul y fondo transparente, icono de hamburguesa para móvil que alterna entre abrir y cerrar.
- **Sección 1 – Hero**: contenedor centrado, título grande (h1, 4rem, azul primario), subtítulo opcional, botón principal azul con texto blanco "Buy Template" que abre enlace externo.
- **Sección 2 – Carrusel de imágenes**: presentación de 6 capturas simuladas (usar placeholders de https://via.placeholder.com/800x450/eeeeee/aaaaaa?text=Demo+1, etc.) con desplazamiento automático y controles de flecha.
- **Sección 3 – Métricas lineales**: barra con fondo semitransparente (glass effect) que muestra 4 bloques repetidos, cada bloque con icono (usar SVG genérico) y texto como "Build a creative website now".
- **Sección 4 – Cuadrícula de Home Pages**: grid 2 columnas en desktop, 1 columna en móvil; cada tarjeta muestra una imagen placeholder, overlay con nombre de la página (Home Page 01, 02, 03) y enlace.
- **Sección 5 – CTA Figma**: bloque con fondo degradado, título h2, párrafo descriptivo y botón "Buy Figma File" que abre un enlace externo.
- **Sección 6 – Blog preview**: sección con título h2, grid de 2 tarjetas (imagen placeholder, título, botón “Read More”).
- **Footer**: fondo azul oscuro (#343A40), columnas con enlaces de navegación, información de contacto y redes sociales (iconsos SVG genéricos), texto pequeño gris claro.

### Interactividad
- Menú desplegable en escritorio muestra contenido al pasar el cursor.
- Menú hamburguesa muestra/oculta el panel móvil con transición de altura.
- Carrusel de imágenes avanza cada 5s y permite navegación manual.
- Botones con efecto hover (cambio de tono y sombra).

### Código
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">`.
- Incluir Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados mediante `tailwind.config = { theme: { extend: { colors: { primary: '#0D6EFD', secondary: '#6C757D', accent: '#FFC107', background: '#F8F9FA', dark: '#212529' } } } }`.
- Todo el HTML debe estar estructurado con clases de Tailwind, usar `container mx-auto` para anchos.
- Añadir script al final del body para manejar el menú móvil y el carrusel.
- Asegurarse de que el sitio sea completamente responsive.

Entregue el archivo HTML completo listo para abrir en el navegador.

---

## 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.463 caracteres · 43 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 "Get Started"
2.1 Hero principal con título destacado y botón de compra
3.1 Carrusel de imágenes de captura bajo el hero
4.1 Línea de métricas con iconos y textos repetidos
5.1 Cuadrícula de tarjetas de muestras de páginas de inicio
6.1 Llamada a la acción para compra de archivo Figma
7.1 Sección de blog con tarjetas de entradas y detalle

CONTACT

1.1 Formulario de contacto simple con campos nombre, email y mensaje
2.1 Mapa estático y datos de sede

ABOUT

1.1 Historia de la empresa y valores
2.1 Equipo con fotos y breves descripciones

BLOG

1.1 Lista de artículos con imagen, título y extracto
2.1 Paginación inferior

POST DETAIL

1.1 Artículo completo con cabecera, contenido y sección de comentarios

CAREER

1.1 Lista de ofertas de empleo con botón de aplicación
2.1 Detalle de puesto seleccionado

TEAM

1.1 Galería de miembros del equipo con enlaces a perfiles individuales

INTEGRATIONS

1.1 Tabla de integraciones compatibles con iconos y descripciones

TERMS & CONDITIONS

1.1 Texto legal estático

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexura Labs
Sector: SaaS de herramientas colaborativas para equipos digitales
Claim: Simplificamos la colaboración en línea

Bloques de la home

1.1 Barra de navegación fija con logo, menú desplegable y botón "Get Started"
2.1 Hero principal con título destacado y botón de compra
3.1 Carrusel de imágenes de captura (simuladas) bajo el hero
4.1 Línea de métricas con iconos y texto repetido
5.1 Cuadrícula de tarjetas que muestra distintas páginas de inicio disponibles
6.1 Tarjeta informativa de compra de archivo Figma
7.1 Presentación de blog con tarjetas de artículos y posts destacados

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