# Fluxo de trabalho Plan-Code-Verify (/pt/docs/verdent-for-vscode/core-features/plan-code-verify-loop)

> O fluxo de trabalho Plan-Code-Verify oferece controle preciso sobre requisitos, implementação e validação por meio de múltiplas modalidades de entrada.



### O que você vai aprender [#o-que-você-vai-aprender]

* O que é o fluxo de trabalho Plan-Code-Verify
* Métodos de especificação multimodais (linguagem natural, visual, interativo)

***

## Fluxo de trabalho **Plan-Code-Verify** [#fluxo-de-trabalho-plan-code-verify]

Integra as três fases do fluxo de trabalho do Verdent:

**Plan:** Esclareça requisitos e projete soluções com diagramas de lógica visuais e claros e regras de planejamento. Expresse especificações por meio de linguagem natural, mockups de UI ou demos interativos.

**Code:** Revise, refatore e melhore seu código com facilidade, entregando resultados claros sempre. Entradas multimodais garantem que a implementação corresponda exatamente aos requisitos.

**Verify:** Detecte problemas cedo com um subagente verificador e ferramentas de navegador para resultados confiáveis.

**Como o fluxo de trabalho Plan-Code-Verify funciona:**

<Steps>
  <Step title="Regras de planejamento">
    * Escolha modelos de papéis integrados (Frontend, Test, Product Manager)
    * Crie regras de planejamento personalizadas que combinem com seu estilo de pensamento e hábitos de trabalho
  </Step>

  <Step title="Pré-visualização do plano">
    * Esclareça a estrutura e o conteúdo do plano por meio da revisão do plano
    * Após alinhar com a IA durante a revisão do plano, clique em ‘Generate Plan’ para criar o conteúdo detalhado do plano
  </Step>

  <Step title="Design do plano">
    Especificação detalhada incluindo:

    * Diagramas de arquitetura do sistema
    * Estrutura e relacionamentos de componentes
    * Modelos de dados e contratos de API
    * Especificações de UI/UX com mockups visuais
    * Justificativa da stack tecnológica
  </Step>

  <Step title="Divisão de tarefas">
    Lista hierárquica com dependências e prioridades para organizar o fluxo de trabalho de implementação

    * Exibe o progresso em tempo real das tarefas
    * Resume o status de conclusão quando finalizadas
  </Step>

  <Step title="Resumos de diff">
    Revise as mudanças de código e o subagente de revisão de código

    * Localização das mudanças - Lista todos os arquivos modificados com as mudanças de código
    * Resumo da lógica - Explica o que mudou e por quê em linguagem natural
    * Análise de impacto - Destaca os efeitos posteriores na documentação, APIs e código dependente
  </Step>

  <Step title="Verifique mais cedo">
    * Verificação automatizada configurável
    * Verifique com subagentes e ferramentas de navegador
  </Step>
</Steps>

## Especificação multimodal [#especificação-multimodal]

Suporta múltiplas formas de expressar seus requisitos:

<Tabs>
  <Tab title="Linguagem natural">
    Expresse requisitos, restrições e critérios de aceitação em linguagem natural:

    * Compreensão contextual rica de requisitos técnicos e de negócios
    * Suporta especificações complexas e em múltiplas camadas
    * Fluxo de conversa natural para definição de requisitos
  </Tab>

  <Tab title="Requisitos visuais">
    Faça upload de mockups de UI, capturas de tela de design ou implementações de referência:

    * Recriação pixel-perfect a partir de especificações visuais
    * Suporta múltiplos formatos de imagem para comunicação de design
    * Contexto visual para implementação de UI/UX
  </Tab>

  <Tab title="Demos interativos">
    Compartilhe exemplos ou protótipos funcionais:

    * Comunique expectativas de comportamento e experiência do usuário
    * Demonstre interações e fluxos de trabalho complexos
    * Exemplos ao vivo para uma comunicação de requisitos mais clara
  </Tab>
</Tabs>

Essa abordagem multimodal garante que requisitos complexos, especialmente especificações de UI/UX, sejam capturados com precisão e sem ambiguidade.

***

## Veja também [#veja-também]

<CardGroup cols="3">
  <Card title="Professional Plan" icon="diagram-project" href="/docs/verdent-for-vscode/core-features/professional-plan">
    Transforme ideias em planos de implementação
  </Card>

  <Card title="Code Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    Fluxo de trabalho de revisão de código de nível empresarial
  </Card>
</CardGroup>