SAAS / STARTUP · Claude Design · HTML

NexoPanel — Prompt de diseño web para Claude AI

★★★★★4,7 1.010 descargas

Plataforma SaaS de gestión empresarial Herramientas visuales para administrar tu negocio.

↓ 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 que reproduzca el diseño de una plantilla de panel de control SaaS, usando únicamente HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Marca ficticia: NexoPanel (nexopanel.com). Paleta de colores: #1F2937 (gris oscuro), #2563EB (azul primario), #F3F4F6 (gris claro), #FFFFFF (blanco), #10B981 (verde accent). Tipografía: "Inter", sans-serif para todo el texto; encabezados en weight 600, cuerpo en 400. 

Estructura:
- <header class="flex items-center justify-between p-6 bg-gray-900 text-white">
  • Logo SVG blanco.
  • Navegación mínima (enlace Home).
  • Botón "Contacta" estilo primary.
- Hero section full height (min‑h‑screen) con fondo gradiente dark‑blue/gray, centrado vertical y horizontal.
  • H1 grande (display‑4) "NexoPanel", color blanco.
  • P subtítulo descriptivo.
  • Dos botones: primary (bg‑blue‑600 hover:bg‑blue‑700) y secondary (bg‑white text‑gray‑900).
  • Imagen mockup a la derecha (iPad) con clase object‑contain y animación fade‑in.
- Sección "Pages" con título h2 y descripción corta. Grid responsive (md:grid‑cols‑2 lg:grid‑cols‑4) de tarjetas (aspect‑ratio 16/9) que enlazan a distintas variantes de dashboard. Cada tarjeta tiene imagen de previsualización y caption inferior.
- Sección "CRM" con título h2 y grid de 3 tarjetas, estilo idéntico al anterior pero con etiqueta "CRM".
- Sección "Utilities" con título h2 y grid de 4 tarjetas similar.
- Footer simple con fondo gris‑800, texto pequeño gris‑300, enlaces a Política y Contacto.

Comportamiento interactivo:
- Botones con efecto hover y focus (scale‑105, sombra).
- Enlaces de tarjetas con transición opacity y transform translate‑y‑-2.
- Menú hamburguesa para dispositivos <md: oculto en desktop, visible en móvil, abre sidebar overlay.
- Animaciones de aparición (data‑attributes) usando IntersectionObserver en JS para fade‑in de secciones.

Requisitos técnicos:
- Incluir <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet"> en <head>.
- <script> al final del body que defina la lógica del menú móvil y las animaciones on‑scroll.
- Todo el HTML debe estar semánticamente estructurado con <section>, <header>, <nav>, <main>, <footer>.
- Usar clases Tailwind para spacing, tipografía, colores y responsive.
- No usar imágenes externas de la plantilla original; usar placeholders (https://via.placeholder.com/…) con tamaños apropiados.
- Añadir meta viewport, charset UTF‑8 y título "NexoPanel – UI Kit de Dashboard".
- Comentario final con agradecimiento y copyright © 2026 NexoPanel.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con logo, encabezado h1, subtítulo y botones primary/secondary.
1.2 Imagen mockup de dispositivo mostrando la UI.
1.3 Grid de presentación de páginas de dashboard (8 módulos).
1.4 Grid de categoría CRM (3 módulos).
1.5 Grid de categoría Utilities (4 módulos).

PAGE: Dashboard – Default

2.1 Barra lateral de navegación.
2.2 Header con búsqueda y avatar.
2.3 Área principal con tarjetas de métricas y gráficos.

PAGE: Dashboard – Project

3.1 Sidebar, header, tabla de proyectos y timeline.

PAGE: Dashboard – E‑commerce

4.1 Sidebar, header, tarjetas de ventas y tabla de pedidos.

PAGE: CRM – Companies

5.1 Barra lateral, encabezado, tabla de empresas, filtros.

PAGE: Utilities – Knowledge Base

6.1 Lista de artículos, barra de búsqueda, filtros de categorías.

PAGE: Utilities – Invoice

7.1 Vista de factura, botón imprimir, tabla de items.

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: NexoPanel
Sector: Plataforma SaaS de gestión empresarial
Claim: Herramientas visuales para administrar tu negocio

Bloques de la home

1.1 Hero con logo, título grande, descripción y botones; 1.2 Imagen mockup de dashboard; 1.3 Sección "Pages" con grid de enlaces a variantes de dashboard; 1.4 Sección "CRM" con grid de tres módulos; 1.5 Sección "Utilities" con grid de módulos utilitarios.

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