NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Corte Noble**, una tienda online de ropa masculina, usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único fichero. El sitio debe reproducir el patrón visual y estructural descrito a continuación, sin copiar texto ni imágenes del origen.
**Paleta de colores**
- #111111 (negro profundo) – fondo principal y texto
- #FFFFFF (blanco) – texto sobre fondo oscuro y botones
- #D4AF37 (dorado) – acentos, hover de enlaces y bordes decorativos
- #F5F5F5 (gris muy claro) – fondos secundarios y tarjetas de producto
**Tipografía**
- Fuente principal: *Inter*, peso 400/600, tamaños responsive (h1 4rem, h2 2.5rem, cuerpo 1rem)
- Fuente de acentos: *Playfair Display*, peso 700, para títulos hero y secciones de testimonios.
**Estru
5.114 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.114 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Cabecera con anuncio superior, logotipo, menú hamburguesa, búsqueda y carrito lateral
- 1.2 Hero con imagen de fondo, título grande y botón principal
- 1.3 Bloque de colección destacada con rejilla de productos
- 1.4 Sección de beneficios con iconos y texto breve
- 1.5 Testimonios en carrusel simple
- 1.6 Formulario de suscripción al boletín
- 1.7 Pie de página con enlaces, redes sociales y datos de contacto
PRODUCTOS
- 2.1 Cabecera idéntica a la Home
- 2.2 Lista de productos en cuadrícula responsiva
- 2.3 Filtros laterales colapsables
- 2.4 Paginación simple
- 2.5 Footer idéntico a la Home
PRODUCTO DETALLE
- 3.1 Cabecera idéntica
- 3.2 Imagen principal del producto con galería lateral
- 3.3 Información del producto: nombre, descripción, selector de talla/color, precio y botón "Añadir al carrito"
- 3.4 Sección de productos relacionados en carrusel
- 3.5 Footer idéntico
CART (carrito lateral)
- 4.1 Panel deslizante a la derecha
- 4.2 Lista de artículos con miniatura, nombre, opciones, cantidad y precio
- 4.3 Subtotal y botones "Continuar compra" y "Ir a pago"
- 4.4 Mensaje de carrito vacío
CHECKOUT
- 5.1 Cabecera idéntica
- 5.2 Formulario de datos de facturación y envío
- 5.3 Resumen del pedido y selección de método de pago
- 5.4 Botón final de "Realizar pedido"
- 5.5 Footer idéntico
PROMPTS RELACIONADOS · E-COMMERCE
