EDUCACIÓN · Claude Design · HTML

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

★★★★★4,6 4.525 descargas

Organización sin ánimo de lucro que impulsa proyectos de ayuda humanitaria y medioambiental Conectar recursos y acciones para generar impacto real.

↓ 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 "Manos Unidas" (manosunidas.org), una ONG que conecta recursos y acciones para generar impacto real. El proyecto debe ser un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. Replicar la estructura y estética del diseño analizado:

- **Paleta de colores**: #0A3D62 (azul profundo), #1B9CFC (azul brillante), #F5F6FA (gris muy claro), #FFFFFF (blanco), #576574 (gris medio) para texto.
- **Tipografía**: "Inter" para títulos y párrafos, pesos 400‑600, importada desde Google Fonts.
- **Header**: barra de navegación fija, logo a la izquierda, menú principal con enlaces (Inicio, Sobre Nosotros, Programas, Historias, Contacto) y dropdowns para secciones internas, botón CTA "Contactar" a la derecha. Adaptativo: colapso a hamburguesa en móvil.
- **Hero**: sección a pantalla completa con título grande ("Impacto real, acciones concretas"), subtítulo y dos botones CTA ("Conocer más" y "Donar ahora"). A la derecha, un carousel estático que muestre tres capturas de pantalla de versiones de la home.
- **Bloque de confianza**: encabezado "Colaboradores que confían en nosotros", párrafo breve y grid de 4‑6 logotipos de socios (usar placeholders).
- **Footer**: fondo gris oscuro, cuatro columnas: (1) Enlaces rápidos, (2) Información legal, (3) Contacto (email, teléfono), (4) Redes sociales con íconos SVG.
- **Páginas internas** (simuladas como secciones dentro del mismo HTML con anclas): About Us, Programs, Success Stories, Contact Us. Cada una repite el header y footer y contiene:
  - Banner interior con título y descripción.
  - Contenido principal estructurado en tarjetas o columnas según la sección.
  - CTA al final.
- **Interactividad**: menú dropdown, hamburguesa mobile, scroll suave a anclas, carrusel hero con autoplay simple (JS), formulario de contacto con validación básica (campo obligatorio).
- **Accesibilidad**: atributos aria‑label, roles apropiados, contraste adecuado.
- **SEO**: meta tags básicos, título dinámico por sección.
- **Responsividad**: usar clases Tailwind para adaptar columnas y tipografía a móvil, tablet y desktop.

Genera todo el HTML, los estilos Tailwind y los scripts necesarios dentro del mismo archivo, sin referencias externas a archivos locales. Asegúrate de que el código sea limpio y comentado para facilidad de mantenimiento.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú principal con dropdowns y botón “Contactar”.
1.2 Hero: título principal, descripción breve y botones CTA, junto a presentación gráfica de diferentes versiones de la página de inicio.
1.3 Sección de confianza: encabezado, párrafo introductorio y grid de logotipos de colaboradores.
1.4 Footer: columnas con enlaces institucionales, información de contacto y iconos de redes sociales.

ABOUT US

1.1 Cabecera idéntica a la Home.
1.2 Banner interior con título y descripción.
1.3 Texto descriptivo de la misión y visión, acompañado de imágenes.
1.4 Equipo destacado en tarjetas.
1.5 Footer igual que Home.

PROGRAMS

1.1 Cabecera.
1.2 Banner interior.
1.3 Lista de programas en tarjetas con imagen, título y breve descripción.
1.4 CTA para donar o participar.
1.5 Footer.

SUCCESS STORIES

1.1 Cabecera.
1.2 Banner interior.
1.3 Galería de historias de éxito con tarjetas y enlaces a detalle.
1.4 Footer.

CONTACT US

1.1 Cabecera.
1.2 Banner interior.
1.3 Formulario de contacto (nombre, email, asunto, mensaje) y mapa embebido.
1.4 Footer.

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Manos Unidas
Sector: Organización sin ánimo de lucro que impulsa proyectos de ayuda humanitaria y medioambiental
Claim: Conectar recursos y acciones para generar impacto real

Bloques de la home

1.1 Cabecera fija con logo, menú principal y botón de contacto
1.2 Hero con título grande, subtítulo y carrusel de imágenes de ejemplo
1.3 Bloque de clientes / colaboradores con encabezado y grid de logos
1.4 (continúa…) Footer con enlaces, 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