NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Data Vega, 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 Data Vega 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
4.093 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.093 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
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
