SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,8 1.290 descargas

Diseño y desarrollo de plantillas SaaS para Webflow y sitios estáticos Plantillas listas para lanzar tu SaaS en minutos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa que reproduzca el diseño visual y la estructura de la plantilla descrita, pero con la marca ficticia **Nexora Studio**. Utiliza únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. No uses ninguna librería externa ni fuentes distintas a las proporcionadas por Google Fonts.

**Requisitos de estilo**
- Paleta de colores: 
  - Primario: #0D3B66 (azul oscuro)
  - Secundario: #FAF0CA (crema claro)
  - Accent: #F4D35E (amarillo dorado)
  - Texto principal: #212529 (gris casi negro)
  - Fondo: #FFFFFF.
- Tipografía: `Inter` para títulos y cuerpo, cargada desde Google Fonts.
- Todas las animaciones deben ser CSS‑only (fade‑in, slide‑up) y activarse al hacer scroll (utiliza `IntersectionObserver`).

**Estructura**
1. **Header / Navbar** (sticky, z‑index alto) con logo (texto “Nexora” estilizado), enlaces: Home, About, Features, Pricing, Blog, Contact. A la derecha, botones “Sign Up” (bordes, fondo transparent) y “Get Started” (fondo primario, texto blanco). Menú hamburguesa para móvil.
2. **Hero** ocupando 100vh, fondo primario, centrado verticalmente:
   - Badge circular con icono genérico y texto “#1 Product of the Day”.
   - Título grande (h1) “Nexora SaaS Template”.
   - Subtítulo con peso medio.
   - Botones CTA: "Customize template" (borde, fondo primario) y "Buy now" (fondo accent).
3. **Marquee de imágenes**: dos contenedores horizontales con `overflow-hidden` y `whitespace-nowrap`. Cada uno contiene 6 imágenes de ejemplo (usa `https://picsum.photos/seed/{i}/400/300`). El primer marquee se desplaza a la derecha con `animation: marquee 20s linear infinite;`. El segundo se invierte con `animation-direction: reverse;`.
4. **Footer** con 3 columnas: Navegación (Home, About, Features, Pricing, Blog, Contact), Recursos (Docs, API, Support, Terms), Contacto (email, teléfono, dirección). Fondo secundario, texto gris oscuro.
5. **Responsividad**: grid y flex según breakpoints de Tailwind (`sm`, `md`, `lg`). El menú colapsa en móvil y el marquee sigue siendo scrollable.
6. **Accesibilidad**: atributos `alt` en imágenes, `aria-label` en botones, contraste suficiente.

**Salida**: entrega el código completo dentro de un único bloque `<html>...</html>` 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.606 caracteres · 42 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, enlaces principales y botones “Sign Up” y “Get Started”.
1.2 Hero principal con badge "#1 Product of the Day", título grande, subtítulo y botones CTA "Customize template" y "Buy now".
1.3 Bucle de imágenes superior (marquee) con desplazamiento continuo en sentido normal.
1.4 Bucle de imágenes inferior (marquee) con desplazamiento continuo inverso.
1.5 (Opcional) Footer con columnas de enlaces y datos de contacto.

ABOUT

2.1 Encabezado reutilizado.
2.2 Sección de presentación de la empresa con texto e imágenes.
2.3 Equipo y valores.
2.4 CTA para contactar.

CONTACT

3.1 Encabezado reutilizado.
3.2 Formulario de contacto con campos nombre, email, mensaje.
3.3 Información de ubicación y redes sociales.
3.4 CTA adicional.

BLOG

4.1 Lista de artículos con tarjetas, imagen, título, extracto y botón leer más.
4.2 Sidebar con categorías y tags.
4.3 Paginación.

PRICING

5.1 Tabla comparativa de planes con características y botones de selección.
5.2 FAQ acordeón bajo la tabla.
5.3 CTA final.

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexora Studio
Sector: Diseño y desarrollo de plantillas SaaS para Webflow y sitios estáticos
Claim: Plantillas listas para lanzar tu SaaS en minutos

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces y botones de acción
1.2 Hero principal con badge destacado, título grande, subtítulo y dos botones CTA
1.3 Sección de bucle de imágenes horizontal con scroll continuo (marquee) en dirección y reversa
1.4 Footer con enlaces de navegación secundaria y datos de contacto (no incluido en el fragmento pero supuesto por la plantilla)

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 Studio — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

CONTACT

BLOG

PRICING

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs