SAAS / STARTUP · Claude Design · HTML

NovaPulse — Prompt de diseño web para Claude AI

★★★★★4,6 2.704 descargas

Plataforma SaaS de automatización de procesos empresariales Simplifica la gestión, acelera el crecimiento.

↓ 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 con HTML + Tailwind CDN + JavaScript vanilla (un solo archivo) que reproduzca el diseño y la estructura de la plantilla descrita. Marca ficticia: NovaPulse (plataforma SaaS de automatización). Dominio ficticio: novapulse.com. Usa la siguiente paleta de colores: #0D3B66 (azul marino), #FAF0CA (crema), #F4D35E (amarillo dorado), #EE964B (naranja suave), #F95738 (rojo coral). Tipografía: "Inter" para títulos y cuerpo, peso 400‑700, importada desde Google Fonts.

Estructura:
- Header: barra fija, fondo semi‑transparente, logo a la izquierda, enlaces (Home, About, Feature, Contact) centrados, botón secundario "Prueba gratis" a la derecha. Icono de carrito que abre un panel lateral derecho.
- Hero: contenedor full‑width con vídeo de fondo autoloop, muted, overlay oscuro (rgba 0,0,0,0.5). Texto centrado: título grande, subtítulo y botón principal "Comienza ahora".
- Sección Características: grid 3‑col, cada columna con icono circular, título y párrafo corto.
- Sección Testimonios: grid 2‑col en móviles 1‑col, tarjetas con foto circular, nombre, cargo y cita.
- CTA final: fondo de color accent (#F4D35E), texto centrado y botón grande.
- Footer: fondo #0D3B66, columnas con enlaces (Empresa, Producto, Soporte) y redes sociales estilizadas.

Carrito lateral (hidden by default, visible on click): panel width 320px, fixed right, fondo blanco, sombra, lista de ítems con miniatura, nombre, opciones, cantidad editable, botón eliminar, subtotal y botón "Continuar al checkout". Cerrar con icono X.

Páginas adicionales (About, Feature, Contact) siguen la misma cabecera y footer con contenido propio (texto descriptivo, equipo en tarjetas, formulario de contacto con validación básica). El checkout es una página simple con resumen del pedido y formulario de datos.

Requisitos técnicos:
- Utiliza TailwindCSS via CDN (https://cdn.tailwindcss.com) y configura colores personalizados en <script> tailwind.config = { theme: { extend: { colors: { primary: '#0D3B66', secondary: '#FAF0CA', accent: '#F4D35E', highlight: '#EE964B', alert: '#F95738' } } } };</script>
- Incluye @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); y aplica font-family: 'Inter', sans-serif.
- JavaScript para toggle del carrito y envío del formulario (solo console.log).
- Todos los textos son originales en español de España, tono activo y sin jerga.
- No incluir enlaces reales ni datos de precios.
- Asegúrate de que el HTML sea válido y semántico (header, nav, main, section, footer).
- Optimiza para dispositivos móviles (responsive) usando las clases de Tailwind (sm:, md:, lg:).

---

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

CAPTURA COMPLETA · HOME