TECNOLOGÍA · Claude Design · HTML

Gestión Ágil — Prompt de diseño web para Claude AI

★★★★★4,7 4.592 descargas

Software SaaS para gestión y archivo de documentos empresariales Organiza tus archivos, simplifica tu día a día.

↓ 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 para la marca ficticia **Gestión Ágil** (dominio gestionagil.com) que reproduzca el diseño analizado. Utiliza **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo.\n\n**Paleta de colores** (extraída del original):\n- #0d0d0d (texto principal, header)\n- #ffffff (fondo)\n- #1a73e8 (acentos, botones, enlaces)\n- #f5f5f5 (secciones claras)\n- #e0e0e0 (bordes y hover)\n\n**Tipografía**: Inter (Google Fonts) – peso 400 y 600.\n\n**Estructura**:\n\n1. **Header** (fixed, z‑index 50) con logo (70 px de alto) a la izquierda y menú de navegación a la derecha. Cada ítem incluye un SVG icónico y texto. El ítem activo muestra una línea de color #1a73e8 bajo el texto. El menú es responsive: colapsa en móvil a un ícono hamburguesa que abre overlay.\n\n2. **Hero**: sección full‑width, fondo blanco, padding vertical 16rem. Centro vertical con título grande (text‑4xl, font‑bold, color #0d0d0d), subtítulo (text‑lg, color #555), botón primary (#1a73e8, texto blanco, rounded).\n\n3. **Características**: grid de 3 columnas (md:grid-cols-3, gap-8). Cada tarjeta: icono SVG dentro de círculo gris claro, título (text‑xl, font‑semibold), párrafo corto. Fondo #f5f5f5, padding 6, border radius lg.\n\n4. **Integración**: layout de dos columnas (md:flex). Imagen a la izquierda (responsive) y texto a la derecha con título y lista de beneficios. Fondo blanco.\n\n5. **Testimonios**: carrusel simple con `setInterval` que cambia la clase `hidden`/`block` en 3 bloques. Cada testimonio incluye foto circular, nombre, cargo y cita. Fondo #f5f5f5, padding 8.\n\n6. **FAQ**: sección acordión. Cada pregunta es un botón que, al hacer click, muestra/oculta su respuesta usando `max-height` y transición. Color de encabezado #0d0d0d, respuesta fondo #e0e0e0.\n\n7. **Formulario de contacto**: grid de dos columnas (md:grid-cols-2) con campos input y textarea. Botón submit primary. Validación mínima con `required`.\n\n8. **Footer**: fondo #0d0d0d, texto blanco, tres columnas de enlaces (Producto, Empresa, Legal) y fila inferior con íconos de redes sociales (SVG) y copyright.
\n**Requisitos técnicos**:\n- Incluir `<meta charset="utf-8">`, viewport y `title` adecuado.\n- En `<head>` cargar Inter font y Tailwind CDN (`https://cdn.tailwindcss.com`).\n- Añadir script al final del body para menú móvil, carrusel y acordeón.\n- Mantener código semántico (header, nav, main, section, footer).\n- Todas las imágenes use placeholders (`https://via.placeholder.com/600x400`).\n- No usar clases o IDs que revelen el sitio original; usa nombres descriptivos como `nav-logo`, `hero-title`, `feature-card`.\n\nEntrega el HTML completo listo para copiar‑pegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo y menú principal con iconos SVG
2.1 Hero con título, subtítulo y botón primary
3.1 Bloque de características en grid de tres columnas con iconos y texto breve
4.1 Sección de integración con imágenes y descripción lateral
5.1 Testimonios en carrusel sencillo
6.1 FAQ con acordeón
7.1 Formulario de contacto de dos columnas
8.1 Footer con navegación secundaria, enlaces legales y redes sociales

BLOG

1.1 Cabecera idéntica a la de Home
2.1 Lista de artículos en tarjetas con imagen, título y extracto
3.1 Paginación simple
4.1 Footer idéntico a Home

FAQ

1.1 Cabecera idéntica a la de Home
2.1 Lista de preguntas con acordeón expandible
3.1 Footer idéntico a Home

CONTACTO

1.1 Cabecera idéntica a la de Home
2.1 Formulario de contacto ampliado (nombre, email, empresa, mensaje)
3.1 Mapa estático embed
4.1 Footer idéntico a Home

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Gestión Ágil
Sector: Software SaaS para gestión y archivo de documentos empresariales
Claim: Organiza tus archivos, simplifica tu día a día

Bloques de la home

1.1 Cabecera fija con logo y menú principal con iconos SVG
2.1 Hero con título, subtítulo y botón primary
3.1 Bloque de características en grid de tres columnas con iconos y texto breve
4.1 Sección de integración con imágenes y descripción lateral
5.1 Testimonios en carrusel sencillo
6.1 FAQ con acordeón
7.1 Formulario de contacto de dos columnas
8.1 Footer con navegación secundaria, enlaces legales 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

Gestión Ágil — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

BLOG

FAQ

CONTACTO

Otros prompts de la misma categoría

Lectorio

Lumenova Apps

Lumenova Labs

LumenSpark