BeautifulUI: componentes artesanais para interfaces de chat com agentes
Proposta
Beautiful UI apresenta uma coleção de componentes reutilizáveis para interfaces de chat com agentes de IA. A página reúne 20 primitivas voltadas a experiências em que o agente responde, consulta fontes, executa tarefas, propõe alterações e pede aprovação humana antes de agir. Os exemplos usam o contexto operacional fictício de uma empresa de sorvetes, com dados de sabores, fornecedores, vendas e reposição de estoque.
Componentes de interação
A coleção inclui estados de carregamento com grade de pixels, brilho e tempo decorrido; indicadores expansíveis de raciocínio, busca e programação; texto transmitido com fontes, ações e perguntas de acompanhamento; cartões de aprovação para decisões humanas; chips compactos para chamadas de ferramentas; e linhas que mostram tarefas em execução, com falha ou concluídas.
Também há um painel de chat com abas, uma barra de prompt com fontes identificadas por @, comandos com /, seletor de modelo e ditado, além de cartões de recomendação com medidor de confiança, alternativas e ações como aceitar ou revisar. Cartões de contexto exibem trechos recuperados, tamanho, tipo de arquivo e origem, enquanto ações de seleção permitem enviar um trecho ao agente para explicar, melhorar, encurtar ou ajustar tom e gramática.
Dados, fluxos e operação
Para interfaces orientadas a dados, Beautiful UI mostra tabelas de diferenças, registros e filtros. Elas permitem, respectivamente, revisar alterações propostas pelo agente, organizar empresas com tags e relacionamentos e reorganizar dados por status. A página também inclui navegação lateral de um espaço de trabalho, busca com filtragem ao vivo, fluxogramas com gatilhos e condições, cartões de insights com gráficos e variações numéricas, blocos de código em TypeScript transmitido linha a linha e um cartão de ajuste visual com propriedades como largura, altura, raio e opacidade.
Os exemplos ilustram tarefas como verificar fornecedores, comparar vendas sazonais, redigir mensagens, calcular risco de falta de estoque, recomendar uma reposição e identificar o desempenho de sabores. Um painel de registros exibe 60 empresas, média de 55% e 48 links; outros cartões mostram, por exemplo, o Rocky Road em queda de 6%, ou US$ 2.453,44, e o Pistachio com alta de 1,15%, ou US$ 617,22.
A página informa que os componentes são preparados para copiar e colar, que novos elementos e atualizações podem ser enviados à caixa de entrada e que o projeto usa licença MIT. O material é apresentado como parte do trabalho da Beautiful UI, “Built by Turbo”, descrito também como um estúdio de design de produto.