SAAS / STARTUP · Claude Design · HTML

NimbusCraft — Prompt de diseño web para Claude AI

★★★★★4,6 1.917 descargas

Plataforma SaaS de plantillas y kits de diseño web Herramientas de diseño listas para usar.

↓ 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 bajo la marca NimbusCraft (nimbuscraft.com) con el siguiente alcance: una página HOME que reproduzca fielmente la estructura visual y de interacción del ejemplo analizado, usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. 

### Paleta de colores
- Primario: #0D47A1 (azul profundo)
- Secundario: #1976D2 (azul vivo)
- Accento: #FFC107 (amarillo dorado)
- Texto oscuro: #212121
- Fondo claro: #FAFAFA
- Blanco: #FFFFFF

### Tipografía
- Fuente principal: "Inter", sans-serif (cargada desde Google Fonts)
- Fuente secundaria para encabezados: "Playfair Display", serif

### Header (navbar)
- Logo a la izquierda (SVG placeholder)
- Menú de navegación centrado con items: Home, Features, Pricing, Blog, Contact. Cada item abre un dropdown con enlaces internos (simulados).
- Botones a la derecha: "Sign up" (estilo primario) y "Log in" (texto plano).
- comportamiento responsive: colapsa en icono hamburguesa en <768px.

### Hero section
- Tagline con icono y texto: "Premium Design. Zero Coding Required."
- Título grande: "Launch your beautiful website in minutes"
- párrafo descriptivo de 2 líneas.
- Botón CTA primario: "Get Started Today" con efecto hover (ligero desplazamiento y cambio de color).
- Imagen de fondo a la derecha (placeholder avif) con overlay de degradado lineal.
- Animaciones de entrada (fade‑in + scale) usando CSS @keyframes y clases utility de Tailwind.

### Bloque de estadísticas
- Tres tarjetas horizontales centradas, cada una con número grande y subtítulo:
  1) "24+" "Unique Pages"
  2) "80+" "Unique Sections"
  3) Icono Figma y texto "Figma file included"
- Fondo gris muy claro, separación con gap‑8.

### Galería de características
- Grid de 3 columnas (1 columna en móvil) con imágenes (placeholder avif) y breve descripción bajo cada una.
- Cada elemento tiene efecto hover de escala 1.05.

### CTA final
- Sección centrada con botón primario idéntico al hero.

### Footer
- Fondo primario (#0D47A1) con texto blanco.
- Cuatro columnas: Company (About, Careers), Product (Features, Pricing), Resources (Blog, Help Center), Contact (email, teléfono).
- Pequeño copyright y enlace a política de privacidad.

### Interactividad
- Dropdowns y mobile menu manejados con JavaScript vanilla (toggle class "hidden").
- Animaciones de scroll mediante IntersectionObserver para añadir clases de transición cuando los bloques entran en viewport.
- Botón CTA con smooth scroll a sección de contacto (placeholder).

### Requisitos técnicos
- Todo el código en un único archivo index.html.
- Incluir Tailwind CDN: <script src="https://cdn.tailwindcss.com"></script> y configuración de colores personalizados mediante `tailwind.config = { theme: { extend: { colors: { primary: '#0D47A1', secondary: '#1976D2', accent: '#FFC107' }}}}`.
- Importar fuentes Inter y Playfair Display desde Google Fonts.
- Utilizar atributos `data-w-id` simulados para animaciones si se desea, pero sin dependencias externas.
- Mantener accesibilidad: roles ARIA en navbar, botones y formularios.
- Optimizar imágenes con atributos `loading="lazy"` y `srcset` para responsive.

Entrega el archivo listo para copiar‑pegar en cualquier servidor estático.

---

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

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NimbusCraft
Sector: Plataforma SaaS de plantillas y kits de diseño web
Claim: Herramientas de diseño listas para usar

Bloques de la home

1.1 Barra de navegación con logo, enlaces dropdown y botones de registro/inicio de sesión
1.2 Hero con etiqueta, título principal, descripción, botón CTA y fondo ilustrativo
1.3 Sección de estadísticas con tres tarjetas que muestran número y descripción
1.4 Galería de características con imágenes y textos descriptivos
1.5 Llamada a la acción final con botón destacado
1.6 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

NimbusCraft — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs