BELLEZA / SPA · Claude Design · HTML

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

★★★★★4,8 3.466 descargas

Organización sin ánimo de lucro centrada en derechos humanos y justicia social Construimos posibilidades para todas las personas.

↓ 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 ONG ficticia **Manos Unidas** (manosunidas.org) usando **HTML estático + Tailwind CSS CDN + JavaScript vanilla** en un único archivo. Emplea la siguiente paleta de colores: #1E3A8A (azul principal), #F59E0B (ámbar accent), #F3F4F6 (gris claro fondo), #111827 (texto oscuro), #E5E7EB (borde/lineas). Tipografía: **Inter** para cuerpo y **Playfair Display** para títulos, cargadas desde Google Fonts.

Estructura del sitio:

1. **Header** fijo, con logo (texto "Manos Unidas" en Inter, peso 700), menú ancla (About, Impact, Alliances, FAQ, Contact) y botón secundario "Contáctanos" que ancla al formulario.
2. **Hero** a pantalla completa, fondo degradado azul‑ámbar, chip pequeño con texto "Empoderar y Cambiar", título h1 centrado: "Construimos posibilidades para todas las personas", botón primario "Haz una donación" (link externo #) y botón secundario "Conócenos" que lleva a la sección About. Incluye cuatro ilustraciones decorativas SVG posicionadas con transformaciones (rotación, traslación) similares al original.
3. **Sección vídeo**: contenedor con video de fondo auto‑reproducido, mute y loop; overlay semi‑transparente y título central "Historias que inspiran".
4. **About**: chip "Sobre Nosotros", título h2 con parte en color accent, cuadrícula 3‑col (responsive 2‑col móvil) de tarjetas. Cada tarjeta tiene título, párrafo corto y patrón de textura SVG con opacidad 0.25; alternar fondo entre #F3F4F6 y #E5E7EB.
5. **Impact**: fila de tres contadores animados (Beneficiarios, Proyectos, Voluntarios) con número grande en azul y descripción en gris oscuro. Debajo, gráfico circular simple creado con canvas que muestra distribución geográfica.
6. **Alliances**: carrusel horizontal de logos (imágenes placeholder) con breves textos y botón "Únete como aliado".
7. **FAQ**: lista de preguntas‑respuesta con efecto acordeón (toggle) usando JavaScript sencillo.
8. **Contact**: formulario de cuatro campos (nombre, email, asunto, mensaje) con validación básica, botón enviar, luego mapa estático usando una imagen placeholder y datos de contacto.
9. **Footer**: fondo gris oscuro, columnas con enlaces institucionales, redes sociales (iconos SVG para Facebook, Twitter, LinkedIn) y datos de la ONG.

Requisitos técnicos:
- Todas las secciones deben tener IDs para anclajes.
- Utiliza clases Tailwind para márgenes, paddings, flex, grid, tipografía y colores.
- Implementa la animación de los contadores con IntersectionObserver.
- El menú en móvil se despliega como overlay con botón de hamburguesa que cambia a ícono de cierre.
- Mantén el HTML semántico (header, main, section, footer, nav, article, etc.).
- Asegura accesibilidad: atributos alt en imágenes, aria‑labels en botones y formularios.
- Incluye meta tags básicos (charset, viewport, description) y enlaces a Google Fonts y Tailwind CDN.
- El archivo resultante debe ser autocontenido y listo para abrir en cualquier navegador sin dependencias externas más allá de los CDN mencionados.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú ancla y botón de contacto
1.2 Hero principal con frase motivadora, chips, botones primaria y secundaria y elementos decorativos
1.3 Sección vídeo de fondo a pantalla completa
1.4 Bloque "Sobre Nosotros" con chips, título y cuadrícula de tarjetas con imágenes y textos descriptivos
1.5 Bloque "Impacto" con contadores animados y gráficos sencillos
1.6 Bloque "Alianzas" con logos de socios y botón para colaborar
1.7 Sección FAQ con acordeón de preguntas frecuentes
1.8 Formulario de contacto con campos básicos y mapa ilustrativo
1.9 Footer con enlaces institucionales, redes sociales y datos de contacto

ABOUT

1.1 Título y sub‑título descriptivo
1.2 Texto de misión y visión
1.3 Galería de imágenes ilustrativas
1.4 Botón para descargar informe

IMPACT

1.1 Contadores animados (beneficiarios, proyectos, voluntarios)
1.2 Gráfica de distribución geográfica
1.3 Testimonios en carrusel

ALLIANCES

1.1 Logos de organizaciones colaboradoras
1.2 Breve descripción de cada alianza
1.3 Botón para unirse como aliado

FAQ

1.1 Lista de preguntas colapsables (8‑10 ítems)

CONTACT

1.1 Formulario (nombre, email, asunto, mensaje)
1.2 Mapa estático con pin de ubicación
1.3 Información de contacto (teléfono, email, dirección)

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Manos Unidas
Sector: Organización sin ánimo de lucro centrada en derechos humanos y justicia social
Claim: Construimos posibilidades para todas las personas

Bloques de la home

1.1 Header con logo, menú ancla y botón de contacto
1.2 Hero principal con frase motivadora, chips, botones primaria y secundaria y elementos decorativos
1.3 Sección vídeo de fondo a pantalla completa
1.4 Bloque "Sobre Nosotros" con chips, título y cuadrícula de tarjetas con imágenes y textos descriptivos
1.5 Bloque "Impacto" con contadores animados y gráficos sencillos
1.6 Bloque "Alianzas" con logos de socios y botón para colaborar
1.7 Sección FAQ con acordeón de preguntas frecuentes
1.8 Formulario de contacto con campos básicos y mapa ilustrativo
1.9 Footer con enlaces institucionales, redes sociales y datos de contacto

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

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

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

IMPACT

ALLIANCES

FAQ

CONTACT

Otros prompts de la misma categoría

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle