Diseño de sitios web de infraestructura de IA

Una landing page serena para un runtime de agentes

Este ejemplo oficial incluido presenta Halcyon como un runtime para agentes de IA de larga duración. Su titular escrito, “Calmer infrastructure for the agents already running your business”, presenta la infraestructura como una capa estabilizadora en lugar de otra interfaz de modelo. A continuación, la página respalda esa posición con ejemplos visibles de runtime, gasto, tareas y auditoría.

Historias de infraestructura con datos de ejemplo

La página es adecuada para equipos de infraestructura que necesitan explicar varias cuestiones técnicas dentro de un único flujo de marketing. Su lenguaje avanza desde la promesa general de operaciones de agentes más serenas hasta primitivas concretas y, después, hacia el acceso a la implementación mediante SDK y CLI. Esta secuencia ofrece a los lectores técnicos una razón para continuar sin convertir la apertura en una página de documentación.

Las cifras visibles forman parte del contenido de ejemplo de la landing page. Muestran cómo un diseño puede hacer concretos los conceptos operativos, pero no establecen el rendimiento del servicio de Halcyon, su tiempo de actividad, sus precios ni el comportamiento de un backend conectado.

Del mockup de runtime a la invitación comercial

Una navegación flotante centrada en forma de píldora presenta Halcyon, Platform, Metrics, Docs, Changelog y Get started. El hero utiliza una división 1.05fr/0.95fr entre un titular grande y un mockup de runtime redondeado. La columna de texto, ligeramente más ancha, transmite la premisa; el contenedor de tarjeta anidado proporciona a las métricas de ejemplo un espacio visual diferenciado. Esto facilita imaginar el producto propuesto, pero la tarjeta no constituye una prueba operativa.

El titular se ajusta en líneas sobredimensionadas, pasando de “Calmer infrastructure” a “for the agents already running your business.” El tratamiento gris de esta última frase crea un cambio visual entre la categoría del producto y su público. Ese énfasis hace memorable la promesa, aunque la escala requiere una gestión responsive cuidadosa en pantallas más estrechas.

1. Lidera con un mockup de runtime

   Empieza con la declaración del producto y coloca después el panel de runtime a su lado. La etiqueta “research-agent / tier-3” del panel, la línea de estado, la tarjeta de gasto, la tarjeta de tareas y la entrada de auditoría muestran aquello que la infraestructura pretende organizar.

2. Amplía a seis primitivas

   La cuadrícula de la plataforma presenta seis tarjetas numeradas: identidad, gasto, auditoría, sandbox, routing y ergonomía. La identidad ocupa una celda alta con una muestra de código, mientras que gasto y auditoría se sitúan a su lado; las tres últimas utilizan celdas más cortas. La introducción de origen dice “Five primitives”, aunque representa seis. Conserva la disposición de seis tarjetas como estructura observada y trata esa discrepancia como texto de ejemplo, no como una taxonomía de producto verificada.

3. Cierra con una única acción

   El panel de cierre cambia a un fondo oscuro y centra “Less duct tape between the model and the bill.” Una breve declaración de evaluación y precios conduce a “Talk to an engineer”, lo que proporciona a la página una acción final en lugar de opciones de destino que compitan entre sí.

Alcance y límites de capacidad

Halcyon es un concepto de landing page únicamente de diseño. Sus botones no tienen controladores comerciales; solo el enlace Platform conduce a una sección coincidente. Los destinos de Metrics, Docs y Changelog están ausentes, y los enlaces del pie de página son marcadores de posición. Las etiquetas de tiempo de actividad, gasto, recuento de tareas, latencia, financiación y seguridad de ejemplo no son evidencias del servicio. Los nombres de la franja móvil de empresas no establecen clientes ni respaldos, y el texto SOC 2/ISO 27001 no verifica ninguna certificación. El acceso a la consola, la facturación, el routing, el almacenamiento y el contacto comercial requerirían una implementación independiente.

La suavidad procede de un lienzo plateado, Plus Jakarta Sans, acentos salvia y contenedores anidados redondeados, no de un sistema de infraestructura operativo. CSS añade una malla de fondo con desplazamiento, un punto de estado pulsante y una franja de nombres de empresas que se desplaza continuamente y se pausa al pasar el cursor. IntersectionObserver revela las secciones cuando entran en el viewport. Las reglas de movimiento reducido desactivan el desplazamiento de la malla y las revelaciones de secciones, pero no desactivan el pulso ni la marquesina; ten en cuenta esas animaciones restantes al adaptar el diseño.

Fuente y atribución

OpenDesign es el distribuidor de la comunidad. La documentación de origen atribuye a Taste Skill by Leonxlnx la orientación visual y de movimiento suave: https://github.com/Leonxlnx/taste-skill. Conserva esa función de referencia ascendente sin implicar la autoría personal de este espécimen ni la autoría independiente de OpenDesign sobre la dirección subyacente. El manifiesto declara MIT para el plugin incluido; no establece derechos independientes para cada recurso representado.