NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La marca es **AyudaLibre**, una plataforma SaaS de soporte. Usa la siguiente paleta de colores (hex): #0F172A (azul oscuro fondo), #1E40AF (azul primario), #3B82F6 (azul accent), #F9FAFB (gris muy claro fondo hero), #111827 (texto principal), #6B7280 (texto secundario). Tipografía: Inter (Google Fonts) para títulos y texto, peso 400‑600.
**Estructura**
1. **Header** (fixed, full‑width) con logo (texto "AyudaLibre" en color primario), barra de búsqueda central, menú mega‑dropdown que muestra tres columnas: "Inicio", "Páginas" (Home v1‑v3, FAQ, Changelog, Support) y "Utilidades" (Styleguide, 404, Licencias). En versión móvil, colapsa a ícono de hamburguesa.
2. **Hero** (altura 80vh, fon
4.007 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.007 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 Header con logo, barra de búsqueda y menú mega‑dropdown
- 1.2 Hero principal con título, descripción y botones CTA
- 1.3 Galería de vistas previas de páginas (grid de imágenes enlazadas)
- 1.4 Sección "Qué incluye" con título y cards de métricas
- 1.5 Footer con enlaces de navegación, copyright y redes sociales
CHANGES
- 1.1 Header reutilizado (logo, barra de búsqueda, menú)
- 1.2 Título y subtítulo descriptivo
- 1.3 Grid responsive de imágenes con enlaces a demos
- 1.4 Grid de tres cards con íconos y cifras (páginas, secciones, componentes)
- 1.5 Footer con bloques de enlaces y datos de contacto
SUPPORT
- 1.1 Header idéntico
- 1.2 Título centrado y párrafo explicativo
- 1.3 Formulario de búsqueda interno
- 1.4 Lista de preguntas frecuentes en accordion
- 1.5 Footer común
FAQ
- 1.1 Header estándar
- 1.2 Breadcrumbs de navegación
- 1.3 Pregunta + respuesta en layout card
- 1.4 CTA a documentación adicional
- 1.5 Footer estándar
CHangelog
- 1.1 Header estándar
- 1.2 Lista de versiones con fechas y notas breves
- 1.3 Botón de descarga de notas
- 1.4 Footer estándar
PROMPTS RELACIONADOS · EDUCACIÓN
