ENTRETENIMIENTO · Claude Design · HTML

PixelArcade — Prompt de diseño web para Claude AI

★★★★★4,9 3.796 descargas

Plataforma de venta de videojuegos y accesorios digitales Tienda de juegos con experiencias inmersivas.

↓ 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 **PixelArcade** (tienda de videojuegos) usando **HTML único, Tailwind CSS vía CDN y JavaScript vanilla** todo en un solo archivo. Reproduce fielmente la estructura y el estilo del sitio analizado:

- **Paleta de colores**: #0D0D0D (fondo principal), #1A1A1A (sectores), #E91E63 (acentos rosa), #FFFFFF (texto), #F5F5F5 (gris claro). 
- **Tipografía**: "Inter", sans‑serif para todo el texto; utilizar tamaños responsive de Tailwind (text‑sm, text‑lg, text‑2xl, etc.).
- **Header**: barra fija con logo SVG placeholder, menú horizontal con desplegables (Demos, Sobre nosotros, Tienda, Noticias, Todas las páginas). En móvil, colapsar a ícono hamburguesa y drawer. Botón de carrito con icono y badge que muestra número de artículos.
- **Cart modal**: ventana emergente centrada, muestra lista de productos, cantidad editable, subtotal y botón de checkout (no funcional). Cerrar con X.
- **Home sections**:
  1. **Hero slider** con tres slides, cada una con título, subtítulo y botón "Descubre"; transición automática y controles de flecha.
  2. **Categorías destacadas**: cuadrícula 4×1 de tarjetas con icono, nombre y enlace.
  3. **Lanzamientos próximos**: tarjetas de producto (imagen, título, precio, botón "Añadir al carrito").
  4. **Testimonios**: carrusel de citas con foto circular, nombre y comentario.
  5. **Newsletter**: formulario de suscripción simple (email + botón).
- **Footer**: fondo oscuro, columnas de enlaces (Empresa, Soporte, Legal), íconos de redes sociales y formulario breve de contacto.
- **Páginas internas** (About Us, Store, News, Contact) deben seguir el mismo header/footer y contener los bloques indicados en la tabla.
- **Interactividad**: menús desplegables con `mouseenter`/`mouseleave`, slider con `setInterval`, carrito con localStorage para persistir la cantidad, validación simple de formulario.
- **Accesibilidad**: atributos `aria-` y foco visible para interacciones.
- **Optimización**: usar `loading="lazy"` en imágenes, evitar CSS externo salvo Tailwind CDN.

Entrega el código completo listo para copiar‑pegar en un archivo `index.html` que funcione sin dependencias externas más allá de Tailwind CDN y Google Fonts.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menús desplegables y botón de carrito modal
1.2 Hero con slider de demos y llamada a la acción
1.3 Sección de categorías destacadas en cuadrícula
1.4 Próximos lanzamientos con tarjetas de producto
1.5 Testimonios rotativos
1.6 Newsletter y suscripción
1.7 Footer con enlaces institucionales, redes y formulario de contacto

ABOUT US

2.1 Encabezado con imagen de fondo y título
2.2 Historia de la empresa en dos columnas
2.3 Equipo con tarjetas de perfil
2.4 Valores en iconos y texto
2.5 Footer (reutilizado)

STORE

3.1 Filtro de categorías lateral
3.2 Galería de productos en tarjetas
3.3 Paginación inferior
3.4 Footer (reutilizado)

NEWS

4.1 Lista de artículos con imágenes y extractos
4.2 Sidebar con categorías y tags
4.3 Footer (reutilizado)

CONTACT

5.1 Formulario de contacto con campos básicos
5.2 Mapa estático incrustado
5.3 Información de contacto y redes
5.4 Footer (reutilizado)

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: PixelArcade
Sector: Plataforma de venta de videojuegos y accesorios digitales
Claim: Tienda de juegos con experiencias inmersivas

Bloques de la home

1.1 Barra de navegación fija con logo, menús desplegables y botón de carrito modal
1.2 Hero con slider de demos y llamada a la acción
1.3 Sección de categorías destacadas en cuadrícula
1.4 Próximos lanzamientos con tarjetas de producto
1.5 Testimonios rotativos
1.6 Newsletter y suscripción
1.7 Footer con enlaces institucionales, redes y formulario 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

PixelArcade — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

STORE

NEWS

CONTACT

Otros prompts de la misma categoría

Ludicra Studios

Ludoteca Nova

LumenArtes

Lúmina Arte