Design de Site de Infraestrutura de IA

Uma Landing Page Serena para Runtime de Agentes

Este exemplo oficial incluído apresenta a Halcyon como um runtime para agentes de IA de longa duração. Seu título elaborado, “Calmer infrastructure for the agents already running your business,” enquadra a infraestrutura como uma camada estabilizadora, e não como outra interface de modelo. A página então sustenta essa posição com exemplos visíveis de runtime, gastos, tarefas e auditoria.

Narrativas de Infraestrutura com Dados de Exemplo

A página é adequada a equipes de infraestrutura que precisam explicar várias questões técnicas em um único fluxo de marketing. Sua linguagem passa da promessa ampla de operações de agentes mais serenas para primitivos específicos e, depois, para o acesso à implementação por meio de SDKs e CLIs. Essa sequência dá aos leitores técnicos um motivo para continuar sem transformar a abertura em uma página de documentação.

Os números visíveis fazem parte do conteúdo de exemplo da landing page. Eles mostram como um design pode tornar conceitos operacionais concretos, mas não estabelecem desempenho do serviço Halcyon, tempo de atividade, preços ou comportamento de backend conectado.

Do Mockup de Runtime ao Convite Comercial

Uma navegação flutuante centralizada em formato de pílula apresenta Halcyon, Platform, Metrics, Docs, Changelog e Get started. O hero usa uma divisão 1.05fr/0.95fr entre um título grande e um mockup de runtime arredondado. A coluna de texto ligeiramente mais larga sustenta a premissa; o contêiner aninhado do cartão dá às métricas de exemplo um contêiner visual distinto. Isso facilita imaginar o produto proposto, mas o cartão não é uma prova operacional.

O título quebra em linhas superdimensionadas, passando de “Calmer infrastructure” para “for the agents already running your business.” O tratamento em cinza da segunda frase cria uma mudança visual entre a categoria do produto e seu público. Essa ênfase torna a promessa memorável, embora a escala exija um tratamento responsivo cuidadoso em telas mais estreitas.

1. Comece com um Mockup de Runtime

   Comece com a afirmação do produto e, em seguida, posicione o painel de runtime ao lado dela. O rótulo “research-agent / tier-3” do painel, a linha de status, o cartão de gastos, o cartão de tarefas e a entrada de auditoria mostram o que a infraestrutura pretende organizar.

2. Expanda para Seis Primitivos

   A grade da plataforma apresenta seis cartões numerados: identidade, gastos, auditoria, sandbox, roteamento e ergonomia. A identidade ocupa uma célula alta com um espécime de código, enquanto gastos e auditoria ficam ao lado; os três últimos usam células mais baixas. A introdução da fonte diz “Five primitives”, apesar de renderizar seis. Mantenha o layout de seis cartões como a estrutura observada e trate essa divergência como texto de exemplo, não como uma taxonomia de produto verificada.

3. Encerre com uma Única Ação

   O painel de encerramento muda para um fundo escuro e centraliza “Less duct tape between the model and the bill.” Uma breve declaração de avaliação e preços conduz a “Talk to an engineer”, dando à página uma ação final em vez de opções concorrentes de destino.

Limites de Escopo e Capacidade

Halcyon é um conceito de landing page apenas de design. Seus botões não têm handlers comerciais; somente o link Platform leva a uma seção correspondente. Os destinos de Metrics, Docs e Changelog estão ausentes, e os links do rodapé são placeholders. Indicadores de tempo de atividade, gastos, contagens de tarefas, latência, financiamento e segurança de exemplo não são evidências do serviço. Os nomes na faixa de empresas em movimento não estabelecem clientes ou endossos, e o texto SOC 2/ISO 27001 não verifica certificação. O acesso ao console, a cobrança, o roteamento, o armazenamento e o contato comercial exigiriam uma implementação separada.

A suavidade vem de uma tela prateada, Plus Jakarta Sans, acentos verde-sálvia e contêineres aninhados com cantos arredondados, não de um sistema de infraestrutura em funcionamento. O CSS adiciona uma malha de fundo à deriva, um ponto de status pulsante e uma faixa de nomes de empresas em deslocamento contínuo que pausa ao passar o cursor. O IntersectionObserver revela as seções conforme elas entram na viewport. As regras de movimento reduzido desativam a deriva da malha e as revelações das seções, mas não desativam a pulsação nem o letreiro; considere essas animações restantes ao adaptar o design.

Fonte e Atribuição

OpenDesign é o distribuidor da Comunidade. A documentação da fonte credita Taste Skill by Leonxlnx pela orientação visual e de movimento suave: https://github.com/Leonxlnx/taste-skill. Preserve esse papel de origem sem sugerir autoria pessoal deste espécime ou autoria independente da direção subjacente por parte de OpenDesign. O manifesto declara MIT para o plugin incluído; ele não estabelece direitos separados para cada recurso representado.