EDUCACIÓN · Claude Design · HTML

Cumbre Campus — Prompt de diseño web para Claude AI

★★★★★4,9 2.610 descargas

Institución educativa universitaria Conectamos saber y comunidad.

↓ 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 "Cumbre Campus" (dominio cumbrecampus.com) usando sólo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La web debe replicar el diseño institucional universitario analizado: 
- **Paleta de colores**: #1F3A69 (azul marino), #2E5A9A (azul medio), #F5F7FA (gris muy claro), #FFFFFF (blanco), #E0E7EF (gris suave) y acentos #FFB400 (amarillo dorado). 
- **Tipografía**: Fuente principal "Inter" para títulos y cuerpo, peso 400/600, tamaños escalables (h1 48px, h2 36px, h3 28px, cuerpo 16px). 
- **Header**: barra sticky con logo a la izquierda, menú principal con enlaces Home, Program, About Us, Contact Us y un dropdown "Pages" que muestra enlaces a secciones internas (Program, Enrollment, News, Event, Research, Notice, Style Guide, Licenses, Changelog, Login, Sign up). Botón de menú responsive para móvil. 
- **Hero**: sección amplia con fondo degradado azul‑gris, título grande, subtítulo descriptivo y botón CTA "Conócenos". Imagen decorativa a la derecha. 
- **Bloques de la home**: 
  1. Programas destacados – grid de 3 tarjetas, cada una con imagen, título, breve texto y botón "Más info". 
  2. Noticias del campus – lista de 3 tarjetas horizontales, imagen, título, fecha y resumen. 
  3. Próximos eventos – tarjetas con fecha resaltada, título y botón "Registrarse". 
  4. Investigación – tarjetas con ícono, título y enlace "Ver detalle". 
  5. Inscripción rápida – formulario inline (nombre, email, teléfono) y botón "Solicitar información". 
- **Footer**: fondo gris claro, columnas con enlaces institucionales (Sobre nosotros, Programas, Admisión, Contacto), datos de contacto (dirección, email, teléfono) y iconos de redes sociales (Facebook, Twitter, LinkedIn). 
- **Interactividad**: dropdowns y menú móvil con toggles via JavaScript, carrusel simple para noticias (autoplay y controles), smooth scroll para anclajes. Todos los componentes deben ser accesibles (aria‑labels, focus states). 
- **Estructura de páginas**: generar plantillas para Home, About Us, Contact Us, Program, Enrollment, News, Event, Research, Notice y Utilities (Style Guide, Licenses, Changelog, Login, Sign up). Cada página reutiliza header y footer y contiene bloques descritos en la tabla. 
- **Requisitos técnicos**: incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">` y `<script>` al final del body para manejar toggles y carrusel. Usar clases utilitarias de Tailwind para spacing, tipografía, colores y responsividad. No usar librerías externas aparte de Tailwind CDN. Mantener el código limpio, con comentarios que identifiquen cada sección. Entregar todo el HTML en un único archivo listo para abrir en el navegador.

---

## 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>
```

3.079 caracteres · 32 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menú desplegable y enlaces rápidos
1.2 Hero principal con título, texto de apoyo y botón CTA
1.3 Programas destacados en tarjetas horizontales
1.4 Noticias del campus en cuadrícula responsive
1.5 Próximos eventos en tarjetas con fecha y botón
1.6 Investigación y proyectos con descripción corta y enlace
1.7 Formulario de inscripción rápido
1.8 Footer con información de contacto, enlaces útiles y redes sociales

ABOUT US

1.1 Encabezado interno con imagen de cabecera
1.2 Texto institucional sobre la historia y misión
1.3 Equipo docente en tarjetas de perfil
1.4 Valores y visión en bloques icónicos

CONTACT US

1.1 Mapa integrado y datos de ubicación
1.2 Formulario de contacto completo (nombre, email, mensaje)
1.3 Horario de atención y números telefónicos

PROGRAM

1.1 Lista de programas de estudio con filtros por nivel
1.2 Tarjetas de programa con título, breve descripción y botón de detalle

ENROLLMENT

1.1 Paso a paso del proceso de matrícula
1.2 Formulario de solicitud de información

NEWS

1.1 Lista de artículos de noticias en formato tarjeta
1.2 Paginación o carga incremental

EVENT

1.1 Calendario de eventos con tarjetas de detalle
1.2 Formulario de registro a eventos

RESEARCH

1.1 Galería de proyectos de investigación con filtros
1.2 Tarjetas con resumen y enlace a detalle

NOTICE

1.1 Tablero de avisos internos en lista
1.2 Enlaces a documentos adjuntos

UTILITIES

1.1 Guía de estilo (colores, tipografías, componentes)
1.2 Licencias y changelog
1.3 Acceso a login y registro de usuarios

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Cumbre Campus
Sector: Institución educativa universitaria
Claim: Conectamos saber y comunidad

Bloques de la home

1.1 Barra de navegación fija con logo, menú principal y enlaces a programa y páginas; 1.2 Hero con título, subtítulo y botón CTA; 1.3 Sección de programas destacados en tarjetas con imagen y breve descripción; 1.4 Bloque de noticias recientes con carrusel o grid; 1.5 Área de eventos próximos con tarjetas y fechas; 1.6 Sección de investigación y proyectos con listado y botones de leer más; 1.7 Llamado a inscripción con formulario breve; 1.8 Footer con enlaces institucionales, contacto y redes sociales.

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