SAAS / STARTUP · Claude Design · HTML

NexoDocs — Prompt de diseño web para Claude AI

★★★★★4,9 4.310 descargas

Plataforma SaaS de documentación y soporte técnico Tu centro de ayuda, sin complicaciones.

↓ 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 totalmente funcional para la marca ficticia **NexoDocs** (plataforma SaaS de documentación y soporte). Usa **HTML** + **Tailwind CSS CDN** + **JavaScript vanilla** en un único archivo. 

**ALCANCE**
- Cabecera fija con logo (texto "NexoDocs" en tipografía sans‑serif), menú de navegación (Home, Funcionalidades, FAQ, Contacto) y botón de carrito que abre un modal simple mostrando "Carrito vacío". 
- Hero: fondo claro, título grande "Centro de ayuda para tu equipo", subtítulo descriptivo, botón primario "Comenzar ahora" y botón secundario "Ver demo". 
- Sección de funcionalidades: grid de 3 columnas, cada tarjeta con icono (usar heroicons), título y breve descripción. 
- Testimonios: carrusel automático (uso de CSS scroll‑snap o JS sencillo) con foto circular, nombre, cargo y comentario. 
- FAQ: lista de preguntas estilo acordeón, al hacer click se despliega la respuesta. 
- CTA final: fondo sombreado, texto de invitación y formulario de suscripción (campo email + botón). 
- Pie de página: columnas de enlaces (Producto, Recursos, Empresa), íconos de redes sociales, y datos de contacto. 

**PALETA DE COLORES** (hex):
- Primario: #0A72B5
- Secundario: #2C7A7B
- Fondo claro: #F5F7FA
- Texto principal: #333333
- Texto secundario: #667780
- Hover/Enfasis: #174C7A

**TIPOGRAFÍA**
- Fuente principal: "Inter", peso 400/600, tamaños: base 16px, h1 48px, h2 36px, h3 24px, botones 16px. 
- Cargar fuente desde Google Fonts.

**INTERACTIVIDAD**
- Dropdown del menú en móvil (hamburguesa) que muestra enlaces verticales. 
- Modal del carrito con overlay semi‑transparent y cierre al click fuera o en icono X. 
- Acordeón FAQ con transición suave de altura. 
- Carrusel de testimonios con paginación automática cada 5 s y navegación manual.

**REQUISITOS TÉCNICOS**
- Todo el código debe estar contenido en un único archivo index.html.
- Incluir Tailwind vía CDN (`<script src="https://cdn.tailwindcss.com"></script>`). Configurar Tailwind para usar los colores personalizados mediante `tailwind.config = {theme:{extend:{colors:{primary:'#0A72B5',secondary:'#2C7A7B',light:'#F5F7FA',dark:'#333333',accent:'#174C7A'}}}};`.
- Añadir scripts al final del body para el menú móvil, modal carrito, acordeón FAQ y carrusel testimonios.
- Asegurar accesibilidad básica (aria‑labels, roles). 
- Optimizar para dispositivos móviles (responsive) usando las clases de Tailwind.

Genera el archivo completo listo para abrir en el navegador.

---

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

CAPTURA COMPLETA · HOME