SAAS / STARTUP · Claude Design · HTML

NexoFlow — Prompt de diseño web para Claude AI

★★★★★4,6 1.896 descargas

Plataforma SaaS para gestión de marketing digital Herramientas claras para crecer en línea.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia **NexoFlow** (dominio nexoflow.com) siguiendo el stack **HTML + Tailwind CSS CDN + JavaScript vanilla en un único archivo**. Replicar la estructura y estilo visual del template analizado, sin copiar ningún texto original.

**Paleta de colores**
- Primario: #1A73E8 (azul vibrante)
- Secundario: #0F62FE (azul más oscuro)
- Texto principal: #212529 (gris casi negro)
- Texto secundario: #6C757D (gris medio)
- Fondo claro: #F8F9FA
- Fondo oscuro: #FFFFFF

**Tipografía**
- Fuente principal: "Inter", sans‑serif (cargar desde Google Fonts)
- Tamaños: 64px para h1 hero, 24px para subtítulos, 16px cuerpo, 14px para textos secundarios.

**Header**
- Barra de navegación sticky, fondo blanco, sombra ligera.
- Logo a la izquierda (placeholder SVG).
- Menú principal con 5 ítems, cada uno con dropdown que muestra enlaces internos.
- Botón a la derecha con estilo "bg‑blue" y texto blanco "Solicita demo".
- Versión móvil con hamburguesa que despliega el menú completo.

**Secciones de la Home (en orden)**
1. **Hero**: fondo degradado azul‑claro, título grande, párrafo descriptivo, dos botones CTA ("Compra plantilla" en azul y "Vista previa" en gris). Imagen decorativa a la derecha (placeholder).
2. **Características**: tres columnas, cada una con ícono SVG, título y breve descripción.
3. **Blog destacado**: grid de 2 tarjetas, cada una con imagen, título, extracto y flecha derecha.
4. **Testimonios**: carrusel horizontal de tarjetas con foto circular, nombre, cargo y cita.
5. **CTA final**: barra de fondo azul, texto centrado y botón "Solicita demo".
6. **Footer**: fondo gris muy claro, columnas con enlaces (Producto, Recursos, Empresa, Legal), iconos de redes sociales, y un pequeño formulario de suscripción (email + botón).

**Componentes interactivos**
- Dropdowns en la navegación (hover en desktop, click en mobile).
- Carrusel de testimonios con botones prev/next (JS vanilla).
- Smooth scroll para anclas.
- Formulario de suscripción con validación básica de email.

**Requisitos técnicos**
- Incluir link a Tailwind CDN (`https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css`).
- Incluir `<script>` al final del body con lógica para dropdowns, carrusel y validación.
- Todo el contenido debe estar en español (España) y ser 100 % original.
- Mantener una estructura semántica (header, main, section, footer).
- Optimizar para accesibilidad: atributos `aria-`, foco visible en elementos interactivos.
- No usar imágenes externas reales; utilizar placeholders (`https://via.placeholder.com/400x300`).

Entrega el código completo listo para guardarse como `index.html` y abrirse 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.014 caracteres · 61 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú principal con dropdowns y botón de acción
1.2 Hero principal con título, subtítulo y dos botones CTA
1.3 Bloque de funcionalidades en tres columnas con íconos y texto descriptivo
1.4 Lista de entradas del blog destacadas con miniatura y resumen
1.5 Testimonios en carrusel de tarjetas
1.6 CTA final con botón de reserva de demo
1.7 Footer con enlaces institucionales, redes y formulario de suscripción

ABOUT

2.1 Hero interno con título y breve descripción
2.2 Historia de la empresa en dos columnas
2.3 Equipo con fotos y cargos
2.4 Valores y misión en tarjetas

CONTACT

3.1 Formulario de contacto con campos básicos
3.2 Información de oficina y mapa incrustado
3.3 Botón de reserva de demo

BLOG

4.1 Lista de artículos en grid de tres columnas con imágenes
4.2 Sidebar con categorías y últimos posts
4.3 Paginación inferior

PRICING

5.1 Tabla comparativa de planes con características
5.2 CTA de suscripción bajo cada plan

RESOURCE

6.1 sección de recursos descargables en tarjetas
6.2 sección de webinars con calendario

INTEGRATIONS

7.1 Galería de logos de integraciones compatibles
7.2 Descripción breve de cada integración

CUSTOMERS

8.1 Grid de logos de clientes destacados
8.2 Testimonios de clientes en formato cita

LOGIN

9.1 Formulario de acceso con email y contraseña
9.2 Enlace a recuperación de contraseña

SIGNUP

10.1 Registro rápido con nombre, email y contraseña
10.2 Checkbox de términos y botón de crear cuenta

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NexoFlow
Sector: Plataforma SaaS para gestión de marketing digital
Claim: Herramientas claras para crecer en línea

Bloques de la home

1.1 Cabecera con logo, menú principal con dropdowns y botón de acción
1.2 Hero principal con título, subtítulo y dos botones CTA
1.3 Sección de características resaltadas en columnas
1.4 Área de integración de blogs con miniaturas y enlaces
1.5 Testimonios o casos de éxito en tarjetas
1.6 Llamada a la acción final y formulario breve
1.7 Pie de página 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