Projetar com
Hermes no
OpenDesign.

support-inbox.html · 1440px

4Revisar Antes da Entrega

1. 1

   Baixe o App de Desktop da OpenDesign

   Escolha o pacote para seu computador, instale-o e abra o app.

   Baixar o OpenDesign

   PONTO DE VERIFICAÇÃO

   O aplicativo desktop abre. Já instalado? Avance para a próxima etapa; não é necessário baixar novamente.
2. 2

   Prepare sua conexão com o Hermes

   Siga as instruções do Hermes na sua versão instalada. Autentique-se com sua própria chave de provedor (BYOK) — xAI Grok por padrão, ou OpenAI ou Anthropic — as credenciais permanecem na sua máquina.

   Conectar o xAI Grok ao Hermes (OAuth)

   # 1. Install Hermes (one-line installer from Nous Research)
   curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash
   
   # 2. Run the setup wizard
   hermes setup
   
   # 3. Add a provider and authenticate (BYOK)
   #    default is xAI Grok; OpenAI / Anthropic also supported
   hermes auth add        # add a provider key or run its OAuth flow
   hermes model           # pick the provider and model (grok-4.3 by default)

   Das notas de configuração do Hermes no guia publicado; consulte a documentação do fornecedor para o comando atual.

   PONTO DE VERIFICAÇÃO

   Confirme o agente e a conta pretendidos. Se não estiver disponível, verifique a compatibilidade antes de tentar uma tarefa maior.
3. 3

   Execute Uma Pequena Tarefa com o Hermes

   Use um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.

   Briefing inicial Copiar

   Construa uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.

   PONTO DE VERIFICAÇÃO

   Abra o resultado, teste o estado salvo e solicite uma alteração específica. Um arquivo gerado é o começo da revisão, não o fim.

Para executar o OpenDesign a partir do código-fonte, siga o guia técnico de início rápido.

1. 1

   Briefing de Design

   Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.

   • VocêEscreva o briefing; anexe uma captura de tela de referência, se tiver uma.
   • HermesLê o briefing e o arquivo de instruções do projeto; pergunta quando algo é ambíguo.
   • OpenDesignFornece o projeto, a superfície do prompt e a skill para o tipo de artefato.
   • VerificarConfirme que o briefing define os critérios de aceitação. Adicioná-los agora é mais barato do que depois da geração.

   New project · PromptHermes

   You

   Design a support inbox: list with priority, thread with suggested replies, quick actions. Plan first, then execute.

   Hermes

   Plan: two-pane layout, urgent as the only accent, suggested reply as a draft you approve. Executing unless you object.
2. 2

   Restrições de Design

   Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.

   • VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
   • HermesCarrega os tokens do DESIGN.md e as regras de postura no contexto antes de escrever uma linha.
   • OpenDesignDisponibiliza a biblioteca de design systems e vincula a escolhida ao template da skill.
   • VerificarOs tokens correspondem à sua marca. Um único destaque, as fontes certas, o raio certo.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Gerar a Interface

   O Hermes escreve um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.

   • VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
   • HermesPlaneja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e corrige o que falhar.
   • OpenDesignSalva o artefato na pasta do projeto e o indexa para pré-visualização.
   • VerificarNada ainda. Avalie o arquivo depois de renderizado, não a partir do código-fonte.

   Project files3 files

   • support-inbox.htmlnew
   • HERMES.mdbound
   • DESIGN.mdread
4. 4

   Pré-visualização

   O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.

   • VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
   • HermesLê seus comentários na pré-visualização e prepara a próxima revisão.
   • OpenDesignRenderiza o preview, expõe alvos data-od-id para comentários e edições.
   • CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.

   Preview · 390pxComment mode

   Comment on · list

   Unread weight on sender and subject; the preview stays light.

   Comment on · thread

   Suggested reply is a draft with a Send button, never auto-sent.
5. 5

   Revisar e Verificar

   Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.

   • VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
   • HermesAplica as alterações no local e executa o arquivo novamente.
   • OpenDesignMantém as versões lado a lado; exporta uma imagem ou o HTML quando você terminar.
   • CheckReverifica apenas a área que mudou, depois a página inteira uma vez em cada breakpoint.

   Verification · v23 of 4

   • ✓Urgent is the only accent
   • ✓Suggested reply requires Send
   • ✓No horizontal scroll at 390px
   • Assign and snooze — checked by you