NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Blog Lúmina, un estudio de diseño y desarrollo digital. El proyecto debe estar implementado en un único archivo HTML que use Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Incluye toda la estructura, estilos y scripts necesarios.
**Requisitos generales**
- Utilizar la paleta de colores: #1F2937 (gris oscuro), #3F51B5 (azul intenso), #F3F4F6 (gris muy claro), #FFFFFF (blanco) y #FFB800 (amarillo acento).
- Tipografía principal: “Inter”, peso 400‑600; títulos: “DM Serif Display”, peso 400.
- Cabecera fija con logo a la izquierda, menú duplicado (dos columnas) centrado y botón de carrito a la derecha que muestra número de ítems (simulado).
- Hero: sección ocupando toda la altura de pantalla, fondo de imagen de alta resolución (us
3.759 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.759 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 fija con logo, menú duplicado y botón de carrito
- 2.1 Bloque Hero con fondo de imagen, título grande y botón principal
- 3.1 Galería de proyectos destacados en cuadrícula 3‑col
- 4.1 Sección Servicios con iconos y texto en columnas
- 5.1 Testimonios rotatorios
- 6.1 Llamada a la acción para newsletter
- 7.1 Footer con navegación secundaria, datos de contacto y redes sociales
PROYECTOS
- 1.1 Cabecera idéntica a la home
- 2.1 Listado de proyectos en cuadrícula filtrable
- 3.1 Detalle de proyecto con carrusel de imágenes y descripción
- 4.1 Footer idéntico
SERVICIOS
- 1.1 Cabecera idéntica
- 2.1 Presentación de servicios en bloques con iconos
- 3.1 Formulario de solicitud de presupuesto
- 4.1 Footer
BLOG
- 1.1 Cabecera idéntica
- 2.1 Lista de artículos en tarjetas con excerpt y fecha
- 3.1 Sidebar con categorías y suscripción
- 4.1 Footer
CONTACTO
- 1.1 Cabecera idéntica
- 2.1 Formulario de contacto con campos nombre, email, mensaje
- 3.1 Mapa incrustado y datos de oficina
- 4.1 Footer
Imagen generada con OpenAI · gpt-image-2 · 05/06/2026
PROMPTS RELACIONADOS · BLOG / REVISTA
