2026 - UI Design / Web Design
MAVEN
Landing page diseñada en Figma y desarrollada con Vibe Coding mediante Claude Opus 4.6, integrando Supabase y Resend. Dark mode con foco en conversión y credibilidad tecnológica.
— Contexto
Sin presencia digital que refleje su expertise en IA
MAVEN operaba como desarrolladora de software y soluciones informáticas sin un sitio web propio que comunicara su especialización en automatizaciones con inteligencia artificial. La ausencia de una identidad digital cohesa dificultaba la captación de leads cualificados y la comunicación de su propuesta de valor diferencial.
Maven necesitaba una landing con mucha estética y formulario de contacto funcional en poco tiempo, cumpliendo con deadlines ajustados. El desafío fue diseñar y desarrollar un MVP sólido en menos de 3 días sin sacrificar calidad visual ni la experiencia de usuario.
— Solución
Una landing que comunica autoridad técnica
Se diseñó una landing page corporativa en dark mode que organiza la información en cuatro secciones principales —Home, Servicios, Procesos y Contacto— con una navegación clara y jerarquía visual que guía al visitante hacia la conversión.
El proceso comenzó con UX Research en ChatGPT 5.2 para definir estructura y decisiones clave. Luego se diseñó en Figma y se desarrolló con V0 usando Claude Opus 4.6 para el vibe coding. Se integró Supabase para la carga de imágenes y Resend para el formulario de contacto funcional. El handoff incluyó el diseño en Figma y el código funcional, que el cliente subió a GitHub, servidor y dominio propio.
— Características
Secciones diseñadas para convertir
HomePropuesta de valor clara
Hero con el posicionamiento de MAVEN como desarrolladora de software y soluciones informáticas con IA. Mensaje directo sobre automatizaciones y tecnología aplicada al negocio.
ServiciosAutomatización y desarrollo
Listado claro de servicios: desarrollo de software, automatizaciones con IA, soluciones informáticas y consultoría tecnológica. Cada servicio presentado con estructura limpia y lenguaje técnico.
ProcesosCómo trabaja MAVEN
Workflow visual que explica el proceso de trabajo: desde el diagnóstico inicial hasta la implementación y soporte. Genera confianza al transparentar la metodología.
ContactoCanales de comunicación
Formulario de contacto y canales directos de comunicación. Diseñado para captar leads cualificados con campos relevantes para el tipo de servicio solicitado.
— Stack tecnológico
Herramientas de diseño y prototipado
El proceso comenzó con UX Research mediante ChatGPT 5.2: consultas para estructura, competencia y tendencias del rubro. Se crearon prompts para otras IA y se definió el modelo de fondo generativo más eficiente. Luego se maquetó en Figma en baja y alta fidelidad. El desarrollo se hizo con V0 y Claude Opus 4.6 (vibe coding), integrando Supabase para imágenes y Resend para el formulario de contacto. El handoff incluyó diseño en Figma + código funcional.
— Resultados
Un producto listo para escalar
03
días desde el diseño hasta el MVP funcional
02
fases de iteración hasta el estado final
97%
documentado para handoff a desarrollo
— HEURÍSTICAS
Buenas prácticas que se cumplen.
Basadas en las 10 heurísticas de usabilidad de Jakob Nielsen.
Visibilidad del estado del sistema
La navegación lateral identifica la sección activa en cada pantalla (Servicios, Proceso, Contacto). El indicador 'SCROLLEAR PARA NAVEGAR' guía al usuario sobre cómo continuar. Los campos obligatorios del formulario se marcan con asterisco y el botón de envío muestra su estado deshabilitado hasta completar los requeridos.
Coincidencia entre el sistema y el mundo real
Los servicios se nombran con lenguaje del sector: Branding, UX, Development, Automatization. Los pasos del proceso (Discovery & Planning, Diseño para el usuario, Desarrollo técnico) siguen la secuencia lógica que un cliente espera al contratar una desarrolladora de software.
Control y libertad del usuario
La navegación superior permite saltar entre secciones en cualquier momento. El usuario puede contactar por múltiples vías: formulario, WhatsApp o email directo. No hay flujos forzados ni pasos obligatorios para llegar al contacto.
— Próximos pasos
Conocé más sobre MAVEN
Landing page corporativa diseñada para generar confianza tecnológica y facilitar el contacto. Dark mode funcional con foco en la experiencia de usuario.