TECNOLOGÍA · Claude Design · HTML

NexoCreativo — Prompt de diseño web para Claude AI

★★★★★4,8 4.425 descargas

Plataforma de networking y colaboración para creadores de contenido digital Conecta, crea y crece en comunidad.

↓ 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 para la marca ficticia NexoCreativo (plataforma de networking y colaboración para creadores), usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y estilo del sitio fuente analizado, sin copiar texto ni imágenes originales. 
- Paleta de colores: #101010 (negro profundo), #FFFFFF (blanco), #F5F5F5 (gris claro) y acentos #FF6600 (naranja). 
- Tipografía: Inter (sans‑serif) para encabezados y cuerpo, cargada desde Google Fonts. 
- Header: barra fija con logo "NexoCreativo" (SVG placeholder) y enlaces ancla (/Sobre, /Evento, /Testimonios, /Contacto). Menú responsive con icono hamburguesa y animación de líneas bajo los enlaces al hover. 
- Hero: sección full‑height con dos titulares grandes superpuestos (ej. "CONecta" y "CREA"), texto introductorio centrado, botones primario (negro con texto blanco) y secundario (blanco con texto negro). Añade animaciones de entrada (fade‑in y slide) usando CSS. 
- Marquee: carrusel horizontal infinito de palabras clave ("INFLUENCERS", "CREADORES", "CUENTACUENTOS"), alternando con icono pequeño SVG. 
- Sección Misión: título dual "LA MISIÓN", cuatro bloques alineados en grid (2x2 en escritorio, 1 columna en móvil). Cada bloque muestra número "[01]" etc., título corto y párrafo descriptivo. Usa iconos SVG placeholder y animación de aparición al desplazarse. 
- Sección Evento: encabezado "Evento actual" con fecha, tarjetas de agenda con número, título, fecha, breve descripción y icono de flecha. Layout de tarjetas en grid responsive. 
- Testimonios: carrusel simple (swiper‑like) con foto circular, nombre y cita. Implementa lógica JS mínima para cambiar slide cada 5 s. 
- CTA final: fondo gris claro, formulario de una sola columna (nombre, email) y botón "Reserva mi plaza" con hover efecto "scale". 
- Footer: fondo negro, logo pequeño, claim, enlaces secundarios (Política, Términos), íconos de redes (Instagram, TikTok, YouTube) y datos de contacto. 
- Requisitos técnicos: 
  * Incluye `<script src="https://cdn.tailwindcss.com"></script>` al inicio. 
  * Usa `@layer utilities` para animaciones personalizadas. 
  * Todas las imágenes deben ser placeholders (`https://via.placeholder.com/…`). 
  * Añade atributos ARIA y `role` para accesibilidad. 
  * Optimiza para SEO: meta title, description, viewport, y etiquetas semánticas (`<section>`, `<header>`, `<nav>`, `<footer>`). 
  * Implementa un scroll suave para los enlaces ancla. 
Entregar el código listo para copiar‑pegar en un archivo `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>
```

2.898 caracteres · 36 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 ancla
1.2 Hero con titulares superpuestos, texto intro y botones primario/ secundario
1.3 Marquee horizontal de palabras clave
1.4 Sección "Misión" con título dual y cuatro bloques de valores
1.5 Sección "Evento actual" con tarjetas de agenda y contadores
1.6 Testimonios (placeholder)
1.7 Llamada a la acción final con formulario breve
1.8 Footer con enlaces de contacto y redes sociales

ABOUT

2.1 Título de sección "Sobre nosotros"
2.2 Texto descriptivo de la comunidad
2.3 Imagen o ilustración decorativa

EVENT

3.1 Título "Agenda" y fecha del evento
3.2 Lista de actividades con iconos y descripciones
3.3 Botón para descargar agenda completa

TESTIMONIAL

4.1 Carrusel de testimonios de influencers
4.2 Foto, nombre y cita breve

CTA

5.1 Formulario sencillo (nombre, email)
5.2 Botón de envío "Reserva mi plaza"

FOOTER

6.1 Logo miniatura y claim
6.2 Enlaces de navegación secundaria
6.3 Íconos de redes sociales
6.4 Información de contacto y copyright

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: NexoCreativo
Sector: Plataforma de networking y colaboración para creadores de contenido digital
Claim: Conecta, crea y crece en comunidad

Bloques de la home

1.1 Barra de navegación fija con logo y enlaces ancla
1.2 Hero con titulares superpuestos, texto intro y botones primario/ secundario
1.3 Marquee horizontal de palabras clave
1.4 Sección "Misión" con título dual y cuatro bloques de valores
1.5 Sección "Evento actual" con tarjetas de agenda y contadores
1.6 Testimonios (placeholder en HTML original)
1.7 Llamada a la acción final con formulario breve
1.8 Footer con enlaces de contacto y redes sociales

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

NexoCreativo — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

EVENT

TESTIMONIAL

CTA

FOOTER

Otros prompts de la misma categoría

Lectorio

Lumenova Apps

Lumenova Labs

LumenSpark