PODCAST · Claude Design · HTML

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

★★★★★4,7 1.928 descargas

Producción y distribución de podcasts temáticos Historias que resuenan en cada escucha.

↓ 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 un archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. La marca ficticia es EcoVoz Studios.

ALCANCE:
- Reproducir el layout analizado: encabezado con logo SVG, menú de navegación en tres columnas, botón hamburguesa que abre un overlay con enlaces y botones secundarios.
- Hero section con título grande, párrafo y dos botones (primario y secundario) con íconos de flecha animados.
- Demo media block que muestra mockups de MacBook, tablet y móvil (usar imágenes de placeholder) y dos contadores estilizados.
- Sección "Home versions" con una cuadrícula de tres tarjetas; cada tarjeta muestra una miniatura de página y nombre (Home V1, V2, V3). Al hacer hover, la tarjeta debe elevarse ligeramente y cambiar borde.
- Sección "About versions" idéntica pero con tres tarjetas distintas (About V1‑V3).
- Footer con tres botones secundarios alineados a la derecha: STYLE GUIDE, LICENSING, CHANGELOG.
- Cada página (home, about, episodes, hosts, blog, contact) debe reutilizar header y footer y variar el contenido principal siguiendo la tabla proporcionada.
- Implementar menú móvil: al pulsar el icono, se muestra un overlay oscuro con los mismos enlaces organizados en tres columnas y botones secundarios al pie.
- Animaciones suaves con clases Tailwind (transition, transform) y un pequeño script para togglear la clase "hidden" del overlay.

PALETA DE COLORES (usar en Tailwind config inline):
- Fondo principal: #FFFFFF
- Texto principal: #111111
- Azul principal: #0A84FF (para botones y acentos)
- Gris claro: #F5F5F5 (fondos de tarjetas)
- Gris oscuro: #333333 (footer y texto secundario)

TIPOGRAFÍA:
- Fuente principal: "Inter", sans-serif; tamaños: 4xl para títulos hero, 2xl para subtítulos, base para párrafos.
- Fuente secundaria para navegación: "Inter" peso medium.

REQUISITOS TÉCNICOS:
- Archivo único index.html que contenga todas las secciones; usar anclas (#) para simular navegación entre páginas.
- Incluir `<script>` al final para manejo de menú móvil.
- Todas las imágenes deben ser placeholders de https://via.placeholder.com con dimensiones apropiadas.
- No usar ningún framework adicional ni assets externos que revelen la fuente original.
- Mantener la accesibilidad: atributos alt en imágenes, role="navigation" en el menú, labels en el formulario.

Entrega el HTML completo listo para copiar‑pegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, navegación principal multicolumna y botón hamburguesa
1.2 Hero: título grande, párrafo descriptivo, botones primario y secundario
1.3 Demo media: mockup de dispositivos (macbook, tablet, phone) y contadores
1.4 Sección Home versions: grid 3x tarjetas con imagen y nombre de versión
1.5 Sección About versions: grid 3x tarjetas similar
1.6 Footer: barra inferior con botones estilo enlace

ABOUT

1.1 Header reutilizado
1.2 Hero interno con título y descripción breve
1.3 Imagen lateral ilustrativa
1.4 Texto de misión y valores en dos columnas
1.5 Equipo destacado con tarjetas de foto y nombre
1.6 Footer reutilizado

EPISODES

1.1 Header
1.2 Lista de episodios en tarjetas con imagen, título, fecha y botón reproducir
1.3 Sidebar con filtro por categorías
1.4 Footer

HOSTS

1.1 Header
1.2 Grid de presentaciones de hosts con foto, biografía corta y enlaces sociales
1.3 Footer

BLOG

1.1 Header
1.2 Grid de artículos con imagen, título, extracto y botón leer más
1.3 Paginación simple
1.4 Footer

CONTACT

1.1 Header
1.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
1.3 Mapa embebido de ubicación ficticia
1.4 Footer

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoVoz Studios
Sector: Producción y distribución de podcasts temáticos
Claim: Historias que resuenan en cada escucha

Bloques de la home

1.1 Header con barra de navegación y botón de menú móvil
1.2 Hero principal con título, descripción y dos botones de llamada a acción
1.3 Área de demostración con ilustraciones de dispositivos y contadores informativos
1.4 Sección de versiones de Home (grid de tres tarjetas)
1.5 Sección de versiones de About (grid de tres tarjetas)
1.6 Footer con botones estilo enlace a Style Guide, Licencing y Changelog

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