---
title: "Fluxo de trabalho Plan-Code-Verify"
description: "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 é o fluxo de trabalho Plan-Code-Verify
- Métodos de especificação multimodais (linguagem natural, visual, interativo)

---

## 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

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

<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>