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.
— Ficha de rol
- Rol
- UX/UI Designer
- Equipo
- Franco Gregoratti, Matías Gregoratti (Diseñador Gráfico) + 3 personas más
- Duración
- 3 días
- Plataforma
- Web / Negocio
- Qué hice
- Diseño de interfaz de usuario y branding
— 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 cohesiva 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 un 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 un benchmark asistido por IA 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 un benchmark asistido por IA 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
Del diseño al MVP en tiempo récord
03
días desde el diseño hasta el MVP funcional
02
fases de iteración hasta el estado final
— Decisiones clave
Decisiones que definieron el proyecto.
Desarrollo con vibe coding — el deadline de 3 días
El problema
MAVEN necesitaba una landing con mucha estética y un formulario funcional en menos de 3 días. Un proceso de desarrollo tradicional no entraba en ese plazo ni de cerca.
Las opciones
- —Desarrollo tradicional con un dev escribiendo el código desde cero: máximo control, pero imposible de entregar en 3 días.
- —Un builder no-code tipo Webflow o WordPress: rápido, pero con menos control sobre el código y un handoff más limitado.
- —Vibe coding con V0 y Claude Opus 4.6: velocidad extrema con código real y exportable, a costa de menor control fino sobre cada línea.
La decisión
Elegí vibe coding con V0 y Claude Opus 4.6 porque era la única vía que combinaba velocidad con un entregable serio: código funcional que el cliente pudo subir a su propio GitHub, servidor y dominio. Integré Supabase para la carga de imágenes y Resend para el formulario sin tener que construir backend a medida. El sacrificio fue aceptar menos control granular sobre el código y limitar el proyecto a dos fases de iteración: prioricé un MVP sólido y funcional sobre el refinamiento infinito.
Benchmark asistido por IA — research en horas, no en semanas
El problema
Con 3 días totales para diseñar y desarrollar, no había margen para un benchmark tradicional: relevar competencia, estructura y tendencias del rubro a mano habría consumido gran parte del plazo.
Las opciones
- —Benchmark manual tradicional: más profundo y verificable, pero incompatible con el deadline.
- —Saltear el research e ir directo al diseño: rápido, pero con riesgo de diseñar una estructura desconectada del rubro.
- —Benchmark asistido por IA con ChatGPT 5.2: estructura, competencia y tendencias en horas, con menor profundidad que un research manual.
La decisión
Elegí el benchmark asistido por IA: usé ChatGPT 5.2 para consultas de estructura, competencia y tendencias, y hasta para definir el modelo de fondo generativo más eficiente. Eso me dio un piso de decisiones fundamentadas sin quemar el plazo. Lo que sacrificé fue profundidad de research: con más tiempo, un benchmark manual habría sumado matices que la IA no levanta.
Dark mode como identidad — credibilidad tecnológica vs. convención corporativa
El problema
MAVEN vende automatizaciones con IA y soluciones informáticas, pero no tenía identidad digital. La landing tenía que comunicar autoridad técnica de un vistazo, y la estética era un requisito explícito del cliente.
Las opciones
- —Light mode corporativo estándar: seguro y convencional, pero genérico y con poca diferenciación para una empresa de IA.
- —Dark mode con acentos y fondo generativo: identidad tecnológica fuerte, con el riesgo de legibilidad que exige una jerarquía visual muy cuidada.
La decisión
Elegí dark mode porque el objetivo era credibilidad tecnológica y conversión, no cumplir la convención corporativa. El fondo de ondas generativas violetas aporta identidad sin competir con el contenido. Para manejar el riesgo de legibilidad trabajé una jerarquía clara: headlines prominentes, descripciones secundarias y CTAs diferenciados por color de acento. Sacrifiqué lo 'seguro' de un sitio claro tradicional a cambio de una identidad memorable.
— 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.