# Plan-Code-Verify ワークフロー (/ja/docs/verdent-for-vscode/core-features/plan-code-verify-loop)

> Plan-Code-Verify ワークフローは、複数の入力モダリティを通じて要件・実装・検証を正確にコントロールします。



### このページで学べること [#このページで学べること]

* Plan-Code-Verify ワークフローとは何か
* マルチモーダルな仕様指定の方法（自然言語、ビジュアル、インタラクティブ）

***

## **Plan-Code-Verify** ワークフロー [#plan-code-verify-ワークフロー]

Verdent のワークフローを構成する3つのフェーズすべてを統合します。

**Plan:** 明確でビジュアルなロジック図とプランルールを使って、要件を明確化しソリューションを設計します。自然言語、UI モックアップ、インタラクティブなデモを通じて仕様を表現できます。

**Code:** コードのレビュー・リファクタリング・改善を手軽に行い、毎回明確な結果を提供します。マルチモーダルな入力により、実装が要件に正確に一致することを保証します。

**Verify:** verifier サブエージェントとブラウザツールで問題を早期に検出し、信頼性の高い結果を実現します。

**Plan-Code-Verify ワークフローの仕組み：**

<Steps>
  <Step title="プランルール">
    * 組み込みの役割テンプレート（フロントエンド、テスト、プロダクトマネージャー）を選択する
    * 自分の思考スタイルや作業習慣に合わせたカスタムプランルールを作成する
  </Step>

  <Step title="プランプレビュー">
    * プランレビューを通じてプランの構造と内容を明確にする
    * プランレビュー中に AI とすり合わせた後、「Generate Plan」を選択して詳細なプラン内容を作成する
  </Step>

  <Step title="プラン設計">
    詳細な仕様には次の内容が含まれます。

    * システムアーキテクチャ図
    * コンポーネント構造と関係
    * データモデルと API の契約
    * ビジュアルモックアップ付きの UI/UX 仕様
    * 技術スタック選定の根拠
  </Step>

  <Step title="タスク分解">
    依存関係と優先度を持つ階層的なリストで、実装ワークフローを整理します。

    * タスクのリアルタイムな進捗を表示する
    * 完了後にその達成状況をまとめる
  </Step>

  <Step title="差分サマリー">
    コード変更と code-reviewer サブエージェントによるレビュー

    * 変更箇所の特定 - コード変更とともに変更されたすべてのファイルを一覧表示する
    * ロジックのまとめ - 何がなぜ変更されたのかを自然言語で説明する
    * 影響分析 - ドキュメント、API、依存コードへの下流の影響を強調表示する
  </Step>

  <Step title="早期の検証 ">
    * 設定可能な自動検証
    * サブエージェントとブラウザツールによる検証
  </Step>
</Steps>

## マルチモーダルな仕様指定 [#マルチモーダルな仕様指定]

要件を表現するための複数の方法をサポートします。

<Tabs>
  <Tab title="自然言語">
    要件、制約、受け入れ基準を自然言語で表現します。

    * 技術要件とビジネス要件の豊かな文脈理解
    * 複雑で多層的な仕様をサポート
    * 要件定義のための自然な会話の流れ
  </Tab>

  <Tab title="ビジュアル要件">
    UI モックアップ、デザインのスクリーンショット、参考実装をアップロードします。

    * ビジュアル仕様からのピクセルパーフェクトな再現
    * デザインコミュニケーションのための複数の画像形式をサポート
    * UI/UX 実装のためのビジュアルコンテキスト
  </Tab>

  <Tab title="インタラクティブデモ">
    動作するサンプルやプロトタイプを共有します。

    * 動作やユーザー体験の期待を伝える
    * 複雑なインタラクションやワークフローを実演する
    * より明確な要件伝達のためのライブサンプル
  </Tab>
</Tabs>

このマルチモーダルなアプローチにより、複雑な要件、特に UI/UX 仕様を曖昧さなく正確に捉えられます。

***

## 関連情報 [#関連情報]

<CardGroup cols="3">
  <Card title="Professional Plan" icon="diagram-project" href="/docs/verdent-for-vscode/core-features/professional-plan">
    アイデアを実装プランに変換する
  </Card>

  <Card title="Code Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    エンタープライズ品質のコードレビューワークフロー
  </Card>
</CardGroup>