TECNOLOGÍA · Claude Design · HTML

Nexo Urbano — Prompt de diseño web para Claude AI

★★★★★4,6 3.232 descargas

Plataforma de directorio de negocios y servicios locales Conecta tu ciudad en un solo clic.

↓ 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 completamente autogenerado usando HTML, Tailwind CSS CDN y JavaScript vanilla (un solo archivo) que reproduzca el diseño visual y la estructura de la web analizada, pero con la marca ficticia Nexo Urbano.

**Objetivo**: Landing page para un directorio de negocios locales que muestre hero, bloques de características, galerías de demos y páginas internas.

**Stack**: HTML5, Tailwind CSS (v3) vía CDN, JS vanilla para menú móvil y animaciones de scroll.

**Paleta de colores**:
- Primario: #1E3A8A (azul oscuro)
- Secundario: #3B82F6 (azul brillante)
- Fondo claro: #F9FAFB (gris muy claro)
- Texto principal: #111827 (gris casi negro)
- Accent: #FBBF24 (amarillo dorado para resaltados)

**Tipografía**: Inter (Google Fonts) para todo el texto, peso 400/500/600 según necesidad.

**Header**:
- Logo SVG ficticio a la izquierda (placeholder).
- Menú horizontal con enlaces: Home, Demos, Inner Pages, Utility Pages, Authentication.
- Botón secundario "Compra Plantilla" visible en escritorio y dentro del menú móvil.
- Menú colapsable con ícono hamburger (animación CSS simple).

**Sección 1 – Hero**
- Contenedor centrado, máximo ancho 1200px.
- Título grande (h1) con línea de texto en dos filas, color primario.
- Texto descriptivo bajo el título, color gris.
- Dos botones CTA: "Compra ahora" (estilo primario) y "Más plantillas" (estilo secundario).
- Elementos decorativos (formas abstractas) posicionados con absolute y opacidad.

**Sección 2 – Banner ilustrativo**
- Two‑column layout con imágenes responsivas a la izquierda y derecha.
- Cada imagen envuelta en div con clase `rounded-lg overflow-hidden shadow-lg`.

**Sección 3 – Qué incluye**
- Título central (h2) y párrafo introductorio.
- Grid de 3 columnas (responsive a 1‑2‑3) con tarjetas.
- Cada tarjeta: icono SVG encima, título (h4), texto descriptivo.
- Fondo blanco, borde suave y efecto hover de elevación.

**Sección 4 – Demos de Homepages**
- Título y descripción.
- Grid de 2 tarjetas con imagen de demo, overlay con botón "Ver demo" y texto "home 01", "home 02".
- Hover: transición de escala y cambio de opacidad del overlay.

**Sección 5 – Inner Pages**
- Título y descripción.
- Grid de 5‑6 tarjetas que representan páginas internas (About Us, Contact Us, Services, Service Single, Cities, etc.).
- Cada tarjeta similar al demo, con overlay y texto.

**Footer**
- Fondo primario, texto claro.
- Tres columnas: Navegación principal, Enlaces útiles, Información de contacto.
- Pequeño texto copyright con año actual.

**Interacciones**
- Menú móvil abre/cierra con transición de altura.
- Smooth scroll al hacer click en enlaces de ancla.
- Hover en tarjetas y botones con escala 105% y sombra.
- Animaciones de aparición (fade‑in) al hacer scroll usando IntersectionObserver.

**Consideraciones técnicas**
- Utiliza clases Tailwind para todo el layout (flex, grid, spacing, colores, tipografía).
- Incluye `<script>` al final para manejar el menú móvil y las animaciones de scroll.
- Evita cualquier contenido copiado; genera textos originales en español de España.
- No incluir URLs reales, usar placeholders.
- Mantener código limpio y comentado para futura ampliación.

Genera el archivo completo listo para ser guardado como `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.588 caracteres · 84 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME