NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático completo (un solo archivo HTML) usando TailwindCSS CDN y JavaScript vanilla que reproduzca el diseño analizado. Marca ficticia: Shop Atlas, dominio shopatlas.com, claim "Herramientas simples para crear tu propio catálogo". Utiliza la paleta de colores: #111111 (texto principal), #222222 (fondo oscuro), #FFFFFF (texto claro), #F5F5F5 (gris suave para secciones), #FF6600 (acento naranja para botones y enlaces). Tipografía: Inter (Google Font) para títulos y body, peso 400‑600.
Estructura:
- <header class="flex items-center justify-between py-4 px-6 bg-white shadow"> contiene el logo a la izquierda, iconos sociales (Twitter, Facebook, Dribbble, LinkedIn) a la derecha, y botón de carrito con contador.
- Botón de carrito abre un modal centrado con overlay oscuro, m
3.896 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.896 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 Barra de navegación con logo, iconos sociales y botón de carrito
- 1.2 Hero minimalista con logo centrado y llamada a la acción
- 1.3 Menú overlay tipo fullscreen con enlaces numerados
ABOUT
- 2.1 Header heredado (logo, carrito)
- 2.2 Imagen de presentación y texto descriptivo
- 2.3 Valores o misión en tarjetas
NEWS
- 3.1 Lista de artículos en grid de tres columnas
- 3.2 Cada artículo con imagen, título, extracto y botón Leer más
CONTACT
- 4.1 Formulario de contacto con campos Nombre, Email, Mensaje
- 4.2 Información de contacto y mapa embedido
- 4.3 Enlaces a redes sociales
CART MODAL
- 5.1 Lista de productos en el carrito con foto, nombre, precios y cantidad
- 5.2 Subtotal y botones de Checkout y Continuar Compra
- 5.3 Mensajes de carrito vacío y errores
PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO