NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web completa para la marca ficticia "NexoSabio" (plataforma de artículos y recursos) usando sólo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo.
REQUISITOS GENERALES:
- Utiliza la paleta de colores: #0D0D0D (fondo principal), #FFFFFF (texto), #1A73E8 (acentos y botones), #F5F5F5 (fondos de tarjetas), #E0E0E0 (borde de inputs).
- Tipografía: "Inter" para títulos y texto, peso 400‑600, cargada desde Google Fonts.
- Estructura responsive (mobile‑first), con breakpoints Tailwind md y lg.
- Todas las interacciones (menú hamburguesa, accordion FAQ, envío de formulario simulado) en JavaScript vanilla.
SECCIONES:
1. HEADER (navbar) fija, con logo ficticio (texto "NexoSabio" en Inter bold, color #1A73E8), enlaces: Temas, Blog, Comunidad, FAQ, Contacto. En móvil, col
4.024 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.024 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 Barra de navegación fija con logo, enlaces principales y botón de acceso a la comunidad
- 1.2 Hero con título, subtítulo y campo de búsqueda central
- 1.3 Cuadrícula de tarjetas de categorías (icono + título)
- 1.4 Galería de artículos destacados en tarjetas horizontales
- 1.5 Bloque de FAQ con accordión interactivo
- 1.6 Formulario de contacto rápido
- 1.7 Footer con enlaces a recursos, redes y datos de contacto
CATEGORIAS
- 2.1 Lista de categorías en cuadrícula, cada una con icono y nombre
- 2.2 Paginación simple al final de la lista
ARTICULOS
- 3.1 Cabecera del artículo con título, autor y fecha
- 3.2 Contenido en bloques tipográficos, imágenes y citas
- 3.3 Sidebar con artículos relacionados y etiquetas
FAQ
- 4.1 Preguntas frecuentes en lista accordion
CONTACTO
- 5.1 Formulario con campos nombre, email, asunto y mensaje
- 5.2 Mensaje de confirmación tras envío
FOOTER
- 6.1 Enlaces institucionales, redes sociales y suscripción al boletín
- 6.2 Información legal y copyright
Imagen generada con OpenAI · gpt-image-2 · 30/06/2026
PROMPTS RELACIONADOS · TECNOLOGÍA