NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa en un único archivo HTML usando Tailwind CSS via CDN y JavaScript vanilla. Marca ficticia: Estilo Arpegio (estiloarpegio.com). Sector creativo, claim "Espacios visuales que comunican ideas". Utiliza la paleta de colores: #0F172A (azul marino profundo), #1E293B (gris azul), #3B82F6 (azul brillante), #F3F4F6 (gris muy claro), #FFFFFF (blanco). Tipografía: "Inter" para títulos y cuerpo, cargada desde Google Fonts.
Estructura:
- Header fijo con logo SVG, menú horizontal (Home, About, Services, Projects, Blog, Contact) y dropdown "Pages" con enlaces dummy, botón de acción rotulado "Solicitar presupuesto" (estilo botón oscuro con borde). Incluye icono de carrito minimalista que muestra cantidad.
- Hero sección: fondo gris claro, título grande en Inter Bold, subtítu
3.735 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.735 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 Header con logo, menú principal, dropdown y botón de acción
- 1.2 Hero con título, subtítulo y botón principal
- 1.3 Sección de servicios en tarjetas con iconos
- 1.4 Galería de proyectos en grid responsive
- 1.5 Blog preview con lista de artículos
- 1.6 Llamada a la acción secundaria (cotización)
- 1.7 Footer con enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 1.1 Header idéntico al Home
- 1.2 Bloque de presentación personal con foto y texto descriptivo
- 1.3 Timeline de experiencia y habilidades
- 1.4 Testimonios en carrusel
- 1.5 Footer común
SERVICES
- 1.1 Header
- 1.2 Lista de servicios en tarjetas con iconografía y breve descripción
- 1.3 Sección de precios simplificada (solo rango de tarifas)
- 1.4 Formulario de contacto rápido
- 1.5 Footer
PROJECTS
- 1.1 Header
- 1.2 Grid de proyectos con filtro por categoría
- 1.3 Modal de detalle del proyecto (imágenes y descripción)
- 1.4 CTA para contratar
- 1.5 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos con imagen, título y extracto
- 1.3 Paginación
- 1.4 Sidebar con categorías y últimos posts
- 1.5 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto completo (nombre, email, mensaje)
- 1.3 Mapa estático de ubicación
- 1.4 Información de contacto y redes sociales
- 1.5 Footer
PROMPTS RELACIONADOS · MODA
