EDUCACIÓN · Claude Design · HTML

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

★★★★★4,6 4.121 descargas

Organización sin ánimo de lucro dedicada a proyectos sociales y medioambientales Impulsamos el cambio con cada acción.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web para la marca ficticia "Manos Unidas" (manosunidas.org), organización sin ánimo de lucro. Utiliza HTML estático con Tailwind CDN y JavaScript vanilla en un solo archivo. Emplea la paleta de colores principal: #1A5A96 (azul profundo), #F2F7FA (gris muy claro), #E0E7EF (gris suave), #FFB400 (amarillo brillante) y acentos #FFFFFF. Tipografía: Inter (sans serif) para encabezados y body, peso 400‑600.

HEADER: barra transparente pegada al top, logo a la izquierda, menú central (Home, About, Blog, Pages dropdown con enlaces ficticios, Contact), botón primario "Apoya nuestra causa" con fondo #FFB400 y borde redondeado, icono carrito que muestra número de ítems.

HERO: sección a pantalla completa con fondo de imagen de paisaje, superposición semitransparente #1A5A96/70%, título grande blanco, subtítulo gris claro, botones "Descubre" (outline blanco) y "Donar ahora" (relleno #FFB400).

SECCIÓN 1: Causas destacadas – grid 3‑columna, cada tarjeta con imagen, título, breve descripción y botón "Más información" (outline #1A5A96).

SECCIÓN 2: Contador de impacto – fondo #E0E7EF, 4 cifras grandes (voluntarios, proyectos, donaciones, impacto) animadas con countUp.js, texto descriptivo bajo cada número.

SECCIÓN 3: Testimonios – carrusel horizontal (simple JS), tarjeta con foto circular, nombre, cita, fondo blanco y sombra ligera.

SECCIÓN 4: Suscripción al boletín – formulario centrado con input email (borde #1A5A96) y botón "Suscribirse" (relleno #FFB400).

FOOTER: fondo #1A5A96, columnas: Contacto (dirección, email, teléfono), Enlaces rápidos (Home, About, Blog, Donar), Redes sociales (íconos SVG, color #FFB400 al hover), derechos reservados.

FUNCIONALIDAD: menú responsive (hamburger móvil), dropdown de Pages, carrito modal que muestra items (estructura simple), formulario de donación sin backend, carrusel automático, animación de contador al entrar en viewport.

Requisitos técnicos: usar Tailwind@3 vía CDN, incluir Inter desde Google Fonts, escribir todo el código en un único archivo index.html, evitar cualquier referencia al sitio original, generar contenido de texto totalmente original en español de España.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú principal, botón de donación y carrito emergente
1.2 Hero con fondo a pantalla completa, título, subtítulo y llamado a la acción
1.3 Bloque de causas destacadas en cuadrícula de tres columnas
1.4 Contador de impacto con números animados
1.5 Testimonios en carrusel sencillo
1.6 Llamado a la acción de suscripción al boletín
1.7 Footer con información de contacto, enlaces rápidos y redes sociales

ABOUT

2.1 Header replicado
2.2 Imagen grande con texto de misión
2.3 Valores en tarjetas
2.4 Equipo en grid de fotos
2.5 Footer replicado

DONATE

3.1 Header replicado
3.2 Hero con llamado a donar
3.3 Formulario de donación y opciones de monto
3.4 Testimonios de donantes
3.5 Footer replicado

BLOG

4.1 Header replicado
4.2 Lista de artículos en grid
4.3 Sidebar con categorías y archivo
4.4 Footer replicado

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Manos Unidas
Sector: Organización sin ánimo de lucro dedicada a proyectos sociales y medioambientales
Claim: Impulsamos el cambio con cada acción

Bloques de la home

1.1 Header con logo, menú principal, botón de donación y carrito emergente
1.2 Hero con fondo a pantalla completa, título, subtítulo y llamado a la acción
1.3 Bloque de causas destacadas en cuadrícula de tres columnas
1.4 Contador de impacto con números animados
1.5 Testimonios en carrusel sencillo
1.6 Llamado a la acción de suscripción al boletín
1.7 Footer con información de contacto, enlaces rápidos 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