NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Saber Coralina" (sabercoralina.com) usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Replicar el diseño visual del sitio analizado:
- Paleta de colores: fondo blanco (#FFFFFF), negro texto (#000000), acento azul profundo (#1A73E8), gris claro para fondos de menú (#F5F5F5).
- Tipografía: Inter (sans-serif) para todo el texto, peso 400 para párrafos y 600 para encabezados.
- Header: barra superior fija con logo (texto Lúmina) a la izquierda y botón de menú hamburguesa a la derecha. Al hacer clic, despliega un overlay de pantalla completa dividido en dos columnas: izquierda con logo blanco y lista numerada de enlaces (01 Home, 02 About, 03 Projects, 04 Services, 05 Blogs, 06 Contact); derecha con
4.289 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.289 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 Encabezado con logo blanco, botón menú hamburguesa y overlay lateral
- 1.2 Menú lateral izquierdo: logo, lista numerada de enlaces (Home, About, Projects, Services, Blogs, Contact) y botón cerrar
- 1.3 Panel derecho del menú: datos de contacto (teléfono, email, dirección) y iconos sociales
- 1.4 Hero principal: imagen grande a la izquierda, etiqueta "Open to work", nombre completo en dos líneas, breve descripción, iconos sociales alineados verticalmente
- 1.5 Footer implícito dentro del menú (información legal mínima)
ABOUT
- 2.1 Header persistente idéntico al de Home
- 2.2 Bloque de presentación personal con foto y texto descriptivo
- 2.3 Lista de habilidades o servicios en tarjetas
PROJECTS
- 3.1 Header persistente
- 3.2 Grid de proyectos tipo masonry con imágenes, título y breve descripción
- 3.3 Filtro por categorías (tabs horizontales)
SERVICES
- 4.1 Header persistente
- 4.2 Sección de servicios con iconos, título y párrafo explicativo en columnas
BLOGS
- 5.1 Header persistente
- 5.2 Lista de entradas en formato tarjeta con imagen, título, extracto y fecha
CONTACT
- 6.1 Header persistente
- 6.2 Formulario de contacto (nombre, email, asunto, mensaje, botón enviar)
- 6.3 Información de contacto repetida del menú lateral
Imagen generada con OpenRouter · Nano Banana (Gemini 2.5 Flash Image) · google/gemini-2.5-flash-image · 09/06/2026
PROMPTS RELACIONADOS · EDUCACIÓN
