PODCAST · Claude Design · HTML

EcoSonido — Prompt de diseño web para Claude AI

★★★★★4,7 3.249 descargas

Plataforma digital para crear, descubrir y escuchar podcasts Donde cada voz encuentra su eco.

↓ 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 de una plataforma de podcasts llamada **EcoSonido** siguiendo el diseño y la estructura del sitio analizado. Usa solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo.

**Alcance**
- Página HOME con las siguientes secciones numeradas:
  1. Header: barra de navegación dark, logo a la izquierda, menú con enlaces Home, About, Episodes, Guests, Sponsors, Blog, Contact, dropdown "Pages" con enlaces internos, botón "Contact us" a la derecha. Menú colapsable en móviles.
  2. Hero split dark: columna izquierda con pre‑title, título grande, párrafo corto y botón principal "Start listening" con ícono de flecha animado. Columna derecha con imagen principal del podcast, formas decorativas SVG y dos mini‑cards de podcasts con íconos y títulos.
  3. About split: imagen a la derecha con forma superpuesta, bloque de métrica "5K Episodes released", título "Where voices become legends", párrafo descriptivo, lista de 4 beneficios con íconos y texto, botón secundario "More about us" con ícono.
  4. Podcast section: fondo negro, título "Fresh from the studio" en blanco, enlace "View all episodes" con ícono, grid de tarjetas de episodios (imagen, shape overlay, número del episodio en círculo con color variable, duración con ícono, título, nombres de hosts). Usa datos de muestra.
  5. Footer: fondo negro, columnas de enlaces rápidos (Home, About, Episodes, Blog, Contact), sección de redes sociales con íconos SVG, campo de suscripción al newsletter, texto de derechos de autor.

**Paleta de colores**
- #0A0A0A (fondo negro principal)
- #FFFFFF (texto blanco)
- #21B08E (verde azulado accent)
- #AFA4F9 (morado pastel accent)
- #F5F5F5 (gris claro para fondos secundarios)
- #E0E0E0 (borde y hover).

**Tipografía**
- Fuente principal: `Inter`, sans‑serif, peso 400‑600.
- Títulos grandes: `Inter` 700, tamaño 48‑64px, color blanco o negro según fondo.
- Texto cuerpo: `Inter` 400, 16‑18px, color #E0E0E0 en fondos oscuros.

**Componentes interactivos**
- Menú hamburguesa que abre/cierra la navegación en móvil.
- Botón principal con efecto hover que desplaza ligeramente el ícono.
- Tarjetas de episodio con hover que aumenta la sombra y muestra un overlay semitransparente.
- Dropdown en la barra de navegación con apertura suave.
- Formulario de suscripción en footer con validación simple de email.

**Requisitos técnicos**
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio para usar Tailwind CDN.
- Añadir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">` y aplicar la fuente con `font-family: 'Inter', sans-serif`.
- Todo el CSS se define mediante clases Tailwind; no usar hojas externas.
- JavaScript debe manejar el menú móvil, el dropdown y la validación del formulario de suscripción.
- Mantener la estructura semántica con `<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`.
- Optimizar imágenes con atributos `loading="lazy"` y usar formatos AVIF/WEBP donde sea posible.
- El HTML final debe ser validado y accesible (atributos alt, aria‑labels).

Genera el código completo 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>
```

3.513 caracteres · 57 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoSonido
Sector: Plataforma digital para crear, descubrir y escuchar podcasts
Claim: Donde cada voz encuentra su eco

Bloques de la home

1.1 Header con logo, menú principal, dropdown y botón de contacto
2.1 Hero split dark con pre‑title, título, descripción, botón principal y elementos decorativos
3.1 Sección About con imagen, número de episodios, título, párrafo y lista de beneficios + botón secundario
4.1 Sección de episodios recientes con título, enlace a todas y tarjetas de podcast (imagen, número, duración, título, anfitriones)
5.1 Footer (no incluido en el fragmento pero asume enlaces de navegación y redes)

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

EcoSonido — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Impulso Vital

Lámina Digital

Lúcida Visión

VozCripto