TECNOLOGÍA · Claude Design · HTML

Manos Unidas — Prompt de diseño web para Claude AI

★★★★★4,7 571 descargas

Organización sin ánimo de lucro dedicada a la ayuda humanitaria y proyectos sociales Construimos futuro con pequeñas acciones.

↓ 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 "Manos Unidas" (manosunidas.org), una ONG sin ánimo de lucro. Usa únicamente HTML, TailwindCSS vía CDN y JavaScript vanilla en un solo archivo.

**Paleta de colores**: Primary #2C3E50, Accent #E74C3C, Light #F5F5F5, Dark #0A0A0A, White #FFFFFF.
**Tipografía**: fuente principal "Inter" desde Google Fonts, peso 400 y 600.

**Header**: barra superior fija con fondo Light, incluye mensaje “¡Ayúdanos a cambiar vidas!”, enlace a página de voluntariado y datos de contacto (email info@manosunidas.org, teléfono +34 123 456 789). Debajo, barra de navegación con logo (texto "Manos Unidas" en Primary), menú Home, About, Causes, Events, Blog, Contact y botón destacado "Donar ahora" en Accent.

**Footer**: fondo Dark, cuatro columnas: 1) Logo y breve descripción, 2) Enlaces rápidos (Home, About, Causes, Events, Blog, Contact), 3) Datos de contacto (dirección genérica, email, teléfono), 4) Íconos de redes sociales (Facebook, Instagram, Twitter, LinkedIn) con efecto hover que cambia a Accent.

**Home sections** (numeradas según "secciones"):
1. **Hero**: contenedor full‑width con fondo Primary, título grande en White "Transformamos vidas juntos", subtítulo en Light, dos botones: "Descubre nuestras causas" (Secondary) y "Donar ahora" (Accent). Imagen decorativa a la derecha.
2. **Animación de imágenes**: carrusel automático de 5 imágenes representando acciones solidarias, con transición fade y control de navegación.
3. **Estadísticas**: grid de 4 cards con contadores animados (ej. "+5000 Voluntarios", "+1M€ Recaudados", "+300 Proyectos", "+2000 Beneficiarios"). Valores iniciales 0 y cuentan hasta el número usando JS.
4. **Causas destacadas**: rejilla de 3 columnas, cada tarjeta con imagen, título, breve descripción y botón "Apoyar" en Accent.
5. **Eventos próximos**: listado horizontal de tarjetas con foto, fecha, título y botón "Registrarse".
6. **Boletín**: sección con fondo Light, input de email y botón "Suscribirse" en Primary.

**Páginas internas**: About, Causes, Events, Donate, Volunteer, Blog, Contact – cada una con estructuras descritas en la tabla, reutilizando header y footer.

**Requisitos técnicos**:
- Todas las interacciones (menú móvil, carrusel, contadores, formulario) deben funcionar sin dependencias externas más allá de Tailwind CDN.
- Responsivo: usar breakpoints de Tailwind (sm, md, lg, xl) para adaptar layout.
- Incluir animaciones CSS para fades, hover y transiciones de botones.
- Código limpio, semántico (header, nav, main, section, footer).
- Comentarios breves que indiquen cada bloque.

Genera el archivo HTML completo listo para ser guardado como index.html.

---

## 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.006 caracteres · 44 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con enlace a voluntariado y datos de contacto
1.2 Menú de navegación principal con botón "Donar ahora"
1.3 Hero con título, subtítulo y botones de acción
1.4 Animación de imágenes rotativas que ilustra la labor de la organización
1.5 Cuadro de estadísticas con contadores animados
1.6 Sección de causas destacadas en tarjetas de tres columnas
1.7 Área de eventos próximos con listado resumido
1.8 Llamada a la acción para suscribirse al boletín
1.9 Footer con enlaces institucionales, datos de contacto y redes sociales

ABOUT

2.1 Encabezado con foto hero y texto institucional
2.2 Historia de la organización en bloques de texto e imágenes
2.3 Equipo con tarjetas de perfil
2.4 Valores y misión en iconos
2.5 Footer

CAUSES

3.1 Listado de causas en rejilla de tarjetas
3.2 Filtros por categoría
3.3 Botón para aportar a cada causa
3.4 Footer

EVENTS

4.1 Calendario de eventos destacando próximos
4.2 Tarjetas de evento con foto, fecha y botón registrar
4.3 Footer

DONATE

5.1 Formulario de donación rápido con importe predefinido
5.2 Opciones de pago y mensaje de agradecimiento
5.3 Footer

VOLUNTEER

6.1 Formulario de solicitud de voluntariado
6.2 Información de beneficios y requisitos
6.3 Footer

BLOG

7.1 Lista de artículos con imagen, título y extracto
7.2 Paginación y barra lateral de categorías
7.3 Footer

CONTACT

8.1 Formulario de contacto con mapa incrustado
8.2 Información de oficina y teléfono
8.3 Footer

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Manos Unidas
Sector: Organización sin ánimo de lucro dedicada a la ayuda humanitaria y proyectos sociales
Claim: Construimos futuro con pequeñas acciones

Bloques de la home

1.1 Barra superior con enlace a voluntariado y datos de contacto
1.2 Menú de navegación principal con botón "Donar ahora"
1.3 Hero con título, subtítulo y botones de acción
1.4 Animación de imágenes rotativas que ilustra la labor de la organización
1.5 Cuadro de estadísticas con contadores animados
1.6 Sección de causas destacadas en tarjetas de tres columnas
1.7 Área de eventos próximos con listado resumido
1.8 Llamada a la acción para suscribirse al boletín
1.9 Footer con enlaces institucionales, datos 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