BELLEZA / SPA · Claude Design · HTML

SonoraHub — Prompt de diseño web para Claude AI

★★★★★4,8 573 descargas

Plataforma de podcasts y contenido de audio Conecta ideas y voces en un solo espacio.

↓ 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 usando solo HTML, Tailwind CSS CDN y JavaScript vanilla (un único archivo). La marca ficticia es SonoraHub (sonorahub.com) con el claim "Conecta ideas y voces en un solo espacio". Usa la paleta de colores basada en tonos oscuros y acentos vivos: #0A0A0A (fondo principal), #1F2937 (secciones), #3B82F6 (botón primario), #10B981 (botón secundario), #FFFFFF (texto) y #F59E0B (destacados). Tipografía: Inter (Google Fonts) para títulos y texto. 

Estructura:
- Header fijo con logo sencillo (texto SonoraHub) y menú horizontal: Home, About, Episodes, Blog, Contact. Botón destacado "Start Listening" a la derecha.
- Hero: contenedor split 2 columnas. Izquierda: H1 "Transforma tus ideas en podcasts profesionales", párrafo descriptivo, botón primario "Start Listening" y secundario con icono reproducir "Last Episode". Derecha: conjunto de ilustraciones decorativas (círculos y formas abstractas) posicionadas con transformaciones CSS para crear movimiento; incluye un contador grande "168M+" con subtítulo "Oyentes en todo el mundo".
- Sección de marcas: carrusel estático de 7 logos idénticos (puedes usar placeholders), alineados en fila, repetidos tres veces para crear efecto de loop.
- Sección de episodios: título H2 "Explora nuestros últimos episodios", grid 3 columnas de tarjetas; cada tarjeta con imagen de portada, título, breve descripción y botón con icono de reproducción.
- Footer: fondo #1F2937, cuatro columnas: Navegación (enlaces), Recursos (Blog, FAQ), Comunidad (Redes sociales con iconos SVG) y Contacto (email hola@sonorahub.com, dirección ficticia). Incluye texto legal pequeño.

Requisitos técnicos: todas las animaciones de entrada deben usar la clase "transition" de Tailwind y atributos data- attributes para disparar con IntersectionObserver en JS. El menú móvil debe colapsar en un botón hamburguesa que despliega un overlay vertical. El formulario de contacto (en página Contact) debe validar campos con JavaScript básico y mostrar mensaje de éxito sin envío real. Mantén el HTML semántico (header, nav, main, section, footer). No incluyas enlaces externos al original; usa textos 100% originales en español de España.

Entrega el código completo listo para copiar 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.589 caracteres · 29 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con menú principal, logo y botón "Start Listening"
2.1 Hero: título grande, párrafo descriptivo, botones primario y secundario, imágenes decorativas y contador de oyentes
3.1 Área de marcas: fila de logotipos repetidos en carrusel estático
4.1 Episodios: encabezado, grid de tarjetas con imagen, título, descripción corta y botón reproducir
5.1 Footer: columnas de enlaces (Inicio, Sobre, Episodios, Blog, Contacto), redes sociales y datos legales

ABOUT

1.1 Cabecera reutilizada
2.1 Bloque de presentación de la empresa con imagen y texto
3.1 Equipo destacado en tarjetas
4.1 Valores o métricas en iconos

EPISODE

1.1 Cabecera
2.1 Lista de episodios en formato lista con reproductor y descripción
3.1 CTA para suscripción o descarga

BLOG

1.1 Cabecera
2.1 Lista de artículos en tarjetas estilo masonry
3.1 Sidebar con categorías y newsletter

CONTACT

1.1 Cabecera
2.1 Formulario de contacto con campos nombre, email, mensaje
3.1 Mapa estático y datos de ubicación

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: SonoraHub
Sector: Plataforma de podcasts y contenido de audio
Claim: Conecta ideas y voces en un solo espacio

Bloques de la home

1.1 Cabecera con menú y botón de acción
2.1 Hero con título, subtítulo, botones y animación de imágenes
3.1 Sección de logos de marcas
4.1 Galería de últimos episodios con tarjetas
5.1 Footer con enlaces 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

SonoraHub — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

EPISODE

BLOG

CONTACT

Otros prompts de la misma categoría

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle