BIENES RAÍCES · Claude Design · HTML

AyudaNube — Prompt de diseño web para Claude AI

★★★★★4,9 3.326 descargas

Plataforma de documentación y soporte técnico en línea Todo tu soporte a un clic.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático completo que reproduzca el diseño visual y la arquitectura de información del template de soporte "Docs" pero bajo la marca ficticia **AyudaNube**. Utiliza **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. 

**Paleta de colores** (extraída del original):
- Fondo principal: #111111
- Texto principal: #FFFFFF
- Texto secundario: #CCCCCC
- Acents primarios: #0EA5E9 (azul cielo) y #2563EB (azul intenso)
- Hover/active: #1E40AF

**Tipografía**: Inter (Google Font) para todo el texto, peso 400‑600.

**Header** (navbar, sticky, colapsable en móvil):
- Logo con imagen SVG placeholder y texto "AyudaNube" a su derecha.
- Barra de búsqueda centrada con placeholder "Buscar…" y botón de envío.
- Enlaces de navegación: Home, Changelog, Support y un botón secundario "Ir a Docs" (enlace externo). 
- Menú mega‑desplegable bajo "Pages" con tres columnas: "Hogares" (Home v1‑v3), "Páginas" (Category, FAQ, Changelog, Support) y "Utilidades" (Styleguide, 404, 401, Licencias, Empezar, Cambios). 
- En móvil, botón hamburguesa que muestra el mismo menú.

**Hero** (sección .hero-page, altura pantalla completa, fondo #111111):
- Título grande blanco: "AyudaNube".
- Subtítulo gris claro: "Plataforma completa de documentación y soporte 24/7".
- Botones: "Comprar plantilla" (estilo blanco con borde) y "Explorar páginas" (estilo secundario con fondo semi‑transparente). 
- Animaciones de aparición (opacity 0 → 1) al hacer scroll.

**Galería de versiones** (grid con enlaces a distintas home):
- Tarjetas con imagen placeholder de cada versión, borde redondeado y sombra ligera. 
- Cada tarjeta enlaza a su respectiva página (home‑v1.html, home‑v2.html, etc.).

**Bloque "Qué incluye AyudaNube"**: 
- Contenedor central con título "Qué incluye AyudaNube" y párrafo descriptivo resaltando número de páginas y secciones.

**Grid de características** (3‑columnas en escritorio, 1‑columna en móvil):
- Tarjeta 1: "7+ Páginas" con icono placeholder y número destacado en color acento.
- Tarjeta 2: "10+ Secciones" similar.
- Tarjeta 3: "Componentes interactivos" (formularios, búsqueda, dropdowns).
- Todas con fondo #1F2937 y hover que cambia el borde a #0EA5E9.

**Footer**: 
- Fondo #111111, texto gris claro, enlaces a Política de privacidad, Términos, Contacto y redes sociales (iconos SVG). 
- Pequeña barra inferior con copyright "© 2026 AyudaNube".

**Requisitos técnicos**:
- Todas las clases deben seguir la convención de Tailwind (e.g., `flex`, `grid`, `gap-6`, `text-center`).
- Incluir `<script>` al final para manejar el toggling del menú móvil y la apertura/cierre del mega‑menu.
- Asegurar que el sitio sea completamente responsive (breakpoints: sm, md, lg). 
- No utilizar imágenes reales; usar placeholders con atributos `alt` descriptivos.
- SEO básico: meta charset UTF‑8, viewport, título y descripción coherentes con AyudaNube.
- Exportar todo el código en un solo archivo `index.html` listo para desplegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, buscador y menú mega‑desplegable
1.2 Hero principal con título, subtítulo y botones de llamada a acción
1.3 Galería de enlaces a distintas versiones de la home (cards con imágenes)
1.4 Bloque descriptivo "Qué incluye AyudaNube" con título y texto introductorio
1.5 Grid de tres tarjetas que resaltan número de páginas, secciones y funcionalidades
1.6 Footer con enlaces corporativos y legales

PÁGINAS

2.1 Home v1 (ejemplo de página de destino)
2.2 Home v2 (ejemplo de página de destino)
2.3 Home v3 (ejemplo de página de destino)
2.4 Category page (listado de preguntas frecuentes)
2.5 FAQ individual page (detalle de pregunta y respuesta)
2.6 Changelog page (histórico de versiones)
2.7 Changelog update page (detalle de versión)
2.8 Support page (formulario y recursos de contacto)
2.9 Utility pages – Styleguide, 404, 401, Licenses, Start Here, Changelog versions
2.10 External link – Más plantillas (enlace a sitio externo)

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: AyudaNube
Sector: Plataforma de documentación y soporte técnico en línea
Claim: Todo tu soporte a un clic

Bloques de la home

1.1 Cabecera fija con logo, buscador y menú mega‑desplegable
1.2 Hero principal con título, subtítulo y botones de llamada a acción
1.3 Galería de enlaces a distintas versiones de la home (cards con imágenes)
1.4 Bloque descriptivo "Qué incluye AyudaNube" con título y texto introductorio
1.5 Grid de tres tarjetas que resaltan número de páginas, secciones y funcionalidades
1.6 Footer con enlaces corporativos y legales (no detallado en el HTML original)

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

AyudaNube — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

PÁGINAS

Otros prompts de la misma categoría

Aurora Inversión

Cumbre Capital

Lumara Salud

Aliviar Hogar