EDUCACIÓN · Claude Design · HTML

Nexia Tech — Prompt de diseño web para Claude AI

★★★★★4,6 1.663 descargas

Agencia digital especializada en desarrollo de software y servicios tecnológicos Soluciones estructuradas para equipos digitales.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "Nexia Tech" (agencia digital) usando únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #0A0A0A (fondo principal), #FFFFFF (texto), #1E3A8A (azul primary), #2563EB (azul accent), #F3F4F6 (gris claro). Tipografía: "Inter" para encabezados y cuerpo, importada de Google Fonts. 

Estructura general:
- Header fijo con fondo oscuro, logo (texto Nexia Tech en blanco), menú principal con enlaces: Overview, About, Services, Projects, Blog, Contact. Cada enlace abre un dropdown multicolumna cuando corresponde (Pages, Company, Utility) con enlaces de muestra.
- Botones a la derecha: "More Templates" (estilo secundario) y "Buy Nexia" (estilo primario). En móvil, colapsar a ícono de hamburguesa.
- Hero section: contenedor centrado, badge con icono (+) y texto "Overview Page", título H2 grande centrado, subtítulo, dos botones CTA ("Buy Nexia" y "More Templates"). Debajo, grid de dos columnas: izquierda texto y derecha un slider de imágenes (usar Swiper.js simple o crear con CSS @keyframes) que muestra 5 capturas de pantalla ficticias (usar placeholders https://via.placeholder.com/600x400).
- Sección característica: 4 columnas con icono + título corto (ej. Performance, Simplicity, Scalability, Support).
- Sección servicios: tarjetas con icono, título y breve descripción, alineadas en grid responsive.
- Sección proyectos: galería de tarjetas con imagen, nombre y categoría, filtro por categoría.
- Sección blog: lista de tarjetas con imagen, título y extracto.
- Sección contacto: formulario con campos Nombre, Email, Mensaje y botón enviar; al lado, bloque de información de contacto y mapa estático (embed de Google Maps con latitud ficticia).
- Footer oscuro con cuatro columnas: Sobre Nosotros (texto breve), Enlaces (lista de página), Legal (Términos, Política de privacidad), Redes (iconos SVG para Twitter, LinkedIn, GitHub). Texto small y copyright.

Requisitos técnicos:
- Incluir <script src="https://cdn.tailwindcss.com"></script> y configuración tailwind con colores personalizados.
- Añadir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">.
- Implementar dropdowns y slider con JavaScript puro (event listeners, class toggles).
- Asegurar accesibilidad: atributos aria, roles y foco visible.
- Responsivo: usar clases Tailwind (sm:, md:, lg:, xl:) para adaptar columnas y menús.
- Mantener todo el código en un único archivo index.html listo para ser renderizado en cualquier navegador.

No copiar ningún texto del original; generar todo el copy en español neutro, activo y original. No incluir precios ni datos reales.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, navegación principal, dropdowns multicolumna y botones de acción
1.2 Sección hero principal: badge, encabezado H2, subtítulo, botones CTA
1.3 Grid hero con slider de capturas de pantalla
1.4 (otras secciones posteriores del home, p.ej. servicios, testimonios, clientes, contacto)

ABOUT

2.1 Header reutilizado
2.2 Título de página y bloque de presentación de la empresa
2.3 Valores y equipo (grid de tarjetas)

SERVICES

3.1 Header reutilizado
3.2 Lista de servicios en formato tarjetas con íconos
3.3 Detalle de servicio individual (página separada)

PROJECTS

4.1 Header reutilizado
4.2 Galería de proyectos en tarjetas con filtro
4.3 Detalle de proyecto (página individual)

BLOG

5.1 Header reutilizado
5.2 Lista de entradas de blog en tarjetas con imágenes
5.3 Entrada de blog individual

CONTACT

6.1 Header reutilizado
6.2 Formulario de contacto con campos básicos
6.3 Información de contacto y mapa integrado

FOOTER (común a todas las páginas)

F.1 Logo y breve descripción
F.2 Menú de enlaces rápidos (empresa, servicios, legal)
F.3 Iconos de redes sociales
F.4 Copyright y política de privacidad

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexia Tech
Sector: Agencia digital especializada en desarrollo de software y servicios tecnológicos
Claim: Soluciones estructuradas para equipos digitales

Bloques de la home

1.1 Header con logo, menú principal, dropdowns multicolumna y botones de llamada a acción
1.2 Hero principal con badge, título, subtítulo, botones y slider de imágenes
1.3 Grid de hero con slider adicional y datos de proyecto
1.4 (continúa…) zona de características resumidas (no incluida en fragmento)
1.5 Footer con enlaces de empresa, servicios, 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