NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Diseño Compás, un estudio de diseño digital, usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. El proyecto debe reproducir la siguiente estructura y estilo visual:
- **Paleta de colores**: #0A0A0A (negro profundo), #FFFFFF (blanco), #E0E0E0 (gris claro), #FFB800 (amarillo brillante), #1A1A1A (gris casi negro) para fondos y acentos.
- **Tipografía**: Fuente principal "Inter" (sans-serif) para títulos y cuerpo, peso 400‑700. Títulos grandes en 4rem, subtítulos 2rem, cuerpo 1rem.
- **Header / Navbar**: barra fija con logo a la izquierda, enlaces de navegación (Sobre mí, Trabajos, Servicios, Contacto) alineados a la derecha y botón hamburguesa para móvil. Fondo negro semi‑transparente, texto blanco, hover en amarill
4.602 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.602 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 Navbar con logo, enlaces (Sobre mí, Trabajos, Servicios, Contacto) y menú hamburguesa responsive
- 1.2 Hero: título dividido (ej. Digi / tal Designer), imagen a la derecha, texto de bienvenida, botón "Hablemos"
- 1.3 Bloque de iconos sociales (Instagram, X, LinkedIn) con hover
- 1.4 Sección de contacto rápido con botón que lleva a la página de contacto
- 1.5 Footer simplificado con copyright y enlaces de política
ABOUT
- 2.1 Cabecera con título "Sobre mí" y fotografía grande
- 2.2 Texto descriptivo del estudio y trayectoria
- 2.3 Lista de habilidades con iconos
- 2.4 Testimonios en carrusel
- 2.5 Botón de descarga de CV
PROJECTS
- 3.1 Grid de tarjetas de proyecto (imagen, título, breve descripción)
- 3.2 Filtro por categorías (Web, Branding, UI/UX)
- 3.3 Modal emergente con detalle del proyecto al hacer clic
- 3.4 Botón para ver más proyectos
SERVICES
- 4.1 Lista de servicios en columnas (Identidad visual, UI/UX, Estrategia de marca)
- 4.2 Cada servicio con icono, título y descripción corta
- 4.3 CTA para solicitar presupuesto
CONTACT
- 5.1 Formulario de contacto (nombre, email, asunto, mensaje) con validación simple
- 5.2 Información de contacto directo (email, teléfono)
- 5.3 Mapa embebido de ubicación (opcional)
- 5.4 Enlaces a redes sociales repeat
FOOTER (presente en todas las páginas)
- 6.1 Logo pequeño, texto de copyright, enlaces a política de privacidad y términos
- 6.2 Iconos de redes sociales
PROMPTS RELACIONADOS · PORTFOLIO
