AGENCIA DIGITAL · Claude Design · HTML

AeroPixel — Prompt de diseño web para Claude AI

★★★★★4,7 4.326 descargas

Estudio creativo y agencia digital Diseñamos experiencias digitales con precisión.

↓ 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 "AeroPixel" (agencia digital) usando solo un archivo HTML con Tailwind CSS a través de CDN y JavaScript vanilla. El sitio debe incluir:

- **Paleta de colores**: #0F172A (gris noche), #1E293B (gris más claro), #0EA5E9 (azul aguamarina accent), #F8FAFC (blanco nieve) y #64748B (texto secundario).
- **Tipografía**: Inter (sans-serif) para títulos y body, con pesos 400, 600, 700. Importar desde Google Fonts.
- **Header**: barra fija en la parte superior, fondo #0F172A, logo SVG al estilo minimalista (usar placeholder), menú hamburguesa oculto en móvil, botón de carrito a la derecha con badge de cantidad.
- **Hero**: sección full‑height, fondo degradado de #0F172A a #1E293B, texto centrado con título grande (text‑6xl, font‑bold, color #F8FAFC), subtítulo (text‑2xl, color #CBD5E1), botón primary (bg‑#0EA5E9, hover:bg‑#0284C7, texto blanco).
- **Bloque de servicios**: grid responsive 1‑col >md‑3‑col, tarjetas con ícono (placeholder SVG), título (text‑xl, font‑600, color #0EA5E9) y descripción (text‑base, color #CBD5E1). Fondo blanco con sombra ligera.
- **Galería de proyectos**: tarjetas de imagen (placeholder) con overlay de título y botón "Ver proyecto". Hover: escala 105% y sombra más fuerte.
- **Testimonios**: carrusel simple creado con JavaScript (setInterval) que muestra una tarjeta de texto centrado, foto circular placeholder y nombre. Fondo #1E293B, texto #F8FAFC.
- **Blog**: grid de tarjetas con imagen, título, excerpt y botón "Leer más". Cada tarjeta enlaza a una página de artículo individual (estructura similar, con encabezado, contenido y sección de comentarios simulada).
- **Footer**: fondo #0F172A, logo pequeño, columnas de enlaces (Servicios, Proyectos, Blog, Contacto), formulario de suscripción al newsletter (campo email y botón), y datos de contacto (email, teléfono). Texto en #CBD5E1.
- **Responsividad**: usar clases Tailwind para mobile‑first, menú hamburguesa que despliega navigation overlay en pantalla completa.
- **Interactividad**: carrito abre un panel lateral derecho con lista de productos (estructura dummy), botón cerrar. Botones con efecto ripple mediante CSS.
- **Accesibilidad**: atributos aria-label, role y focus styles.
- **Optimización**: cargar Tailwind vía CDN (`https://cdn.tailwindcss.com`), Google Fonts, y scripts al final del body.

Entrega todo el código dentro de un solo archivo HTML, sin archivos externos, listo para abrir 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>
```

2.806 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header fijo con logo SVG y botón de carrito
1.2 Hero con título grande, subtítulo y botón principal
1.3 Bloque de servicios en cuadrícula de 3 columnas con íconos y texto
1.4 Galería de proyectos destacados en tarjetas con hover
1.5 Sección de testimonios en carrusel sencillo
1.6 Blog con tarjetas resumidas de artículos
1.7 Footer con logo, enlaces rápidos, newsletter y datos de contacto

SERVICIOS

2.1 Header (reutiliza el de Home)
2.2 Lista de servicios en cuadrícula expandida
2.3 Detalle de cada servicio con imágenes y texto
2.4 CTA para contactar
2.5 Footer (reutiliza)

PROYECTOS

3.1 Header
3.2 Galería completa con filtro por categoría
3.3 Modal de proyecto con información y galería de imágenes
3.4 Footer

BLOG

4.1 Header
4.2 Lista de artículos en tarjetas
4.3 Página de artículo individual con encabezado, contenido y comentarios
4.4 Footer

CONTACTO

5.1 Header
5.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
5.3 Mapa incrustado y datos de contacto
5.4 Footer

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: AeroPixel
Sector: Estudio creativo y agencia digital
Claim: Diseñamos experiencias digitales con precisión

Bloques de la home

1.1 Header fijo con logo SVG y botón de carrito
1.2 Hero con título grande, subtítulo y botón principal
1.3 Bloque de servicios en cuadrícula de 3 columnas con íconos y texto
1.4 Galería de proyectos destacados en tarjetas con hover
1.5 Sección de testimonios en carrusel sencillo
1.6 Blog con tarjetas resumidas de artículos
1.7 Footer con logo, enlaces rápidos, newsletter 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