EDUCACIÓN · Claude Design · HTML

EcoVoz — Prompt de diseño web para Claude AI

★★★★★4,9 3.405 descargas

Plataforma de podcasts y contenido multimedia Espacio donde las voces encuentran su eco.

↓ 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 EcoVoz (ecovoz.com) siguiendo el diseño visual descrito. Usa HTML5 y Tailwind CSS vía CDN, con JavaScript vanilla en un único archivo. 

**Paleta de colores**: 
- Fondo principal: #262628
- Texto principal: #0D0D0E
- Texto secundario: #A4A4A4
- Acents: #FCDC5A (amarillo) y #FFFFFF (blanco) para botones.

**Tipografía**: 
- Sans‑serif moderna (Inter, Roboto o similar) importada de Google Fonts.

**Estructura global**:
- `<header>` fijo, con logo (SVG placeholder), menú horizontal (Home, About, Episodes, Pricing, Blog, Contact) y botón “Subscribe” con fondo amarillo y texto oscuro.
- `<footer>` oscuro, con columnas de enlaces (Navigation, Legal, Social) y datos de contacto (email: hola@ecovoz.com). Íconos de redes en blanco.

**Home** (sección por sección, numeradas como en "secciones"):
1. **Header** – ya descrito.
2. **Hero** – contenedor centrado, título grande, frase con `<span class="text-yellow">` para resaltar la palabra EcoVoz, dos botones blancos con icono de flecha derecha, grid de 7 imágenes decorativas que aparecen con animación de opacidad.
3. **App links** – fila de iconos grandes (Apple Podcasts, Spotify, Google Podcasts, SoundCloud, Pocket Casts) con enlaces externos, estilo hover que aumenta escala.
4. **Recent Episodes** – título “Recent Episode”, enlace “View All Episode”. Grid de 3‑4 tarjetas, cada tarjeta con fondo #262628, número de episodio, avatar del anfitrión (mic SVG), duración con icono de reloj que cambia de color al hover, título del episodio, breve descripción en gris, botón Play con icono y texto “Listen Now”. Patrón gráfico superpuesto (SVG negro y rojo) como decoración.
5. **Footer** – como descrito.

**Otras páginas** (About, Episodes, Pricing, Contact) deben reutilizar header/footer y seguir la misma estética: títulos grandes, bloques de texto con espaciado, tarjetas para equipo o episodios, tabla de precios con columnas resaltadas, formulario de contacto con campos bordeados en gris y foco amarillo.

**Requisitos técnicos**:
- Incluir `<meta charset="utf-8">`, `viewport`, y título.
- Importar Tailwind CDN (`https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css`).
- Importar fuente Inter desde Google Fonts.
- JavaScript para animaciones de opacidad al cargar (IntersectionObserver) y toggles de menú móvil.
- Todo el HTML debe estar bien indentado y sin uso de clases generadas por Webflow; usar clases Tailwind descriptivas.
- No copiar texto original; generar contenido propio en español de España.
- Asegurar accesibilidad: atributos `alt` en imágenes, roles ARIA en navegación y botones.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y botón de suscripción.
1.2 Hero con título, texto destacado, botones y grid de imágenes.
1.3 Área de reproducción en apps de podcast.
1.4 Sección de episodios recientes (tarjetas).
1.5 Footer con enlaces, contacto y redes.

ABOUT

1.1 Header (reutilizado).
1.2 Banner con título y texto descriptivo.
1.3 Bloque de misión/visión con imágenes.
1.4 Equipo con tarjetas de perfiles.
1.5 Footer.

EPISODE

1.1 Header.
1.2 Lista de episodios en rejilla, cada tarjeta con imagen, número, anfitrión, duración y botón.
1.3 Reproductor destacado.
1.4 Footer.

PRICING

1.1 Header.
1.2 Tabla comparativa de planes con botones de suscripción.
1.3 FAQs en acordeón.
1.4 Footer.

CONTACT

1.1 Header.
1.2 Formulario de contacto simple.
1.3 Mapa y datos de contacto.
1.4 Footer.

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoVoz
Sector: Plataforma de podcasts y contenido multimedia
Claim: Espacio donde las voces encuentran su eco

Bloques de la home

1.1 Header con logo, menú de navegación y botón de suscripción.
1.2 Hero con título destacado, texto resaltado en amarillo, botones primarios y grid de imágenes decorativas.
1.3 Área de reproducción en apps de podcast con iconos de plataformas.
1.4 Sección de episodios recientes con tarjetas, fecha, anfitrión, duración y botón de reproducción.
1.5 Footer con enlaces de navegación, información 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