EDUCACIÓN · Claude Design · HTML

Armonía Cultural — Prompt de diseño web para Claude AI

★★★★★4,8 3.878 descargas

Plataforma digital para asociaciones y fundaciones culturales Conecta historia y comunidad en un solo espacio.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia **Armonía Cultural** (dominio: armoniacultural.com) usando **HTML estático + Tailwind CSS CDN + JavaScript vanilla** en un solo archivo. La web debe reproducir el diseño analizado: 

- **Paleta de colores**: #212529 (gris oscuro), #F5A623 (ámbar vibrante), #FFFFFF (blanco), #EAEAEA (gris claro) y acentos en #FFEB3B (amarillo). 
- **Tipografía**: `Inter`, sans‑serif para cuerpos y títulos; usar `font-medium` para encabezados y `font-light` para párrafos. 
- **Header**: barra de navegación fija con logo (SVG placeholder), menú mega‑dropdown con tres columnas, enlaces a Home, Demos, Sobre nosotros, Eventos, Programas, Todas las páginas y botón CTA “Únete a la comunidad”. Menú colapsable en móvil con icono hamburger. 
- **Hero**: sección de ancho completo con fondo de imagen difusa, título grande (h1) y subtítulo, ambos con animación de fade‑in. 
- **Sección 1 – Demos**: cuadrícula de tres tarjetas, cada una con captura de pantalla, overlay al pasar el cursor y texto “Home X”. Enlace a cada demo. 
- **Sección 2 – Performance**: grid de 4 ítems, cada uno muestra una métrica (Google PageSpeed, Performance Grade, PageSpeed Score, GTmetrix YSlow) con barra de progreso animada del 0% al valor indicado (95, 92, 97, 88). 
- **Sección 3 – Características clave**: 4 bloques con icono (usar Font Awesome), título y breve descripción. Primer bloque incluye mailto a hello@armoniacultural.com. 
- **Footer**: fondo gris oscuro, columnas con enlaces de navegación, información de contacto y botones de redes sociales (SVG). 
- **Interactividad**: dropdowns en hover (desktop) y click (mobile), animaciones de entrada con `transition-opacity` y `transform`, barra de progreso que se llena al hacer scroll a la sección. 
- **Accesibilidad**: atributos `aria-label`, contraste adecuado, foco visible en enlaces y botones. 
- **Responsividad**: diseño adaptable desde móvil (colapsado) hasta escritorio (grid de 4 columnas en features). 

Genera todo el código listo para copiar‑pegar, sin dependencias externas más allá de Tailwind CDN y Font Awesome CDN. Incluye comentarios claros donde sea necesario.

---

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

2.498 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ú mega‑dropdown y botón CTA
2.1 Hero principal con título, subtítulo y fondo ilustrativo
3.1 Bloque de demos de inicio (tarjetas con captura y enlace)
4.1 Métricas de performance (barras de progreso)
5.1 Características clave (iconos + texto)
6.1 Footer informativo con enlaces y datos de contacto

ABOUT US

1.1 Cabecera interna con breadcrumb
2.1 Imagen destacada y descripción de la asociación
3.1 Valores y misión en formato de tarjetas
4.1 Equipo destacado con foto y rol
5.1 CTA a suscripción de newsletter

MEMBERSHIP

1.1 Cabecera con título de membresía
2.1 Planes en tabla comparativa
3.1 Beneficios destacados en lista con iconos
4.1 Formulario de registro rápido
5.1 Testimonios rotativos

EVENTS

1.1 Lista de eventos próximos con filtro por categoría
2.1 Tarjetas de evento con imagen, fecha y descripción corta
3.1 Calendario interactivo embed
4.1 CTA a compra de entradas

PROGRAMS

1.1 Cuadrícula de programas culturales
2.1 Detalle expandible de cada programa
3.1 Botón de descarga de material

MEDIA

1.1 Galería de fotos y videos en estilo masonry
2.1 Filtros por tipo de contenido
3.1 Lightbox para visualización

BLOG

1.1 Lista de artículos con imagen destacada y extracto
2.1 Paginación y filtro por etiquetas
3.1 Sidebar con últimos posts y suscripción

CONTACT US

1.1 Formulario de contacto con campos básicos
2.1 Mapa incrustado
3.1 Información de contacto y redes sociales

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Armonía Cultural
Sector: Plataforma digital para asociaciones y fundaciones culturales
Claim: Conecta historia y comunidad en un solo espacio

Bloques de la home

1.1 Barra de navegación fija con logo, menú mega‑dropdown y botón de llamado a la acción "Únete a la comunidad"
2.1 Hero principal con título destacado, subtítulo y imagen de fondo
3.1 Bloque de presentación de demos de inicio (tres tarjetas con captura de pantalla)
4.1 Sección de métricas de performance con barras de progreso animadas
5.1 Cuadrícula de características clave con iconos y descripciones
6.1 Footer con enlaces de 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