BELLEZA / SPA · Claude Design · HTML

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

★★★★★4,7 2.782 descargas

Organización sin ánimo de lucro que impulsa proyectos sociales y humanitarios Conectamos recursos y personas para crear oportunidades.

↓ 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) inspirándose en la estructura y estilo del template analizado. Utiliza HTML estático con Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Paleta de colores: #0A3D62 (azul profundo), #1ABC9C (verde esperanza), #F4F6F7 (gris claro), #FFFFFF (blanco). Tipografía: Inter (Google Fonts) para títulos y texto, peso 400‑700. 

HEADER: barra de navegación fija, fondo blanco, logo a la izquierda (placeholder SVG), enlaces: Home, Sobre nosotros, Programas, Donar, Blog, Contacto; botón CTA a la derecha "Apoya" con fondo #1ABC9C y texto blanco. Menú responsive con hamburguesa.

HOME se construye en bloques numerados:
1.1 Hero: sección full‑width con fondo degradado azul‑verde, título grande en Inter Bold, subtítulo en gris, botón CTA "Conectar" fondo #1ABC9C.
1.2 Estadísticas: 4 columnas, cada una con icono (SVG), número grande en azul y descripción corta en gris.
1.3 Programas destacados: grid 3‑col, tarjetas con imagen de fondo, overlay semitransparente, título y botón "Más".
1.4 Testimonios: carrusel horizontal (implementar con overflow‑x‑auto), tarjetas con foto circular, cita y nombre.
1.5 Suscripción: sección con fondo gris claro, formulario inline (email + botón "Suscribirme").
1.6 Footer: fondo #0A3D62, columnas: Navegación, Enlaces útiles, Contacto (email, teléfono), redes sociales (iconos SVG). Texto en blanco y enlaces con hover #1ABC9C.

PÁGINAS adicionales siguen la misma estructura global (header y footer) y contienen los bloques descritos en la tabla.

Requisitos técnicos: 
- Incluir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">.
- Tailwind CDN: <script src="https://cdn.tailwindcss.com"></script> con configuración de colores personalizada.
- JS para el menú móvil y el carrusel de testimonios (clase toggle, scroll smooth).
- Código completamente autocontenido, sin dependencias externas más allá de Tailwind y Google Fonts.
- Utilizar atributos ARIA para accesibilidad.
- Optimizar para dispositivos móviles y escritorio.

Entrega el código listo para copiar‑pegar en un archivo index.html que reproduzca fielmente la experiencia visual y la jerarquía de contenidos descrita.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero principal con título, subtítulo y botón CTA
1.2 Estadísticas clave en bloques con iconos
1.3 Área de programas destacados en tarjetas con imagen y breve descripción
1.4 Testimonios en carrusel horizontal
1.5 Llamado a suscribirse al boletín con formulario simple
1.6 Footer con navegación, contactos y redes sociales

ABOUT US

1.1 Mensaje institucional con imagen de cabecera
1.2 Historia de la organización en dos columnas
1.3 Valores y misión en tarjetas con iconos
1.4 Equipo destacado en cuadrícula
1.5 Footer

PROGRAMS

1.1 Lista de programas con imagen, título y breve descripción
1.2 Filtro por categoría
1.3 Botón “Conocer más” bajo cada tarjeta
1.4 Footer

DONATE

1.1 Formulario de donación con montos predefinidos y opción personalizada
1.2 Testimonios de beneficiarios
1.3 Información de transparencia y uso de fondos
1.4 Footer

BLOG

1.1 Grid de artículos con imagen, título y extracto
1.2 Paginación al fondo
1.3 Sidebar con categorías y archivo
1.4 Footer

CONTACT US

1.1 Mapa integrado
1.2 Formulario de contacto (nombre, email, mensaje)
1.3 Información de oficina y teléfonos
1.4 Footer

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Manos Unidas
Sector: Organización sin ánimo de lucro que impulsa proyectos sociales y humanitarios
Claim: Conectamos recursos y personas para crear oportunidades

Bloques de la home

1.1 Hero principal con título, subtítulo y botón CTA
1.2 Estadísticas clave en bloques con iconos
1.3 Área de programas destacados en tarjetas con imagen y breve descripción
1.4 Testimonios en carrusel horizontal
1.5 Llamado a suscribirse al boletín con formulario simple
1.6 Footer con navegación, contactos 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