ENTRETENIMIENTO · Claude Design · HTML

LunaPixel — Prompt de diseño web para Claude AI

★★★★★4,9 2.970 descargas

Tienda online de artículos de diseño y decoración Explora y decora tu espacio con estilo.

↓ 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 de una tienda online ficticia llamada LunaPixel con los siguientes requisitos:
- Stack: HTML + Tailwind CSS (CDN) + JavaScript vanilla, todo en un solo archivo.
- Paleta de colores: #1A202C (gris oscuro), #2D3748 (gris medio), #4A5568 (gris claro), #F6E05E (amarillo vibrante), #FFFFFF (blanco).
- Tipografía: 'Inter' para títulos y 'Open Sans' para cuerpo, ambas desde Google Fonts.
- Header: barra superior con logo a la izquierda, iconos de redes sociales (Twitter, Instagram, LinkedIn, Dribbble) ocultos en móvil, botón de carrito que abre un modal con listado de productos, botón hamburguesa que despliega un menú lateral con numeración de enlaces (01 Home, 02 About, 03 Products, 04 Contact). El menú debe animarse con transición de escala.
- Hero: sección a pantalla completa con fondo de imagen de estilo interior, texto grande centrado (h1) y botón CTA secundario.
- Sección Productos: grid responsive 3 columnas en desktop, 2 en tablet, 1 en móvil; tarjetas con imagen, nombre, precio y botón "Añadir al carrito".
- Testimonios: carrusel simple (JS) con 3 testimonios, cada uno con foto circular, nombre y texto.
- Newsletter: bloque con fondo gris claro, campo de email y botón "Suscribirme".
- Footer: fondo gris oscuro, columnas de enlaces (Productos, Empresa, Soporte), iconos de redes, y formulario de suscripción pequeña.
- Interactividad: menú hamburguesa abre/cierra, carrito modal muestra/oculta, carrusel avanza automáticamente y con flechas, botones con efecto hover (cambio de fondo a amarillo).
- Accesibilidad: usar roles ARIA apropiados, etiquetas alt en imágenes, contraste suficiente.
- Genera código limpio, sin dependencias externas más allá de Tailwind CDN y Google Fonts, y comentarios que indiquen cada bloque según la numeración del esquema.
Entrega el archivo completo 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.205 caracteres · 31 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú hamburguesa y carrito modal
1.2 Hero con imagen de fondo y botón principal
1.3 Grid de productos destacados (3 columnas)
1.4 Testimonios en carrusel
1.5 Sección de newsletter
1.6 Footer con enlaces, redes y suscripción

ABOUT

1.1 Cabecera reutilizada
1.2 Información de la marca y misión
1.3 Equipo en tarjetas horizontales
1.4 Valores con iconos
1.5 Footer reutilizado

PRODUCTS

1.1 Cabecera reutilizada
1.2 Lista de categorías en barra lateral
1.3 Grid de productos (4 columnas) con filtro
1.4 Paginación
1.5 Footer reutilizado

CONTACT

1.1 Cabecera reutilizada
1.2 Formulario de contacto con campos nombre, email, mensaje
1.3 Mapa incrustado
1.4 Footer reutilizado

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LunaPixel
Sector: Tienda online de artículos de diseño y decoración
Claim: Explora y decora tu espacio con estilo

Bloques de la home

1.1 Cabecera con logo, menú hamburguesa y carrito modal
1.2 Hero con imagen de fondo y llamado a la acción
1.3 Sección de productos destacados en grid 3x
1.4 Testimonios en carrusel
1.5 Llamado a suscripción al newsletter
1.6 Footer con enlaces, 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

LunaPixel — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PRODUCTS

CONTACT

Otros prompts de la misma categoría

Ludicra Studios

Ludoteca Nova

LumenArtes

Lúmina Arte