MODA · Claude Design · HTML

AudioNova — Prompt de diseño web para Claude AI

★★★★★4,7 3.894 descargas

Plataforma para podcasters y creadores de contenido de audio Tu estudio digital, sin complicaciones.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "AudioNova" (dominio audionova.com, email hola@audionova.com, claim "Tu estudio digital, sin complicaciones"). El proyecto será un único archivo HTML que use Tailwind CSS vía CDN y JavaScript vanilla sin dependencias externas. Reproduce fielmente la estructura y estilo visual del sitio analizado, sin copiar textos ni imágenes originales.

- Paleta de colores: #0D0D0D (fondo principal), #FFFFFF (texto principal), #1DB954 (acento verde), #F5F5F5 (fondos secundarios), #E0E0E0 (bordes y sombras).
- Tipografía: Inter var para títulos y cuerpo, peso 400‑700, tamaños responsivos (h1 48px, h2 36px, h3 24px, p 16px).
- Header: barra fija, logo a la izquierda, menú horizontal con enlaces Home, About, Episodes, Packages, Blog, Contact y un dropdown con sub‑links (Host, Sponsors, Reviews). A la derecha, ícono de carrito mostrando cantidad.
- Hero: sección full‑width con fondo degradado verde‑oscuro, título grande, subtítulo, botón primaria "Comienza ahora" (verde) y secundaria "Ver paquetes" (blanco con borde).
- Sección paquetes: grid de 3 cards, cada una con nombre del plan, precio ficticio, lista de características y botón CTA.
- Sección últimos episodios: grid 3 columnas, cada tarjeta muestra imagen placeholder, título, fecha y botón "Escuchar".
- Testimonios: carrusel simple (JS) con 3 bloques de texto, avatar placeholder y nombre.
- Blog destacado: lista de 3 artículos con miniatura, título y extracto.
- Footer: fondo #0D0D0D, columnas con enlaces de navegación, redes sociales (iconos SVG), y formulario de suscripción al newsletter (campo email y botón).
- Todas las páginas (Home, About, Episodes, Packages, Blog, Contact) siguen la misma cabecera y pie, con contenido interno según la tabla proporcionada.
- Implementa interacción: menú responsive (hamburger en móvil), dropdowns, carrusel de testimonios, apertura del carrito modal (vacío), formulario de newsletter con validación básica.
- Incluye meta tags básicos, favicon placeholder y atributos accesibles (aria‑labels, roles).
- No incluyas ningún contenido literal del sitio original; usa copy original en español de España.

Entrega 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>
```

2.558 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú principal y carrito
1.2 Hero con título, subtítulo y botones CTA
1.3 Sección paquetes destacados
1.4 Lista de últimos episodios
1.5 Testimonios rotativos
1.6 Blog destacado
1.7 Footer con enlaces y newsletter

ABOUT

2.1 Header
2.2 Hero introductorio
2.3 Historia y valores
2.4 Equipo (cards)
2.5 CTA de contacto
2.6 Footer

EPISODES

3.1 Header
3.2 Listado de episodios (grid con filtros)
3.3 Reproductor destacado
3.4 CTA suscripción
3.5 Footer

PACKAGES

4.1 Header
4.2 Tabla comparativa de planes
4.3 Preguntas frecuentes
4.4 CTA compra
4.5 Footer

BLOG

5.1 Header
5.2 Grid de artículos
5.3 Sidebar con categorías y newsletter
5.4 Footer

CONTACT

6.1 Header
6.2 Formulario de contacto
6.3 Información de soporte
6.4 Mapa integrado
6.5 Footer

PROMPTS RELACIONADOS · MODA

Otros prompts de la misma categoría

Ficha de marca

Nombre: AudioNova
Sector: Plataforma para podcasters y creadores de contenido de audio
Claim: Tu estudio digital, sin complicaciones

Bloques de la home

1.1 Header con logo, menú principal y carrito
1.2 Hero con título, subtítulo y botones CTA
1.3 Sección de paquetes destacados (cards con precio y botón)
1.4 Lista de últimos episodios (grid con imagen, título, fecha)
1.5 Testimonios rotativos
1.6 Blog destacado (lista de artículos)
1.7 Footer con enlaces de navegación, redes y formulario de newsletter

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