BELLEZA / SPA · Claude Design · HTML

Lúmina Forge — Prompt de diseño web para Claude AI

★★★★★4,7 687 descargas

Plataforma de venta online de productos digitales y físicos Herramientas para crear y vender sin barreras.

↓ 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 Lúmina Forge, una plataforma de venta online. Usa solo HTML estático en un único archivo, Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Reproduce el diseño analizado: 

- **Header**: barra superior con logo a la izquierda, botón de hamburguesa que abre un menú overlay a pantalla completa. En el overlay, muestra enlaces numerados (01 Home, 02 About, 03 Work, 04 News, 05 Contact) con estilo gris y texto grande. Incluir botón de carrito con contador.
- **Hero**: sección a pantalla completa, grid de tres columnas. Cada columna contiene un título grande tipo display‑1 con animación de opacity, la segunda con "Create" dentro de un span con efecto scribble, y un subtítulo centrado con descripción breve. Fondo neutro claro.
- **Paleta de colores**: #1A1A1A (texto principal), #FFFFFF (fondo), #F5F5F5 (gris suave), #E63946 (rojo acento), #457B9D (azul acento).
- **Tipografía**: Inter var para cuerpo, Playfair Display para titulares.
- **Sección productos destacados**: grid responsive 3‑col en desktop, 2‑col en tablet, 1‑col en móvil. Cada tarjeta con imagen placeholder, nombre, precio y botón "Añadir" que incrementa contador del carrito.
- **Testimonios**: carrusel simple con tres bloques, cada uno con foto circular, nombre, cargo y comentario. Use CSS scroll‑snap para navegación.
- **Call to Action**: barra centrada con texto destacado y botón primario azul (#457B9D).
- **Footer**: fondo negro, columnas de enlaces (Producto, Empresa, Legal), íconos de redes sociales (SVG), y campo de suscripción al newsletter con input y botón.

**Requisitos técnicos**:
- Incluir Tailwind CDN `<script src="https://cdn.tailwindcss.com"></script>` y configurarlo para usar las fuentes indicadas.
- Implementar la lógica del carrito: al pulsar "Añadir", actualizar visualmente el contador en el header y almacenar en `localStorage`.
- Menú overlay debe abrir/cerrar con transiciones suaves (opacity, translateY).
- Añadir `meta` viewport, título y descripción genéricos.
- Mantener HTML semántico (header, nav, main, section, footer).
- No usar imágenes externas reales; emplear placeholders SVG.
- Todo el código debe estar auto‑contenido en un único archivo `index.html`.

Genera el código listo para copiar y 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>
```

2.623 caracteres · 38 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Menú overlay con logo, hamburguesa animada y acceso al carrito
1.2 Hero a tres columnas con títulos animados y texto descriptivo
1.3 Sección destacados de productos en grid responsivo
1.4 Área de testimonios con carrusel sencillo
1.5 Llamado a la acción con botón primario
1.6 Footer con enlaces, redes y suscripción

ABOUT

2.1 Banner interno con título y subtítulo
2.2 Texto descriptivo de la empresa en dos columnas
2.3 Valores destacados en iconos
2.4 Equipo con fotos y breves biografías
2.5 Footer replicado

WORK

3.1 Galería filtrable de proyectos
3.2 Cada proyecto con imagen, título y categoría
3.3 Modal de detalle rápido
3.4 Footer replicado

NEWS

4.1 Lista de artículos en formato grid
4.2 Cada artículo con imagen, título, fecha y extracto
4.3 Paginación simple
4.4 Footer replicado

CONTACT

5.1 Formulario de contacto con campos nombre, email y mensaje
5.2 Mapa incrustado
5.3 Información de contacto y redes sociales
5.4 Footer replicado

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Forge
Sector: Plataforma de venta online de productos digitales y físicos
Claim: Herramientas para crear y vender sin barreras

Bloques de la home

1.1 Menú overlay con logo, hamburguesa animada y acceso al carrito
1.2 Hero a tres columnas con títulos animados y texto descriptivo
1.3 Sección destacados de productos en grid responsivo
1.4 Área de testimonios con carrusel sencillo
1.5 Llamado a la acción con botón primario
1.6 Footer con enlaces, redes y suscripción

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

Lúmina Forge — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

WORK

NEWS

CONTACT

Otros prompts de la misma categoría

Línea Ígnea

Línea Tinta

Línea Vital

LuceBelle