SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,7 3.259 descargas

Plataforma SaaS para gestión de proyectos empresariales Herramientas que simplifican la colaboración digital.

↓ 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 Cloud** (plataforma SaaS de gestión de proyectos) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. Reproduce fielmente la estructura y el estilo del sitio analizado, sin copiar texto ni imágenes reales.

**Alcance**
- Header fijo con logo SVG, menú de navegación multi‑nivel (Home, Pricing, Blog, Contact, Pages) y botones "Log in" (outline) y "Sign up" (filled). Menú responsive con botón hamburguesa.
- Hero section ocupando la vista completa: título grande "Impulsa tu negocio", subtítulo breve, botón primario "Comienza ahora" y animación de entrada (fade‑up + blur). Fondo degradado.
- Sección de características: 3 columnas, cada una con icono SVG, título y descripción corta.
- Testimonios: tarjetas con foto circular, nombre, cargo y comentario, alineadas en grid responsive.
- CTA secundaria: fondo contrastante, texto centrado y botón destacado.
- Footer de cuatro columnas: Enlaces institucionales, Productos, Recursos, Contacto + iconos de redes sociales.

**Paleta de colores**
- Primario: #1E3A8A (azul fuerte)
- Secundario: #2563EB (azul medio)
- Fondo claro: #F9FAFB
- Texto oscuro: #111827
- Accent: #F59E0B (amarillo para botones destacados)

**Tipografía**
- Fuente principal: Inter (Google Fonts) – weight 400/600/700
- Encabezados: font‑size variable, uso de `text-5xl` y `font-bold` para hero, `text-2xl` para secciones.

**Componentes interactivos**
- Menú desplegable con `mouseenter`/`mouseleave` que muestra sub‑listas.
- Botón de scroll‑to‑top que aparece al hacer scroll.
- Animaciones de aparición usando `IntersectionObserver` (fade‑in).
- Formulario de contacto con validación básica y mensaje de éxito.

**Requisitos técnicos**
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` y configurar Tailwind JIT.
- Todas las clases Tailwind deben estar en el HTML o en un `<style>` de respaldo para que el JIT las detecte.
- Utilizar `flex`, `grid` y `responsive` utilities para adaptarse a móviles.
- Mantener el código limpio, sin dependencias externas aparte de Tailwind y Google Fonts.
- Comentarios claros en el HTML indicando cada bloque según la tabla proporcionada.

Genera el archivo listo para abrir en el navegador y que reproduzca la experiencia visual y de interacción descrita.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header fijo con logo, menú desplegable multi‑nivel y botones Log in / Sign up
1.2 Hero principal con título destacado, subtítulo y botón principal
1.3 Bloque de características en tres columnas con iconos y texto breve
1.4 Sección de testimonios con cards y foto del cliente
1.5 Llamada a la acción secundaria con botón destacado
1.6 Footer con columnas de enlaces, redes sociales y datos de contacto

PRICING

2.1 Header (reutilizado)
2.2 Tabla comparativa de planes con botones de selección
2.3 Preguntas frecuentes en acordeón
2.4 Footer (reutilizado)

BLOG

3.1 Header (reutilizado)
3.2 Lista de artículos en grid de dos columnas con extracto y foto
3.3 Sidebar con categorías y newsletter
3.4 Footer (reutilizado)

CONTACT

4.1 Header (reutilizado)
4.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
4.3 Mapa incrustado y datos de localización
4.4 Footer (reutilizado)

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexora Cloud
Sector: Plataforma SaaS para gestión de proyectos empresariales
Claim: Herramientas que simplifican la colaboración digital

Bloques de la home

1.1 Header fijo con logo, menú desplegable multi‑nivel y botones Log in / Sign up
1.2 Hero principal con título destacado, subtítulo y botón principal
1.3 Bloque de características en tres columnas con iconos y texto breve
1.4 Sección de testimonios con cards y foto del cliente
1.5 Llamada a la acción secundaria con botón destacado
1.6 Footer con columnas de enlaces, redes sociales 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 Cloud — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

PRICING

BLOG

CONTACT

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs