PODCAST · Claude Design · HTML

VivaStudio — Prompt de diseño web para Claude AI

★★★★★4,9 2.726 descargas

Podcast sobre diseño y creatividad Conversaciones que inspiran el proceso creativo.

↓ 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 "VivaStudio" (podcast de diseño) usando un solo archivo HTML que cargue Tailwind CSS desde su CDN y JavaScript vanilla. Emplea la siguiente paleta de colores: #1a1a1a (fondo oscuro), #f5f5f5 (texto claro), #ffb400 (amarillo acento), #ffffff (blanco para tarjetas), #e0e0e0 (bordes ligeros). Tipografía: Inter var para todo el texto, con pesos 400 y 700; usar clases Tailwind `font-inter`. 

Estructura:
- **Header (navbar)**: barra fija, fondo #1a1a1a, logo SVG placeholder, enlaces ancla (Our Host, Top Guests, Latest Episodes, Find Us) y botón "Suscríbete" con fondo #ffb400 y texto #1a1a1a.
- **Hero section**: contenedor centrado, título grande en mayúsculas dividido en tres líneas usando `text-5xl md:text-7xl font-bold text-white`, subtexto con día, hora y anfitrión en gris claro y amarillo para destacar valores.
- **Latest Episode widget**: tarjeta con fondo #ffffff, sombra ligera, número de episodio en badge amarillo, título en negrita, nombre del invitado resaltado, párrafo descriptivo y botón de reproducción redondo con icono play (SVG). Animaciones de aparición `opacity-0 translate-y-5` y transición `duration-500` al scroll.
- **Our Host section**: disposición de dos columnas (texto a la izquierda, imagen a la derecha). Texto en gris claro, nombre del host en amarillo, párrafo descriptivo, iconos de Twitter e Instagram como enlaces. Imagen responsiva con `object-cover`.
- **Latest Episodes list**: grid de 2 columnas en desktop, 1 columna en móvil. Cada tarjeta replica el estilo del widget: número, fecha, título, invitado, botón play y resumen breve.
- **Top Guests gallery**: grid de 3 columnas, cada ítem incluye foto redondeada, nombre en negrita y especialidad en gris. Hover aumenta escala `scale-105`.
- **Footer**: fondo #1a1a1a, enlaces de navegación en texto blanco, pequeño texto de copyright y email de contacto.

Requisitos técnicos:
- Usa Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configura `tailwind.config = {theme:{extend:{fontFamily:{inter:['Inter', 'sans-serif']}}}}`.
- Incluye pequeñas funciones JS para: toggle del menú móvil, animaciones on scroll (IntersectionObserver), y reproducción simulada del botón play (alert('Reproducir episodio')).
- Todo el HTML debe ser semántico (`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`). No copiar texto del original; generar contenido original en español, activo y sin jerga.
- Optimiza imágenes con atributos `loading="lazy"` y `srcset` placeholders.
- Asegura accesibilidad: `aria-label` en botones, contraste suficiente.

Entrega solo el código completo listo para abrir en el navegador.

---

## 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.012 caracteres · 36 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 y enlaces de ancla, incluye botón de suscripción
1.2 Hero con título en mayúsculas dividido en líneas, información del día, hora y anfitrión
1.3 Widget del último episodio con número, título, invitado y botón de reproducción
1.4 Sección "Nuestro Anfitrión" con texto descriptivo, foto y enlaces a redes sociales
1.5 Lista de episodios recientes en formato de tarjetas con número, fecha, título, invitado y botón reproducir
1.6 Galería de "Top Guests" mostrando foto, nombre y especialidad de cada invitado
1.7 Footer con enlaces de navegación y datos de contacto

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: VivaStudio
Sector: Podcast sobre diseño y creatividad
Claim: Conversaciones que inspiran el proceso creativo

Bloques de la home

1.1 Barra de navegación fija con logo y enlaces de ancla, incluye botón de suscripción
1.2 Hero con título en mayúsculas dividido en líneas, información del día, hora y anfitrión
1.3 Widget del último episodio con número, título, invitado y botón de reproducción
1.4 Sección "Nuestro Anfitrión" con texto descriptivo, foto y enlaces a redes sociales
1.5 Lista de episodios recientes en formato de tarjetas con número, fecha, título, invitado y botón reproducir
1.6 Galería de "Top Guests" mostrando foto, nombre y especialidad de cada invitado
1.7 Footer con enlaces de navegación y datos de contacto

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

VivaStudio — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

Otros prompts de la misma categoría

Impulso Vital

Lámina Digital

Lúcida Visión

VozCripto