Projetar com
Devin no
OpenDesign.

docs-getting-started.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 Devin

   Siga as instruções do Devin na sua versão instalada. Autentique-se com sua conta Devin (Cognition) — as credenciais permanecem com seu agente na sua máquina.

   Documentação do Devin

   # 1. Install Devin for Terminal
   curl -fsSL https://cli.devin.ai/install.sh | bash
   
   # 2. Start it in your project and sign in on first run
   cd your-project
   devin             # sign in with your Devin (Cognition) account

   Das notas de configuração do Devin no guia publicado; verifique 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 no Devin

   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.
   • DevinLê 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 · PromptDevin

   You

   Design the getting-started section: nav, article with callout and code, on-this-page rail. Return one reviewable file.

   Devin

   Working autonomously; I will report back with the file and a list of what I could not verify. Continue?
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.
   • DevinCarrega 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

   Devin 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.
   • DevinPlaneja 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

   • docs-getting-started.htmlnew
   • AGENTS.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.
   • DevinLê 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 · article

   Measure is too wide at 1440; cap it and give the code block the full column.

   Comment on · nav

   Active item in green text, not a green background.
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.
   • DevinAplica as mudanças 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

   • ✓Article measure capped
   • ✓Active nav in accent text only
   • ✓No horizontal scroll at 390px
   • Copy-code action — checked by you