SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,9 4.593 descargas

Plataforma SaaS para optimizar la productividad empresarial Herramientas que convierten procesos en resultados.

↓ 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" (nexora.com) usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe replicar el diseño analizado: 
- **Paleta de colores**: fondo blanco #FFFFFF, texto principal #111111, acentos azul profundo #0A4CFF, gris suave #F5F5F5, azul claro para enlaces #3A7EFF. 
- **Tipografía**: Google Font "Inter" para cuerpo y encabezados, peso 400/500/600, tamaños 14px‑48px según jerarquía. 
- **Header**: barra de navegación sticky, logo a la izquierda (placeholder SVG), enlaces Home, Sobre Nosotros, Precios, Blog, Contacto; botón "Iniciar sesión" y botón destacado "Regístrate" con borde azul y fondo transparente. Menú móvil colapsable con icono de hamburguesa (SVG animado simple). 
- **Hero**: badge "Nuevo" con fondo azul claro, título grande "Impulsa la productividad humana" con la palabra "productividad" resaltada en azul profundo, subtítulo explicativo, dos botones primarios "Regístrate gratis" (fondo azul) y "Iniciar sesión" (contorno azul). Imagen a la derecha (placeholder de dashboard). Animaciones suaves de entrada (opacity/translate). 
- **Sección de marcas**: título centrado "Confían en nosotros líderes mundiales", fila de 6 logotipos en escala gris, espacio uniforme. 
- **Características**: grid de 3 columnas, cada tarjeta con icono SVG, título en h6, texto descriptivo pequeño. Bordes ligeramente redondeados, sombra ligera, hover eleva ligeramente. 
- **Proceso paso a paso**: componente de tabs horizontal con 4 pasos numerados. Cada paso muestra un número, línea conectiva y punto activo. Al hacer click, el contenido cambia: título h5, párrafo explicativo y una imagen ilustrativa a la derecha (placeholder). Transición fade. 
- **Footer**: fondo gris #F5F5F5, columnas de enlaces (Producto, Empresa, Recursos) y datos de contacto (email, dirección). Texto pequeño, enlaces en azul profundo. 
- **Interactividad**: menús desplegables, tabs, scroll smooth, animaciones de aparición al hacer scroll (IntersectionObserver). 
- **Responsividad**: diseño mobile‑first, colapsar grid a 1 columna en <640px, menú hamburguesa, tabs apilados verticalmente. 
- **Requisitos técnicos**: incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">`, `<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>` para manejar estado de tabs y menú móvil sin frameworks adicionales. Todo el HTML debe usar clases de Tailwind, sin CSS extra. Añadir comentarios clarificando cada sección. Entregar el fichero 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>
```

2.959 caracteres · 29 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 y enlaces principales
1.2 Hero con badge, título destacado, subtítulo, botones de registro e ingreso y una ilustración a la derecha
1.3 Sección de marcas confiables con logos alineados
1.4 Bloque de tres tarjetas de características con icono, título y descripción
1.5 Sección de proceso paso a paso con tabs interactivos y contenido visual por paso
1.6 Footer con enlaces institucionales y datos de contacto

ABOUT

2.1 Hero interno con título y texto descriptivo
2.2 Historia de la empresa en bloque de texto con imagen lateral
2.3 Equipo destacado en cards con foto y biografía breve
2.4 Valores y misión en lista de íconos
2.5 Footer común

PRICING

3.1 Tabla comparativa de planes con precios y ventajas
3.2 Preguntas frecuentes en acordeón
3.3 Llamada a la acción para prueba gratuita
3.4 Footer común

BLOG

4.1 Lista de artículos con imagen, título y extracto
4.2 Sidebar con categorías y últimos posts
4.3 Paginación inferior
4.4 Footer común

CONTACT

5.1 Formulario de contacto con campos nombre, email, mensaje
5.2 Mapa incrustado y datos de oficina
5.3 Footer común

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexora Labs
Sector: Plataforma SaaS para optimizar la productividad empresarial
Claim: Herramientas que convierten procesos en resultados

Bloques de la home

1.1 Barra de navegación fija con logo y enlaces principales
1.2 Hero con badge, título destacado, subtítulo, botones de registro e ingreso y una ilustración a la derecha
1.3 Sección de marcas confiables con logos alineados
1.4 Bloque de tres tarjetas de características con icono, título y descripción
1.5 Sección de proceso paso a paso con tabs interactivos y contenido visual por paso
1.6 Footer con enlaces institucionales 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

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

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PRICING

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs