Torne o Anvil2 concreto com seu modelo de tokens em três níveis, valores de função verificados para os modos claro e escuro e uma interação completa de atribuição de serviço, com estados sincronizados de técnico, horário e revisão.
Arquitetura de tokens em três camadas do sistema de design ServiceTitan Anvil
Mantenha os primitivos abaixo das funções semânticas
O Anvil2 separa primitivos brutos, funções semânticas e aliases específicos de componentes. Em geral, um produto deve escolher a função que descreve o significado na interface, em vez de copiar um azul primitivo para cada controle. A tabela de referência inclui os valores exportados exatos e seus equivalentes para o modo escuro, permitindo revisar a mudança de tema como um par.
Não espere que os aliases sejam recalculados em tempo de execução
O guia oficial de temas informa que as referências a primitivos são resolvidas durante a compilação. Alterar um primitivo por meio de um provedor em tempo de execução não regenera automaticamente a camada semântica. Para mudar as cores do aplicativo, substitua a função semântica relevante; para alterar um componente, use a camada de componentes. Isso evita um tema parcialmente alterado, que deixaria controles relacionados inconsistentes.
Modo de aparência claro e escuro do sistema de design ServiceTitan Anvil
Altere em conjunto o primeiro plano e o plano de fundo
A ação primária usa BackgroundColorPrimary com ForegroundColorOnPrimary. No modo claro, essa combinação usa azul com texto branco; no modo escuro, usa um azul mais claro com um rótulo escuro. Alterar apenas o preenchimento criaria um par incoerente. O estudo completo de HTML usa light-dark() com um seletor color-scheme para demonstrar esses valores, sem afirmar que é o ThemeProvider.
Use cores de estado com significados descritos
O Anvil2 associa significados de estado a famílias de cores. A revisão local usa uma função de sucesso, mas ainda informa exatamente o que aconteceu. O técnico indisponível é identificado por texto e tem a opção de rádio desabilitada. Nenhuma tonalidade verde sugere que uma visita de serviço foi despachada; o exemplo nunca se conecta a um backend de despacho.
Atribuição de serviço e estados no sistema de design ServiceTitan Anvil
Faça com que a disponibilidade determine a próxima escolha
Ao selecionar um técnico, as opções de horário são substituídas pela disponibilidade fictícia dessa pessoa. A pessoa indisponível continua visível, mas não pode ser selecionada. Como há uma dependência entre dois controles, alterar o primeiro deve redefinir o segundo para um valor válido, em vez de manter um horário que não corresponde à disponibilidade da pessoa escolhida.
Separe o planejamento da execução
A revisão da atribuição registra um plano local e informa explicitamente que nenhuma visita foi despachada. Um fluxo de produção exigiria verificações de permissão, uma resposta de agenda atualizada e tratamento de conflitos antes da confirmação. O exemplo mantém esse limite visível e, ainda assim, oferece uma interação completa que pode ser testada e adaptada.
Densidade operacional e legibilidade no sistema de design ServiceTitan Anvil
Mantenha o contexto do trabalho próximo da seleção
Um resumo compacto do trabalho apresenta a tarefa, a duração, a área e a prioridade. As opções de técnico formam uma lista vertical legível, e a visita proposta aparece em um painel separado. A interface usa limites neutros e cores de destaque moderadas para que a seleção e a ação principal continuem fáceis de identificar. As barras da agenda estão identificadas como ilustrativas; o seletor de horário é a fonte oficial.
Preserve a ordem de leitura em dispositivos móveis
Integração nativa e alternativa completa de HTML para o sistema de design ServiceTitan Anvil
Use a estrutura documentada do provedor
O ThemeProvider do Anvil2 aceita substituições de tokens semânticos e de componentes, com extensões para valores e aparência escura. O guia inclui abaixo um exemplo completo do provedor, com fonte na documentação pública. Trata-se de uma referência de integração nativa, distinta do exemplo independente de HTML executado localmente.
Evite alegar um runtime de pacote não verificado
Esta página apresenta uma implementação funcional em HTML e dados de tokens verificados. O exemplo do provedor nativo é uma referência de integração separada, não o runtime exibido na prévia. Ao adotar componentes React, instale uma versão compatível do Anvil2, inclua os estilos necessários e verifique as APIs dos componentes antes de substituir os controles nativos de HTML.
Acessibilidade e verificação de estados no sistema de design ServiceTitan Anvil
Use a semântica nativa dos formulários
Os técnicos são apresentados como opções de rádio nativas com rótulos, o horário de início é um seletor identificado por rótulo e o controle de aparência expõe aria-pressed. A mensagem de revisão é uma região de status. O modelo nativo de teclado do navegador gerencia a seleção das opções de rádio; o estilo de foco visível é independente dos estilos de seleção ou de hover.
Verifique as alterações após a confirmação
Alterar o técnico ou o horário limpa as mensagens de revisão anteriores. Alternar a aparência mantém o técnico e o horário selecionados, pois uma mudança visual de tema não deve apagar um plano. Os testes devem abranger as duas transições, além da seleção desabilitada e do excesso de conteúdo em telas estreitas, em vez de apenas verificar se é possível clicar em um botão.
Transferência para agente de IA e implementação do sistema de design ServiceTitan Anvil
Comece pelo modelo completo de estados
Salve e execute o exemplo completo em HTML para inspecionar o comportamento. Os pares claro/escuro derivados dos tokens aparecem na parte superior do CSS, e os dados de disponibilidade definidos no exemplo estão no script. Uma implementação nativa de React pode manter as mesmas transições de estado e substituir os controles do Anvil2 após verificar sua compatibilidade.
Execute o exemplo completo de HTML.
Selecione o segundo técnico e confirme que as opções de horário de início mudam.
Revise o plano, depois altere o horário e confirme que as mensagens são removidas.
Alterne a aparência e confirme que a seleção atual é mantida.
Especifique o que exige dados reais
Peça ao agente de IA que mantenha a lista de horários dependente do técnico, o membro da equipe indisponível desabilitado, a invalidação da revisão e o comportamento da aparência. Substitua o trabalho e a equipe fictícios somente quando houver um contrato de dados real. Não transforme a revisão local em uma alegação de sucesso apenas mudando o rótulo do botão.
Verifique a disponibilidade antes de realizar um despacho.
Mantenha separadas as substituições semânticas e as de componentes.
Teste os pares de primeiro plano e plano de fundo nos modos claro e escuro.
Exemplos de componentes do sistema de design ServiceTitan Anvil
Exemplo completo de atribuição local
Original em HTML/CSS/JavaScript, com aparências derivadas de tokens e estado de formulário dependente.
Esta referência do provedor foi conferida com a documentação oficial; o exemplo em execução acima é independente de HTML.
04
Configuração do agente de IA para o sistema de design ServiceTitan Anvil
Ponto de partida para implementação
O exemplo executado não requer um pacote Anvil2. O exemplo separado do ThemeProvider exige uma instalação nativa compatível.
sh
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
Um prompt para seu projeto
Prompt para agente de IA
Crie uma interface de atribuição de serviços usando funções semânticas do Anvil2. Mantenha os pares de primeiro plano para os modos claro e escuro, as opções de horário dependentes do técnico, a equipe indisponível desabilitada e a invalidação da revisão do exemplo completo. Escolha explicitamente entre o HTML original e uma instalação verificada de React do Anvil2. Nunca afirme que houve um despacho sem uma resposta do backend.
05
Fontes e escopo do sistema de design ServiceTitan Anvil
Um guia de OpenDesign para o Anvil2 da ServiceTitan. Os valores dos tokens foram extraídos do Hammer 3.5.0 público. O exemplo em execução é HTML original, não um runtime de React do Anvil2; todos os técnicos e dados de disponibilidade são fictícios.
