Carrito Iniciar sesión
TECNOLOGÍA · Claude Design · HTML

AulaViva — Prompt de diseño web para Claude AI

Plataforma educativa online para cursos y eventos Aprende y comparte sin límites.

↓ Descargar PROMPT.md
+0
0 0
GRATIS 0€
AulaViva — vista previa
NUEVO PROMPT
PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md
Crea un sitio web completo para la marca ficticia "AulaViva" (plataforma educativa online) usando solo HTML, Tailwind CSS desde CDN y JavaScript vanilla en un único archivo. La web debe incluir las siguientes páginas y secciones siguiendo fielmente la estructura y estilo del sitio analizado: **General** - Paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul), #F3F4F6 (gris claro), #FFFFFF (blanco), #111827 (negro profundo) para modo oscuro. Implementa modo claro/oscuro con una clase en el <html> que pueda cambiarse. - Tipografía: Inter (sans‑serif) para cuerpo y headings, peso 400‑700. - Utiliza Tailwind CDN y configúralo con "fontFamily: { inter: ['Inter', 'sans-serif'] }". - Header fijo con logo (texto "AulaViva") y menú de navegación: Home, Cursos (dropdown con columnas: Diseño, Ges
4.484 caracteres · solo descargable completo ↓ Descargar PROMPT.md completo
4.484 caracteres · licencia libre Solo descarga completa disponible
CLAUDE DESIGN

Convierte este prompt en diseño real

Instala Claude Design, pega el prompt y ve la interfaz cobrar forma al instante.

Instalar Claude Design ↗
CAPTURA COMPLETA · HOME
AulaViva — home completa
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 logotipo y menú de navegación con dropdowns multi‑columna
  • 1.2 Botón destacado de llamada a acción "Get template"
  • 1.3 Bloque de hero con título y subtítulo en modo claro/oscuro
  • 1.4 Menú secundario "Courses" con dropdown de categorías
  • 1.5 Cuadrícula de tarjetas de curso con imagen, etiqueta y título
  • 1.6 Footer minimalista con enlaces de soporte y redes sociales

COURSES

  • 2.1 Cabecera reutilizada
  • 2.2 Lista de filtros por categoría
  • 2.3 Grid de tarjetas de curso (imagen, tag, título, breve descripción)
  • 2.4 Paginación simple

ABOUT

  • 3.1 Cabecera reutilizada
  • 3.2 Sección de historia con imagen y texto
  • 3.3 Equipo con tarjetas de perfil
  • 3.4 Valores en columnas con iconos

CONTACT

  • 4.1 Cabecera reutilizada
  • 4.2 Formulario de contacto (nombre, email, mensaje, botón)
  • 4.3 Mapa embebido
  • 4.4 Información de contacto y redes sociales
PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría