AGENCIA DIGITAL · Claude Design · HTML

NovaPulse — Prompt de diseño web para Claude AI

★★★★★4,8 1.756 descargas

Agencia creativa especializada en estrategia y gestión de redes sociales Transformamos tu presencia digital con datos y creatividad.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "NovaPulse" (agencia digital de social media) usando solo HTML, Tailwind CSS via CDN y JavaScript vanilla en un único archivo. Reproduce el diseño visual y la estructura analizada:

- **Paleta de colores**: #FFFFFF (blanco), #0A0A0A (negro profundo), #1E40AF (azul índigo), #FBBF24 (amarillo dorado), #F3F4F6 (gris muy claro) y toques de #10B981 (verde esmeralda) para acentos.
- **Tipografía**: "Inter" para títulos y cuerpo, peso 400‑700, tamaños responsivos (h1 3rem, h2 2.25rem, párrafos 1rem a 1.125rem).
- **Header**: barra fija con logo SVG (placeholder), menú horizontal (Home, Por qué nosotros?, Casos, Blog, FAQ) y botón destacado "Contáctanos". En móvil colapsa en icono hamburguesa.
- **Hero**: sección ocupando viewport full, centrado vertical. Título grande "Tu marca, prosperando digitalmente", subtítulo explicativo, dos botones (principal y secundario). Al lado, una columna con mini‑tarjetas de seguidores (Instagram, YouTube, X) y una galería de retratos circulares. Debajo, fila de 4 métricas con íconos y números grandes (200+, 360+, 10M, 100K).
- **Sección "Cómo trabajamos"**: título y párrafo intro, luego una grid de tres tarjetas numeradas (01 Estrategia, 02 Creación & gestión, 03 Revisión & afinado). Cada tarjeta contiene título, descripción y un ícono decorativo.
- **Bloque de confianza**: texto breve "Con la confianza de 20.000+ creadores" y una fila de iconos repetidos como placeholders.
- **Sección "La diferencia"**: título, párrafo y una cuadrícula de tres beneficios con íconos, título y descripción.
- **Blog**: listado de tarjetas de artículo con imagen, título, extracto y botón "Leer más"; paginación simple.
- **Footer**: fondo gris claro, columnas con enlaces de navegación, redes sociales (SVG), dirección ficticia y formulario de suscripción (campo email y botón).

Requisitos técnicos:
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` y configurar Tailwind con los colores personalizados.
- Utilizar `flex`, `grid` y clases responsivas (`md:`, `lg:`) para que el layout se adapte a móviles, tablets y desktop.
- Añadir transiciones suaves (`transition`, `duration-300`) en botones y hover de enlaces.
- Implementar menú hamburguesa con JavaScript que añade/remueve la clase `hidden` al contenedor del menú.
- Todos los textos deben ser originales en español de España, sin copiar del original.
- No incluir enlaces externos reales, usar `#` como href temporal.
- Optimizar imágenes con atributos `loading="lazy"` y usar placeholders de fondo gris.
- El archivo resultante debe ser autocontenido y listo para abrirse en el navegador sin dependencias externas más allá de Tailwind CDN.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y botón de contacto
2.1 Hero con título, subtítulo, dos botones y visuales de seguidores
2.2 Métricas de experiencia (4 tarjetas)
3.1 Sección "Cómo trabajamos" introducción
3.2 Tarjeta proceso 01 – Estrategia
3.3 Tarjeta proceso 02 – Creación y gestión
3.4 Tarjeta proceso 03 – Revisión y ajuste
4.1 Bloque de confianza con iconos de marcas
5.1 Sección "La diferencia" título y párrafo introductorio
5.2 Cuadrícula de beneficios (3 tarjetas)
6.1 Blog – listado de artículos recientes
7.1 Footer con enlaces, redes sociales y datos de contacto

BLOG

1.1 Header reutilizado
2.1 Lista de artículos con imagen, título y extracto
3.1 Paginación simple
4.1 Footer reutilizado

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: NovaPulse
Sector: Agencia creativa especializada en estrategia y gestión de redes sociales
Claim: Transformamos tu presencia digital con datos y creatividad

Bloques de la home

1.1 Header con logo, menú y botón de contacto
2.1 Hero con título, subtítulo, dos llamadas a la acción, ilustraciones y métricas de experiencia
3.1 Sección "Cómo trabajamos" con introducción y tres tarjetas de proceso
4.1 Bloque de confianza con iconos de clientes
5.1 Sección "La diferencia" con título, descripción y cuadrícula de beneficios
6.1 Blog (lista de artículos)
7.1 Footer con enlaces de navegación, 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