AI Agent Landing Page
Concepto de hero de landing page para un producto de agentes IA: una tipografía display, un gradiente naranja y una columna izquierda orientada a beneficios, diseñado como exploración de primera pantalla y no como un sitio completo.
- Tipo
- Proyecto conceptual, iniciativa propia
- Alcance
- Solo sección hero
- Plataforma
- Web desktop
- Herramientas
- Figma

Una pantalla, deliberadamente
Esta es una sección hero, no un sitio web, y el caso de estudio lo dice así en lugar de rellenarse con una fase de investigación que nunca ocurrió. Existe para trabajar una sola pregunta: cómo un producto en una categoría abstracta y saturada causa impacto en la primera pantalla.
Los productos de IA son difíciles de fotografiar. Lo que se vende es una capacidad, así que la mayoría de la categoría se conforma con degradados y diagramas de nodos. El enfoque aquí es ponerle cara. Un retrato único con una visera brillante da a la página un sujeto y un punto focal, y el degradado cálido detrás hace el trabajo de ambiente que una ilustración abstracta generalmente no logra.

Separar el argumento de la atmósfera
La columna izquierda lleva las propuestas de valor (flujo de trabajo potenciado por IA, agentes IA inteligentes, cada uno con una explicación de una línea y un párrafo de apoyo), en un peso tipográfico limpio y legible. El titular display es la atmósfera, y se mantiene al margen del razonamiento.
Esa separación es lo que permite que la tipografía sea tan potente. Una fuente ancha, geométrica y ligeramente futurista es una elección potente que se vuelve ilegible en un párrafo, así que se confina a cuatro palabras en la parte inferior del encuadre mientras la sustancia se compone en algo más comedido.
Un solo CTA blanco en forma de pastilla ancla la parte inferior izquierda, situado contra la parte más oscura del degradado para mantener el máximo contraste de la página. Los enlaces sociales discurren por el borde derecho como un carril vertical: presentes, sin competir por el centro.
Lo que produjo
Una primera pantalla terminada: navegación, una columna de dos beneficios, un titular display, una llamada a la acción principal y un carril social, resueltos como una composición única sobre un solo degradado.
El alcance es la parte honesta de este proyecto. Es una exploración visual de una sección hero, útil por lo que resuelve sobre combinación tipográfica, contraste y dónde emplear un solo acento, pero no es un proyecto de diseño de producto, y no se presenta como tal.
Lecturas recomendadas
- De Figma a React: un handoff que no hay que reconstruirPor qué los handoffs de Figma a React producen código que se acaba reescribiendo, y el flujo de trabajo (mapeo de tokens, propiedades con forma de props, estados reales) que lo evita.
- Herramientas de codificación con IA en 2026: qué cambia en un proyecto de clienteDónde los asistentes de codificación con IA aceleran de verdad el trabajo de front-end para clientes en 2026, dónde en cambio cuestan tiempo sin que te des cuenta, y cómo tiene que cambiar la revisión de código en cualquiera de los dos casos.


