BELLEZA / SPA · Claude Design · HTML

EcoVoz Studios — Prompt de diseño web para Claude AI

★★★★★4,6 4.680 descargas

Plataforma de podcasts y contenido de audio Historias que inspiran y provocan reflexión.

↓ 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 Studios** (ecovozstudios.com) que reproduzca el diseño visual y la estructura del sitio analizado. Utiliza **HTML** + **Tailwind CSS CDN** + **JavaScript vanilla (single file)**. 

**Paleta de colores** (extraída del template original):
- #111111 (texto principal, negro profundo)
- #FFFFFF (fondo blanco)
- #FF6F61 (color de acento, naranja vibrante para botones y destacados)
- #F5F5F5 (gris muy claro para fondos de secciones)
- #FFD700 (dorado para estrellas de reseña)

**Tipografía**: 
- Título y encabezados: *Inter* (peso 700), tamaño 3rem a 4rem según pantalla. 
- Texto corriente: *Inter* (peso 400), 1rem, líneas de 1.6. 
- Botones: *Inter* semi‑bold, mayúsculas, tracking 0.05em.

**Header**: barra de navegación fija, fondo blanco, sombra ligera. Logotipo (SVG simple) a la izquierda, enlaces de navegación (Inicio, Episodios, Sobre, Contacto) centrados, y a la derecha iconos enlazando a Apple Podcasts, Spotify, Google Podcasts y SoundCloud (SVG mono‑color #111). Menú hamburguesa responsive con animación Lottie sencilla.

**Footer**: fondo gris #F5F5F5, enlaces de navegación en dos columnas, iconos de redes sociales (Twitter, Instagram, Facebook) en color #FF6F61, y texto de copyright.

**Home**: 
1. **Hero** (flex grid 2‑col): columna izquierda con h1 "Descubre conversaciones que transforman", p subtítulo, botón primario "Todos los episodios" (bg #FF6F61, hover #E65A50). Columna derecha con imagen de fondo (foto de estudio), posición relativa; encima, tarjeta de reseña absoluta con fondo blanco semi‑transparente, estrellas doradas y cita.
2. **Últimos episodios**: título h2 centrado, rejilla 3‑col (responsive a 1‑col móvil) de tarjetas. Cada tarjeta contiene miniatura, etiqueta con "episodio#" y número, título, párrafo descriptivo corto y botón secundario "Escuchar ahora" (borde #FF6F61, texto #FF6F61).
3. **Opiniones de oyentes**: slider automático (JS) con contenedor overflow‑hidden, slides con tarjeta de reseña (fondo blanco, sombra, estrellas doradas, texto y autor). Flechas de navegación a los lados, paginador circular.

**Páginas internas** (Episodes, About, Contact) mantienen la misma barra y footer. Episodes muestra lista de episodios en tarjetas similares a la sección de la Home. About incluye bloque de misión y foto del equipo. Contact incluye formulario simple (nombre, email, mensaje) con validación mínima y botón "Enviar" estilo primario.

**Requisitos técnicos**: 
- Utiliza Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`). 
- Configura colores personalizados en `tailwind.config` via `tailwind.config = {theme:{extend:{colors:{primary:'#FF6F61',dark:'#111111',light:'#F5F5F5',gold:'#FFD700'}}}};`. 
- Usa `flex`, `grid`, `gap-6`, `p-8` etc. para layout responsive. 
- Implementa slider con JavaScript: `setInterval` para cambiar slide, actualizar clase `active`. 
- Añade animaciones suaves con `transition` y `opacity` para elementos que aparecen al cargar (`data-aos`). 
- Optimiza imágenes con `loading="lazy"` y `srcset`.
- Mantén todo el código en un único archivo `index.html` (para demo) y referencias a hojas externas únicamente para Tailwind.

Entrega el HTML completo listo para copiar‑pegar, con todos los bloques descritos, respetando la paleta y tipografía, sin copiar texto del sitio original.

---

## 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.678 caracteres · 52 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, enlaces y enlaces a plataformas de audio
1.2 Hero: título, subtítulo, botón "todos los episodios", imagen de fondo y tarjeta de reseña emergente
1.3 Sección "Últimos episodios": rejilla de tarjetas con miniatura, número de episodio, título, descripción breve y botón "Escuchar ahora"
1.4 Sección "Opiniones de oyentes": slider automático con tarjetas de reseña, estrellas y autor
1.5 Footer: enlaces a páginas internas, enlaces a redes sociales y datos de contacto

EPISODES

2.1 Barra de navegación idéntica a la de Home
2.2 Lista de episodios con filtro y paginación, cada ítem muestra miniatura, número, título y botón de reproducción
2.3 Footer igual que en Home

ABOUT

3.1 Barra de navegación
3.2 Hero con texto descriptivo y foto del equipo
3.3 Bloque de valores y misión
3.4 Footer

CONTACT

4.1 Barra de navegación
4.2 Formulario de contacto con campos: nombre, email, mensaje y botón enviar
4.3 Información de contacto y mapa incrustado
4.4 Footer

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoVoz Studios
Sector: Plataforma de podcasts y contenido de audio
Claim: Historias que inspiran y provocan reflexión

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces a secciones y enlaces a plataformas externas
1.2 Hero con título, subtítulo y botón principal, imagen a la derecha y tarjeta de reseña flotante
1.3 Listado de últimos episodios en tarjetas con imagen, número, título, descripción y botón
1.4 Slider de reseñas de oyentes con estrellas y texto
1.5 Footer simple con enlaces de navegación 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

EcoVoz Studios — 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

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle