PODCAST · Claude Design · HTML

Voz Nómada — Prompt de diseño web para Claude AI

★★★★★4,7 641 descargas

Plataforma de podcasts y contenido de audio Conversaciones que cruzan fronteras.

↓ 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 para la marca ficticia "Voz Nómada" (podcast) usando solo HTML, TailwindCSS (CDN) y JavaScript vanilla en un único archivo. El objetivo es replicar fielmente el diseño visual y la estructura de la web analizada, sin copiar texto alguno.

**Paleta de colores**
- Fondo principal: #111111
- Fondo secundario (tarjetas): #1F1F1F
- Texto principal: #FFFFFF
- Texto secundario: #CCCCCC
- Accento botones/enlaces: #FF6A00
- Hover/acento suave: #FF8C33

**Tipografía**
- Font family: 'Inter', sans-serif para todo el cuerpo.
- Heading font weight: 700, size variable según Tailwind utilities.
- Body font weight: 400.

**Header**
- Barra de navegación fija, alto 64px, fondo #111111, borde inferior 1px #222222.
- Logo a la izquierda (svg placeholder). 
- Menú horizontal centrado con enlaces: About, Episodes, Reviews, Shop, Contact, Subscribe (botón destacado con bg #FF6A00, texto blanco). 
- Mini‑carrito a la derecha con icono y contador redondo #FF6A00.
- Responsivo: colapsa en hamburguesa (icono Tailwind). 

**Home – Sección a sección**
1. **Hero**: contenedor máximo 1080px, margen inferior 64px. Título grande (text-5xl md:text-6xl, texto blanco). Subtítulo (text-xl, color #CCCCCC). Reproductor centrado con imagen circular (aspect‑ratio 1/1, rounded‑xl) y botón reproducir estilo "play" con fondo #FF6A00.
2. **Sobre nosotros**: grid 2‑col (md) con foto a la izquierda (rounded‑lg) y texto a la derecha (párrafo, color #CCCCCC). Botón secundario "Más info" con borde #FF6A00.
3. **Episodios**: título de sección, grid de 3 tarjetas (md) each: imagen, título, duración, botón reproducir (bg #FF6A00). Tarjetas con sombra ligera y fondo #1F1F1F.
4. **Reseñas**: carrusel horizontal (simple JS) con tarjetas de cita, fondo #1F1F1F, texto blanco, nombre del oyente en cursiva.
5. **Tienda**: título, grid de 4 tarjetas de producto: imagen, nombre, precio, botón "Añadir al carrito" (bg #FF6A00). Carrito lateral (right‑sidebar) que se abre al hacer clic en icono del header, mostrando lista de productos, subtotal y botón "Continuar al checkout".
6. **Contacto**: formulario simple (nombre, email, mensaje) con inputs estilo Tailwind (border #222222, focus:border #FF6A00). Botón enviar bg #FF6A00.
7. **Suscripción**: fondo con degradado sutil (#111111 → #1F1F1F). Input email + botón "Suscribirme" (bg #FF6A00). Texto informativo bajo el campo.
8. **Footer**: fondo #111111, columnas: Navegación rápida, Enlaces de tienda, Redes sociales (iconos SVG con hover #FF8C33), datos legales y copyright. Texto color #777777.

**Interactividad**
- Menú hamburguesa toggles con JS simple (classList.toggle('hidden')).
- Carrito lateral abre/cierra mediante toggle de clase `-translate-x-full`.
- Carrusel de reseñas avanza automáticamente cada 5 s y permite navegación manual.
- Botones de "Añadir al carrito" actualizan contador del carrito en el header.
- Formulario de suscripción muestra alerta simple de éxito.

**Requisitos técnicos**
- Usa la CDN de TailwindCSS 3.x en `<head>`.
- Incluye Google Fonts link para Inter.
- Todo el CSS mediante clases Tailwind; evita estilos personalizados salvo los necesarios para animaciones (utiliza `@layer utilities` si es indispensable).
- JavaScript al final del cuerpo, encapsulado en IIFE para evitar contaminación global.
- Asegura accesibilidad: `aria-label` en iconos, contraste suficiente, foco visible.
- Optimiza imágenes con atributos `loading="lazy"` y `srcset` placeholders.
- El archivo final debe ser autocontenido y listo para abrirse en el navegador sin dependencias externas más allá de Tailwind y Google Fonts.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, navegación y mini‑carrito
1.2 Hero con título, descripción y reproductor de episodio destacado
1.3 Bloque "Sobre nosotros" con texto y foto
1.4 Lista de episodios recientes con tarjetas y botones reproducir
1.5 Reseñas de oyentes en carrusel
1.6 Tienda de productos con tarjetas de artículo
1.7 Formulario de contacto rápido
1.8 Llamada a la suscripción al newsletter
1.9 Pie de página con enlaces, redes sociales y datos legales

EPISODES

2.1 Grid de todos los episodios con filtros y paginación
2.2 Sidebar con categorías y búsqueda

CONTACT

3.1 Formulario completo (nombre, email, mensaje)
3.2 Mapa estático y datos de contacto

SHOP

4.1 Catálogo de productos en tarjetas
4.2 Filtro por tipo y precio
4.3 Carrito lateral con detalle y checkout sencillo

5.1 Formulario de suscripción al boletín
5.2 Mensaje de confirmación y política de privacidad

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: Voz Nómada
Sector: Plataforma de podcasts y contenido de audio
Claim: Conversaciones que cruzan fronteras

Bloques de la home

1.1 Cabecera fija con logo, navegación y mini‑carrito
1.2 Hero con título, descripción y reproductor de episodio destacado
1.3 Bloque "Sobre nosotros" con texto y foto
1.4 Lista de episodios recentess con tarjetas y botones reproducir
1.5 Reseñas de oyentes en carrusel
1.6 Tienda de productos con tarjetas de artículo
1.7 Formulario de contacto rápido
1.8 Llamada a la suscripción al newsletter
1.9 Pie de página con enlaces, redes sociales y datos legales

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

Voz Nómada — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

EPISODES

CONTACT

SHOP

SUBSCRIBE

Otros prompts de la misma categoría

Impulso Vital

Lámina Digital

Lúcida Visión

VozCripto