MÚSICA Y BANDAS · Claude Design · HTML

NovaPulse — Prompt de diseño web para Claude AI

★★★★★4,7 3.917 descargas

Plataforma SaaS para gestión de proyectos y colaboración Herramientas visuales para equipos ágiles.

↓ 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 para la marca ficticia **NovaPulse** (dominio novapulse.com) que reproduzca el diseño visual y la estructura de la plantilla analizada. Usa **HTML** + **Tailwind CSS CDN** + **JavaScript vanilla** en un solo archivo. 

**Paleta de colores** (extraída del original):
- Primario 1: #0d6efd (azul vibrante)
- Primario 2: #6610f2 (violeta)
- Primario 3: #198754 (verde)
- Texto primario: #212529 (gris oscuro)
- Texto secundario: #6c757d (gris medio)
- Fondo claro: #ffffff
- Fondo oscuro: #212529

**Tipografía**: Utiliza `Inter` para títulos y `Roboto` para cuerpo, cargadas desde Google Fonts.

**Estructura del sitio** (single‑page con anclajes):
1. **Barra de anuncio** fija arriba con mensaje breve y enlace externo.
2. **Header sticky** con logo a la izquierda, menú de navegación (Tour, Pages dropdown, UI Snippets, Template dropdown) y botón CTA "Buy NovaPulse" a la derecha. Menú responsive con icono hamburguesa.
3. **Hero** centrado, título grande, subtítulo, dos botones CTA (principal en azul, secundario blanco) y testimonio con avatar y cita.
4. **Sección Layouts**: texto a la izquierda, botón "Ver páginas" y galería de 4 capturas de pantalla en fila.
5. **Sección UI Snippets**: muestra un chat con avatares, una barra de progreso y otros componentes; cada snippet en una tarjeta con fondo blanco.
6. **Sección Kit de Diseño**: fondo oscuro, título, texto, botón primario y badge de Figma con icono y texto.
7. **Sección Beneficios**: tres líneas horizontales con íconos coloreados (usar los primarios) y texto descriptivo.
8. **Galería Product Tours**: cuadrícula 4 columnas (responsive a 2‑1 en móvil) con imagen y nombre de tour.
9. **Galería Product Details**: cuadrícula 2 columnas similar a la anterior.
10. **Footer** con 3 columnas: navegación rápida, información de contacto (email, teléfono ficticio) y redes sociales (iconos SVG). Texto centrado, fondo gris muy oscuro.

**Comportamientos interactivos**:
- Smooth scroll para anclajes.
- Dropdowns que se abren al click y cierran al click fuera.
- Botón "Back to top" que aparece al hacer scroll > 200px.
- Hover effects en botones (sombra y cambio de tono).
- Carousel opcional en la galería de layouts (auto‑play, pausa al hover).

**Requisitos técnicos**:
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">`.
- Añadir Tailwind vía CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar los colores personalizados en `tailwind.config = { theme: { extend: { colors: { primary1: '#0d6efd', primary2: '#6610f2', primary3: '#198754' } } } }`.
- Todo el HTML debe usar clases de Tailwind para layout (grid, flex, gap, padding, margin, text‑sizes, bg‑colors, rounded, shadow, etc.).
- JavaScript debe manejar el menú responsive, dropdowns y back‑to‑top.
- Optimizar imágenes con atributos `loading="lazy"` y `srcset` como en el original.
- Mantener accesibilidad: `aria-label`, `role`, contrastes adecuados.
- Comentarios claros en el código para cada sección.

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

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de anuncio con mensaje corto y enlace externo
1.2 Cabecera sticky con logo, menú principal, dropdowns y botón CTA
1.3 Hero con título destacado, subtítulo, dos botones CTA y testimonio con avatar
1.4 Sección de layouts: título, descripción y botón de vista de páginas + galería de capturas
1.5 UI Snippets: bloque de chat, barra de progreso y otros componentes interactivos
1.6 Kit de diseño: llamado a solicitar archivo Figma y badge visual
1.7 Beneficios: tres líneas resaltando control, diseño profesional y equipo confiable
1.8 Product Tours: cuadrícula de 4 tarjetas con imágenes y títulos
1.9 Product Details: cuadrícula de 2 tarjetas con imágenes y títulos
1.10 Footer: enlaces de navegación, copyright y datos de contacto

PRODUCT-TOURS

2.1 Galería de tours de producto (4 tarjetas con imágenes y nombres)

PRODUCT-DETAILS

3.1 Galería de detalles de producto (2 tarjetas con imágenes y nombres)

PROMPTS RELACIONADOS · MÚSICA Y BANDAS

Otros prompts de la misma categoría

Ficha de marca

Nombre: NovaPulse
Sector: Plataforma SaaS para gestión de proyectos y colaboración
Claim: Herramientas visuales para equipos ágiles

Bloques de la home

1.1 Barra de anuncio con mensaje breve y enlace
1.2 Cabecera sticky con logo, menú principal, dropdowns y botón de compra
1.3 Hero principal con título, subtítulo, botones de llamada a la acción y testimonio
1.4 Sección de características con dos columnas, imágenes y texto
1.5 Bloc de UI Snippets mostrando ejemplos de interacción
1.6 sección de kit de diseño con llamada a Figma
1.7 bloques de texto resaltando control, diseño profesional y confianza
1.8 Galería de Product Tours en cuadrícula
1.9 Galería de Product Details en cuadrícula
1.10 Footer con enlaces de navegación 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

NovaPulse — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

PRODUCT-TOURS

PRODUCT-DETAILS

Otros prompts de la misma categoría

LiraNova

VozAura

VozViva Media

Lúmina Club