SAAS / STARTUP · Claude Design · HTML

NimbusStack — Prompt de diseño web para Claude AI

★★★★★4,9 2.518 descargas

Plataforma SaaS para gestión de productos digitales y suscripciones Herramientas para lanzar y escalar tu software.

↓ 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 **NimbusStack** (SaaS de gestión de productos digitales) usando **HTML estático**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. El proyecto debe reproducir fielmente la estructura y estilo del sitio analizado, sin copiar textos ni imágenes originales.

**Alcance**
- Generar todas las páginas listadas en la tabla: HOME, ABOUT, FEATURES, PRICING, BLOG, CONTACT.
- Cada página debe incluir los bloques descritos, siguiendo el orden y número de secciones.
- Implementar un **header** fijo con logo (SVG placeholder), menú principal, dropdown "Pages" con enlaces a todas las secciones y botón de carrito que abre un **modal** simulando el carrito (lista vacía, subtotal 0). El carrito debe cerrarse con botón X.
- Hero de Home: título grande, subtítulo, dos botones CTA ("Comenzar" y "Ver demo"), imagen de producto a la derecha (placeholder).
- Sección de características: grid de 3 columnas, cada una con ícono (Heroicons), título y párrafo corto.
- Testimonios: carrusel sencillo con 3 testimonios, navegable con flechas.
- Suscripción al boletín: input email y botón "Suscribirme".
- Footer: fondo #111827, columnas de enlaces (Producto, Empresa, Legal), iconos de redes sociales (SVG), y texto de copyright.
- Página About: encabezado interno, párrafo de misión, tarjetas de equipo (foto placeholder, nombre, rol).
- Features: lista de funcionalidades en dos columnas, imagen ilustrativa al costado.
- Pricing: tabla de 3 planes (Basic, Pro, Enterprise) en tarjetas, cada una con listado de beneficios y botón "Seleccionar". Debajo, sección FAQ con acordeón.
- Blog: grid de 3 columnas de artículos, cada tarjeta con imagen placeholder, título, extracto y fecha. Sidebar con categorías y formulario de suscripción.
- Contact: formulario con nombre, email, mensaje, botón "Enviar", mapa embed (iframe con lat/lng genéricos) y datos de contacto.

**Paleta de colores** (extraída del original):
- Primary: #2563EB (azul intenso)
- Secondary: #10B981 (verde esmeralda)
- Background: #F9FAFB (gris muy claro)
- Text primary: #111827 (gris casi negro)
- Text secondary: #6B7280 (gris medio)
- Accent: #F59E0B (amarillo cálido) para destacar botones.

**Tipografía**: Utilizar "Inter" para todo el texto (Google Fonts) y "Roboto Mono" para código o destacados. Tamaños base: text-base (1rem), headings h1‑h4 con escala tailwind.

**Componentes interactivos**:
- Dropdown de navegación y acordeón de FAQ con transiciones Tailwind (`transition ease-out duration-200`).
- Modal del carrito con overlay oscuro y cierre al hacer clic fuera.
- Carrusel de testimonios con desplazamiento horizontal y botones de navegación.
- Formulario de suscripción con validación simple (campo requerido).

**Requisitos técnicos**:
- Incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">` y `<script src="https://cdn.jsdelivr.net/npm/alpinejs@3" defer></script>` para manejar interacciones ligeras (dropdown, modal, accordion, carousel).
- Todas las rutas de imágenes deben usar `https://via.placeholder.com/` con dimensiones adecuadas.
- El HTML debe estar bien estructurado con etiquetas semánticas (`header`, `nav`, `main`, `section`, `footer`).
- Añadir comentarios claros indicando cada bloque (ej.: `<!-- Header -->`).
- Optimizar para dispositivos móviles: uso de clases responsivas (`md:`, `lg:`) para adaptar el layout.
- No incluir ninguna referencia a la URL original ni copiar texto del sitio fuente.

Entrega 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>
```

3.915 caracteres · 59 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menú principal, dropdown de páginas y botón de carrito modal
1.2 Hero principal con título, subtítulo, botones CTA y visual de producto
1.3 Sección de características en columnas con iconos y texto descriptivo
1.4 Testimonios en carrusel simple
1.5 Llamada a suscripción al boletín
1.6 Footer con bloques de enlaces, redes sociales y datos de contacto

ABOUT

2.1 Cabecera interna con título de página y breadcrumb
2.2 Texto descriptivo de la empresa y valores
2.3 Equipo en tarjetas con foto y rol
2.4 CTA a contacto
2.5 Footer replicado de home

FEATURES

3.1 Cabecera interna con título y breve introducción
3.2 Lista de funcionalidades en bloques con icono, título y descripción
3.3 Imagen resaltada a la derecha
3.4 CTA a prueba gratuita
3.5 Footer replicado de home

PRICING

4.1 Cabecera con título y comparativa de planes
4.2 Tarjetas de precios en grid, cada una con características y botón de selección
4.3 FAQ en acordeón
4.4 CTA secundario
4.5 Footer replicado de home

BLOG

5.1 Lista de artículos en grid, cada uno con imagen, título, extracto y fecha
5.2 Paginación inferior
5.3 Sidebar con categorías y suscripción
5.4 Footer replicado de home

CONTACT

6.1 Formulario de contacto con campos nombre, email, mensaje
6.2 Mapa embebido
6.3 Información de contacto y redes sociales
6.4 Footer replicado de home

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NimbusStack
Sector: Plataforma SaaS para gestión de productos digitales y suscripciones
Claim: Herramientas para lanzar y escalar tu software

Bloques de la home

1.1 Barra de navegación fija con logo, menú principal, dropdown de páginas y botón de carrito modal
1.2 Hero principal con título, subtítulo, botones CTA y visual de producto
1.3 Sección de características en columnas con iconos y texto descriptivo
1.4 Testimonios en carrusel simple
1.5 Llamada a suscripción al boletín
1.6 Footer con bloques de enlaces, redes sociales y datos de contacto

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