NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una startup SaaS llamada Stack Perla usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. Marca ficticia, dominio stackperla.com, claim "Herramientas simples para equipos que construyen futuro". Paleta de colores: #0A0A0A (negro profundo), #1F2937 (gris oscuro), #3B82F6 (azul primario), #F3F4F6 (gris claro), #FFFFFF (blanco). Tipografía: Inter (Google Fonts) para cuerpo y font‑weight 600 para encabezados.
Estructura requerida:
- Header fijo con logo a la izquierda, menú principal (Home, About, Blog, Contact) centrado, mega‑menu bajo "Pages" con dos columnas de enlaces, botón de carrito con contador y botón CTA "Empezar" visible en tablets.
- Hero sección: fondo gris muy claro, título grande (text‑4xl lg:text-5xl) con color azul, sub
3.474 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.474 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, mega‑menu y botón de carrito
- 1.2 Hero con título destacado, subtítulo y botón de llamada a acción
- 1.3 Sección de características en cuadrícula de 3 columnas con iconos y texto
- 1.4 Testimonios rotatorios con foto, nombre y comentario
- 1.5 Planes de precios en cards con botón de “Empezar”
- 1.6 Llamada a acción final con fondo contrastante
- 1.7 Footer con enlaces de navegación, newsletter y datos de contacto
ABOUT
- 2.1 Header (reutilizado)
- 2.2 Hero interno con título y descripción breve
- 2.3 Historia de la empresa en dos columnas (texto + imagen)
- 2.4 Equipo con tarjetas de perfil
- 2.5 Valores en bloques icónicos
- 2.6 Footer (reutilizado)
BLOG
- 3.1 Header
- 3.2 Lista de artículos en rejilla de 2 columnas con extracto e imagen
- 3.3 Sidebar con categorías y newsletter
- 3.4 Footer
CONTACT
- 4.1 Header
- 4.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
- 4.3 Mapa incrustado y datos de oficina
- 4.4 Footer
PRICING
- 5.1 Header
- 5.2 Tabla comparativa de planes con características y botón de selección
- 5.3 FAQ acordeón
- 5.4 Footer
PROMPTS RELACIONADOS · SAAS / STARTUP
