SAAS / STARTUP · Claude Design · HTML

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

★★★★★4,6 924 descargas

Plataforma digital para podcasts y contenidos de audio Espacio donde las ideas cobran sonido.

↓ 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 EcoVoz Studios, una plataforma SaaS orientada a podcasters, usando HTML estático en un solo archivo, Tailwind CSS vía CDN y JavaScript vanilla. Mantén la estructura y patrones visuales del sitio analizado: 
- **Paleta de colores**: fondo blanco #FFFFFF, negro para texto #000000, azul profundo para acentos #1E3A8A, gris claro para bordes #E5E7EB, azul claro para hover #3B82F6. 
- **Tipografía**: encabezados con 'Inter' (font‑family: Inter, sans‑serif, weight 700), cuerpo con 'Inter' regular 400. 
- **Header**: barra fija, logo a la izquierda (texto EcoVoz Studios en azul profundo), menú de navegación dividido en tres columnas con enlaces simulados (Inicio, Sobre, Episodios, Hosts, Blog, Contacto, Guía de estilo, Licencias, Cambios). Botón hamburguesa para móvil que abre overlay con los mismos enlaces. 
- **Hero**: contenedor central con título grande ("Espacio donde las ideas cobran sonido"), párrafo descriptivo, botón primario azul profundo "Explorar" y botón secundario gris claro "Comprar plantilla" con íconos de flecha. A la derecha, una ilustración de dispositivos (macbook, tablet, móvil) con opacidad animada y bloque de métricas ("03 Creative Home Pages", "25+ Inner Page Layout"). 
- **Sección de versiones**: grid de tarjetas (3 columnas en desktop, 1‑2 en móvil) que enlazan a distintas versiones de página (Home V1‑V3, About V1‑V3, etc.). Cada tarjeta muestra una miniatura, borde gris claro y nombre de la versión. 
- **Footer**: fondo gris muy claro #F9FAFB, enlaces rápidos a "Style Guide", "Licensing", "Changelog" con botón estilo secundario y flecha. 
- **Interactividad**: menú hamburguesa abre/cierra overlay con transición suave (opacity 0‑1, translateY), botones con efecto hover (cambio de fondo a azul claro). 
- **Requisitos técnicos**: 
  * Incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio. 
  * Añadir `font-family: 'Inter', sans-serif;` mediante `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">`. 
  * Todo el CSS debe generar clases de Tailwind; no usar estilos en línea salvo para imágenes. 
  * JavaScript debe manejar el toggle del menú móvil y la animación de los iconos de flecha. 
  * Estructura semántica con `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`. 
  * El archivo resultante debe ser autocontenido, listo para abrir en el navegador sin dependencias externas más allá de los CDN indicados.

Genera el código completo siguiendo estas indicaciones.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú multi‑columna y botón hamburguesa
1.2 Hero con título, párrafo y botones primaria/ secundaria
1.3 Visual de dispositivos (macbook, tablet, phone) y bloque de métricas
1.4 Sección de enlaces a versiones de Home (3 tarjetas)
1.5 Sección de enlaces a versiones de About (3 tarjetas)
1.6 Footer con enlaces a Style Guide, Licensing y Changelog

ABOUT

1.1 Cabecera idéntica a la home
1.2 Hero adaptado a la página About (título, descripción, botón)
1.3 Galería de imágenes o testimonios (no presente en código fuente, pero implícito en versiones)
1.4 Footer igual al home

EPISODES

1.1 Cabecera
1.2 Listado de episodios con tarjetas (imagen, título, descripción, botón reproducir)
1.3 Paginación o carga infinita
1.4 Footer

HOSTS

1.1 Cabecera
1.2 Grid de presentaciones de hosts (foto, nombre, bio corta, enlace a redes)
1.4 Footer

BLOGS

1.1 Cabecera
1.2 Lista de artículos con imagen, título, extracto y botón leer más
1.4 Footer

CONTACT

1.1 Cabecera
1.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
1.4 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoVoz Studios
Sector: Plataforma digital para podcasts y contenidos de audio
Claim: Espacio donde las ideas cobran sonido

Bloques de la home

1.1 Cabecera fija con logo, menú principal de varias columnas y botón de apertura de menú móvil
1.2 Hero principal con título destacado, texto descriptivo y dos llamadas a la acción
1.3 Área de dispositivos simulados (Macbook, tablet, móvil) con recuento de recursos del sitio
1.4 Sección de navegación de versiones de página (Home, About, Episodes, etc.) mostrando miniaturas y nombres
1.5 Footer con enlaces a guías de estilo, licencias y cambios

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