PODCAST · Claude Design · HTML

VozViva — Prompt de diseño web para Claude AI

★★★★★4,8 2.137 descargas

Plataforma de podcasts y contenidos de audio Escucha historias que inspiran.

↓ 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 VozViva siguiendo las siguientes especificaciones:
- Stack: HTML5, Tailwind CSS vía CDN, JavaScript vanilla (un solo archivo index.html). No usar frameworks externos.
- Paleta de colores: #1A1A2E (fondo principal), #16213E (nav y footer), #0F3460 (botones), #E94560 (acentos), #F5F5F5 (texto claro).
- Tipografía: 'Inter' para todo el texto, peso 400 para párrafos, 600 para títulos, 700 para encabezados principales.
- Header (navbar): barra fija superior con logo de texto "VozViva" (SVG placeholder), enlaces Home, Sobre Nosotros, Episodios, Blog y botón destacado Contacto. Menú colapsable en móvil.
- Footer: fondo oscuro, enlaces de navegación reducidos y texto de copyright.
- Home se compone de los bloques numerados en la tabla, respetando su orden y estilo:
  1.1 Hero: sección a pantalla completa con título grande ("Escucha historias que inspiran"), párrafo descriptivo y botón "Suscribirse" ancla a #subscribe. Fondo degradado oscuro a azul y animación de entrada (fade‑up).
  2.1 Patrocinadores: barra horizontal con 3 logotipos placeholder, título pequeño "Apoyado por:" y espacio entre logos.
  3.1 Sobre nosotros: layout de dos columnas, texto a la izquierda (título "Sobre VozViva", párrafo ficticio) y conjunto de formas circulares decorativas a la derecha (SVGs). Botón "Más información" enlaza a /about-us.
  4.1 Episodios destacados: título "Algunos de los mejores episodios", párrafo introductorio y botón "Ver más" a /episodes. Cuadrícula de 3 tarjetas responsive; cada tarjeta muestra imagen de fondo, overlay semi‑transparente, dos etiquetas de categoría, nombre del anfitrión con icono de micrófono, título del episodio y enlace "Escuchar ahora" con flecha circular.
- Sección Subscribe (ancla #subscribe) debajo del hero: formulario sencillo de email y botón "Unirme".
- Página About Us: header similar, bloque con texto ampliado y imagen decorativa, botón volver al inicio.
- Página Episodes: reutiliza la cuadrícula del bloque 4.1 pero con todos los episodios, paginación simple.
- Página Blog: lista de artículos con título, extracto y enlace "Leer más".
- Página Contact: formulario con campos Nombre, Email, Mensaje y botón enviar.
- Implementa animaciones de aparición usando Tailwind utilities (animate-fadeIn, translate-y-4, opacity-0 a opacity-100) y pequeñas transiciones en hover de botones.
- Asegura que el HTML sea semántico (header, nav, main, section, footer). Usa clases de Tailwind para espaciado, tipografía y colores según la paleta.
- Incluye el enlace a la fuente Inter via Google Fonts en el <head>.
- Añade meta tags esenciales (viewport, charset, description).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con título, descripción y botón de suscripción
2.1 Bloque de patrocinadores con logotipos
3.1 Sección "Sobre nosotros" con texto y elementos visuales
4.1 Cuadrícula de episodios destacados (tarjetas con fondo de imagen, categorías, nombre del anfitrión, título del episodio y enlace "Escuchar ahora")

ABOUT US

1.1 Encabezado y párrafo descriptivo
2.1 Imagen decorativa con formas circulares

CONTACT

1.1 Formulario de contacto simple (nombre, email, mensaje, botón enviar)

EPISODES

1.1 Lista de episodios en formato de cuadrícula similar al bloque de la home

BLOG

1.1 Lista de artículos con título, extracto y enlace

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: VozViva
Sector: Plataforma de podcasts y contenidos de audio
Claim: Escucha historias que inspiran

Bloques de la home

1.1 Hero con título, descripción y botón de suscripción
2.1 Bloque de patrocinadores con logotipos
3.1 Sección "Sobre nosotros" con texto y imagen decorativa
4.1 Cuadrícula de episodios destacados con tarjetas, categoría y botón de reproducción

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

VozViva — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

CONTACT

EPISODES

BLOG

Otros prompts de la misma categoría

Impulso Vital

Lámina Digital

Lúcida Visión

VozCripto