# Plan-Code-Verify Workflow (/docs/verdent-for-vscode/core-features/plan-code-verify-loop)

> The Plan-Code-Verify workflow provides precise control over requirements, implementation, and validation through multiple input modalities.



### What You'll Learn [#what-youll-learn]

* What is Plan-Code-Verify workflow
* Multi-modal specification methods (natural language, visual, interactive)

***

## **Plan-Code-Verify** Workflow [#plan-code-verify-workflow]

Integrates all three phases of Verdent's workflow:

**Plan:** Clarify requirements and design solutions with clear, visual logic diagrams and plan rules. Express specifications through natural language, UI mockups, or interactive demos.

**Code**:Review, refactor, and improve your code with ease, and deliver clear results every time. Multi-modal inputs ensure implementation matches exact requirements.

**Verify:** Catch issues early with a verifier subagent and browser tools for reliability results.

**How Plan-Code-Verify Workflow works：**

<Steps>
  <Step title="Plan Rules">
    * Choose built-in role templates (Frontend, Test, Product Manager)
    * Creating custom plan rules that match your thinking style and work habits
  </Step>

  <Step title="Plan Preview">
    * Clarify the structure and content of the plan through plan review
    * After aligning with the AI during the plan review, click ‘Generate Plan’ to create the detailed plan content
  </Step>

  <Step title="Plan Design">
    Detailed specification including:

    * System architecture diagrams
    * Component structure and relationships
    * Data models and API contracts
    * UI/UX specifications with visual mockups
    * Technology stack justification
  </Step>

  <Step title="Task Breakdown">
    Hierarchical list with dependencies and priorities to organize implementation workflow

    * Display the real-time progress of tasks
    * Summarize their completion status once finished
  </Step>

  <Step title="Diff Summaries">
    Review Code Changes and Code-reviewer Subagent

    * Change Localization - Lists all modified files with Code Changes
    * Logic Summarization - Explains what changed and why in natural language
    * Impact Analysis - Highlights downstream effects on documentation, APIs, and dependent code
  </Step>

  <Step title="Verify Earlier ">
    * Configurable automated verification
    * Verify with Subagents and browser tools
  </Step>
</Steps>

## Multi-Modal Specification [#multi-modal-specification]

Supports multiple ways to express your requirements:

<Tabs>
  <Tab title="Natural Language">
    Express requirements, constraints, and acceptance criteria in natural language:

    * Rich contextual understanding of technical and business requirements
    * Supports complex, multi-layered specifications
    * Natural conversation flow for requirement definition
  </Tab>

  <Tab title="Visual Requirements">
    Upload UI mockups, design screenshots, or reference implementations:

    * Pixel-perfect recreation from visual specifications
    * Supports multiple image formats for design communication
    * Visual context for UI/UX implementation
  </Tab>

  <Tab title="Interactive Demos">
    Share working examples or prototypes:

    * Communicate behavior and user experience expectations
    * Demonstrate complex interactions and workflows
    * Live examples for clearer requirement communication
  </Tab>
</Tabs>

This multi-modal approach ensures complex requirements, especially UI/UX specifications, are captured accurately without ambiguity.

***

## See Also [#see-also]

<CardGroup cols="3">
  <Card title="Professional Plan" icon="diagram-project" href="/docs/verdent-for-vscode/core-features/professional-plan">
    Transform ideas into implementation plans
  </Card>

  <Card title="Code Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    Enterprise-grade code review workflow
  </Card>
</CardGroup>