TECNOLOGÍA · Claude Design · HTML

NebulaPulse — Prompt de diseño web para Claude AI

★★★★★4,8 1.619 descargas

Plataforma SaaS para gestión de proyectos y colaboración en línea Herramientas simples para equipos que crean rápido.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web estática completa (HTML único) que reproduzca el diseño visual y la estructura de la plantilla SaaS descrita, usando solo Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Marca ficticia: NebulaPulse, dominio nebulapulse.com. Paleta de colores: fondo #0A0A0A, texto principal #EDEDF2, primario #00CFFF, acento gris #4A4A4A, botones primario #00CFFF con hover #009FBF, sombras sutiles. Tipografía: 'Inter', sans‑serif, importada de Google Fonts (weight 400‑600). 

Estructura:
- <header class="fixed top-0 w-full bg-gray-900 bg-opacity-90 backdrop-blur-lg z-50"> con logo SVG simplificado, menú horizontal (About, Feature, Blog, Pricing) y dropdown "Pages" con varios enlaces; botón CTA "Buy Now" visible en móvil. Incluye ícono de carrito con contador (inicial 0).
- <section id="hero" class="flex items-center justify-center min-h-screen bg-cover bg-center" style="background-image:url('https://via.placeholder.com/1600x900');"> contiene h1 grande (text-5xl md:text-6xl) en color primario, subtítulo gris y botón principal "Get Started".
- <section id="features" class="py-16 bg-gray-950 text-center"> grid 3 columnas (md:grid-cols-3) con tarjetas: ícono, título, párrafo corto.
- <section id="testimonials" class="py-12 bg-gray-900"> carrusel simple (JS) con 3 testimonios, foto redonda, nombre y cita.
- <section id="pricing" class="py-20 bg-gray-950"> tres tarjetas de precios en flex (md:flex-row) con título, precio grande, lista de benefits y botón CTA.
- <section id="blog" class="py-16 bg-gray-900"> grid 2 columnas de cards de blog con imagen placeholder, título, excerpt, enlace.
- <footer class="bg-gray-800 text-gray-300 py-8"> columnas: Resources, Company, Legal, Social icons (SVG). Incluye copyright y enlace a política de privacidad.

Requisitos técnicos: 
- Incluir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> y <script src="https://cdn.tailwindcss.com"></script> con configuración de colores personalizada. 
- Todo el CSS inline mediante clases Tailwind; evitar CSS extra.
- JavaScript para dropdowns y carrusel debe ser puro (añadir listeners a clic, transiciones con CSS). 
- El HTML debe ser semántico (header, nav, main, sections, footer). 
- Optimizar para responsive (mobile‑first). 
- No copiar ningún texto del original; crear contenido original en español de España siguiendo la guía de secciones. 
- Añadir meta tags básicos (charset, viewport, title, description, og).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar fijo con logo, enlaces de navegación y botón CTA
1.2 Hero central con imagen de fondo y título principal
1.3 Bloque de características en grid de tres columnas
1.4 Testimonios con carrusel sencillo
1.5 sección de precios con cards comparativas
1.6 Blog preview con cards horizontales
1.7 Footer con enlaces de ayuda, legal y redes sociales

ABOUT US

2.1 Header interno con breadcrumb
2.2 Texto descriptivo de la empresa y misión
2.3 Equipo en grid de tarjetas con foto y rol
2.4 Footer compartido

FEATURES

3.1 Header con título de sección
3.2 Lista de características en tarjetas con íconos
3.3 Ilustración lateral
3.4 Footer compartido

PRICING

4.1 Título y subtítulo de planes
4.2 Tres tarjetas de planes con precio, features y botón CTA
4.3 FAQ accordion
4.4 Footer compartido

BLOG

5.1 Lista de artículos en tarjetas con imagen, título yexcerpt
5.2 Paginación simple
5.3 Footer compartido

CONTACT

6.1 Formulario de contacto con campos nombre, email, asunto, mensaje
6.2 Mapa incrustado
6.3 Footer compartido

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: NebulaPulse
Sector: Plataforma SaaS para gestión de proyectos y colaboración en línea
Claim: Herramientas simples para equipos que crean rápido

Bloques de la home

1.1 Navbar fijo con logo, enlaces de navegación y botón CTA
1.2 Hero central con imagen de fondo y título principal
1.3 Bloque de características en grid de tres columnas
1.4 Testimonios con carrusel sencillo
1.5 sección de precios con cards comparativas
1.6 Blog preview con cards horizontales
1.7 Footer con enlaces de ayuda, legal y redes sociales

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