NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Panel Vega** (plataforma SaaS de gestión financiera) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El diseño debe replicar la estructura y estilo del sitio analizado:
- **Paleta de colores**: azul oscuro #0A1F44, azul claro #3A7BD5, azul muy claro #E6F2FF, gris neutro #F5F7FA, blanco #FFFFFF, acento rosado #FF6F91 para botones resaltados.
- **Tipografía**: font‑family 'Inter', sans‑serif para todo el texto; headings en peso 700, párrafos en 400.
- **Header**: barra fija con logo "Panel Vega" (texto), menú horizontal (Sobre, Funcionalidades, Integraciones, Precios, Blog, Contacto) y dos botones a la derecha: "Iniciar sesión" (outline) y "Comenzar" (filled rosa). En móvil, colapsa a ícon
4.562 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.562 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 Barra de navegación fija con logo, menú y botones de acceso y registro
- 1.2 Hero principal: título con palabras resaltadas, párrafo descriptivo y dos botones
- 1.3 Imagen ilustrativa del móvil a la derecha del hero
- 1.4 Sección de características: encabezado, descripción y grid de tres tarjetas con icono/título y texto
- 1.5 Sección "Cómo funciona": tres pasos numerados con título y descripción, visual de línea de progreso
- 1.6 Sección de overview: título, párrafo y captura de pantalla del producto con badge de video
- 1.7 Footer: enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 2.1 Encabezado de página
- 2.2 Texto descriptivo de la empresa
- 2.3 Imagen o video institucional
- 2.4 Equipo y valores
FEATURES
- 3.1 Lista de características ampliada
- 3.2 Iconos y descripciones detalladas
- 3.3 Testimonios de usuarios
INTEGRATIONS
- 4.1 Muestra de integraciones con logos de terceros
- 4.2 Descripción de cómo conectar cada herramienta
PRICING
- 5.1 Tabla comparativa de planes
- 5.2 Botones CTA de compra
BLOG
- 6.1 Lista de artículos con imagen, título y extracto
- 6.2 Paginación
CONTACT
- 7.1 Formulario de contacto con campos nombre, email, mensaje
- 7.2 Información de soporte y mapa de ubicación
PROMPTS RELACIONADOS · SAAS / STARTUP
