PODCAST · Claude Design · HTML

EcoVoz — Prompt de diseño web para Claude AI

★★★★★4,8 2.169 descargas

Plataforma de podcasts Entrelazamos ideas y voces.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web para la marca ficticia ECOVOZ (ecovoz.com) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Reproduce el diseño analizado: 
- Paleta de colores: fondo #FFFFFF, primario #1A202C (gris oscuro), acento #FF6B6B (rojo coral), texto principal #2D3748, texto secundario #718096. 
- Tipografía: 'Inter', sans-serif para títulos y párrafos, peso 600 para encabezados, 400 para cuerpo. 
- Header fijo con logo SVG placeholder, enlaces: Inicio, Episodios, Sobre, Contacto y botones iconados para Apple Podcasts, Spotify, Google Podcasts y SoundCloud. Menú colapsable en móvil con animación simple. 
- Hero: sección de ancho completo, grid de 2 columnas (texto izquierda, imagen derecha). Título máximo 18 caracteres, subtítulo, botón "Todos los episodios". Imagen de fondo con efecto de fade‑in y tarjeta de reseña flotante con 5 estrellas y cita. 
- Sección "Últimos episodios": grid de 3 tarjetas responsivas. Cada tarjeta muestra número de episodio, imagen, título, breve descripción y botón "Escuchar ahora". Hover: sombra y escala ligera. 
- Sección "Reseñas de oyentes": slider automático (JS) con 3 slides, cada uno con 5 estrellas, texto testimonial y autor. Flechas laterales visibles. 
- Footer: fondo gris #F7FAFC, columnas con enlaces de navegación, iconos de plataformas, y datos de contacto. 
- Interactividad: animaciones de fade‑in al cargar (IntersectionObserver), desplazamiento suave para enlaces del menú, slider con setInterval y control de pausa al hover. 
- Estructura del HTML: usar secciones con clases Tailwind claras (e.g., `section`, `container`, `grid`, `flex`). Mantener IDs para animaciones (`hero-title`, `episode-list`, `reviews-slider`). 
- Incluye meta tags básicos, favicon placeholder y carga de fuentes Google (`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">`). 
- Asegúrate de que el sitio sea completamente responsivo (mobile‑first), sin dependencias externas más allá de Tailwind CDN y Google Fonts.

---

## 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.374 caracteres · 29 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación con logo, enlaces y botones a plataformas de streaming
1.2 Hero con título destacado, subtítulo, botón principal y foto de fondo
1.3 Tarjetas de últimos episodios con número, imagen, título, descripción y botón
1.4 Carrusel de reseñas de oyentes con estrellas y texto
1.5 Footer con enlaces a redes y plataformas

EPISODES

2.1 Lista de episodios con tarjeta similar a la de la home
2.2 Paginación o carga infinita

ABOUT

3.1 Texto descriptivo de la marca y equipo
3.2 Imagen ilustrativa
3.3 CTA a suscripción

CONTACT

4.1 Formulario de contacto simple (nombre, email, mensaje)
4.2 Información de contacto y enlaces a redes

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoVoz
Sector: Plataforma de podcasts
Claim: Entrelazamos ideas y voces

Bloques de la home

1.1 Barra de navegación con logo, enlaces y botones a plataformas de streaming
1.2 Hero con título destacado, subtítulo, botón principal y foto de fondo
1.3 Tarjetas de últimos episodios con número, imagen, título, descripción y botón
1.4 Carrusel de reseñas de oyentes con estrellas y texto
1.5 Footer con enlaces a redes y plataformas

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

EcoVoz — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

EPISODES

ABOUT

CONTACT

Otros prompts de la misma categoría

Impulso Vital

Lámina Digital

Lúcida Visión

VozCripto