# Flujo de trabajo Plan-Code-Verify (/es/docs/verdent-for-vscode/core-features/plan-code-verify-loop)

> El flujo de trabajo Plan-Code-Verify ofrece control preciso sobre los requisitos, la implementación y la validación mediante múltiples modalidades de entrada.



### Lo que aprenderás [#lo-que-aprenderás]

* Qué es el flujo de trabajo Plan-Code-Verify
* Métodos de especificación multimodales (lenguaje natural, visual, interactivo)

***

## Flujo de trabajo **Plan-Code-Verify** [#flujo-de-trabajo-plan-code-verify]

Integra las tres fases del flujo de trabajo de Verdent:

**Plan:** aclara los requisitos y diseña soluciones con diagramas de lógica claros y visuales, además de reglas de planificación. Expresa las especificaciones mediante lenguaje natural, maquetas de interfaz o demostraciones interactivas.

**Code:** revisa, refactoriza y mejora tu código con facilidad, y entrega resultados claros en todo momento. Las entradas multimodales aseguran que la implementación coincida con los requisitos exactos.

**Verify:** detecta problemas a tiempo con un subagente verificador y herramientas de navegador para obtener resultados confiables.

**Cómo funciona el flujo de trabajo Plan-Code-Verify:**

<Steps>
  <Step title="Reglas de planificación">
    * Elige plantillas de roles integradas (Frontend, Test, Product Manager)
    * Crea reglas de planificación personalizadas que se ajusten a tu forma de pensar y a tus hábitos de trabajo
  </Step>

  <Step title="Vista previa del plan">
    * Aclara la estructura y el contenido del plan mediante la revisión del plan
    * Después de alinearte con la IA durante la revisión del plan, selecciona "Generate Plan" para crear el contenido detallado del plan
  </Step>

  <Step title="Diseño del plan">
    Especificación detallada que incluye:

    * Diagramas de arquitectura del sistema
    * Estructura y relaciones de los componentes
    * Modelos de datos y contratos de API
    * Especificaciones de UI/UX con maquetas visuales
    * Justificación del stack tecnológico
  </Step>

  <Step title="Desglose de tareas">
    Lista jerárquica con dependencias y prioridades para organizar el flujo de trabajo de implementación

    * Muestra el progreso de las tareas en tiempo real
    * Resume su estado de finalización una vez completadas
  </Step>

  <Step title="Resúmenes de diferencias">
    Revisa los cambios de código y el subagente revisor de código

    * Localización de cambios: enumera todos los archivos modificados con los cambios de código
    * Resumen de lógica: explica en lenguaje natural qué cambió y por qué
    * Análisis de impacto: destaca los efectos posteriores en la documentación, los API y el código dependiente
  </Step>

  <Step title="Verifica antes ">
    * Verificación automatizada configurable
    * Verifica con subagentes y herramientas de navegador
  </Step>
</Steps>

## Especificación multimodal [#especificación-multimodal]

Admite múltiples formas de expresar tus requisitos:

<Tabs>
  <Tab title="Lenguaje natural">
    Expresa requisitos, restricciones y criterios de aceptación en lenguaje natural:

    * Comprensión contextual enriquecida de los requisitos técnicos y de negocio
    * Admite especificaciones complejas y de múltiples capas
    * Flujo de conversación natural para la definición de requisitos
  </Tab>

  <Tab title="Requisitos visuales">
    Sube maquetas de interfaz, capturas de diseño o implementaciones de referencia:

    * Recreación pixel-perfect a partir de especificaciones visuales
    * Admite múltiples formatos de imagen para comunicar el diseño
    * Contexto visual para la implementación de UI/UX
  </Tab>

  <Tab title="Demos interactivas">
    Comparte ejemplos o prototipos funcionales:

    * Comunica el comportamiento y las expectativas de experiencia de usuario
    * Demuestra interacciones y flujos de trabajo complejos
    * Ejemplos en vivo para comunicar los requisitos con mayor claridad
  </Tab>
</Tabs>

Este enfoque multimodal garantiza que los requisitos complejos, especialmente las especificaciones de UI/UX, se capturen con precisión y sin ambigüedades.

***

## Consulta también [#consulta-también]

<CardGroup cols="3">
  <Card title="Professional Plan" icon="diagram-project" href="/docs/verdent-for-vscode/core-features/professional-plan">
    Transforma ideas en planes de implementación
  </Card>

  <Card title="Code Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    Flujo de trabajo de revisión de código de nivel empresarial
  </Card>
</CardGroup>