---
title: "Plan-Code-Verify 工作流程"
description: "Plan-Code-Verify 工作流程透過多種輸入方式，對需求、實作與驗證提供精準的掌控。"
---

###  你將學到什麼

- 什麼是 Plan-Code-Verify 工作流程
- 多模態的規格表達方法（自然語言、視覺、互動式）

---

## **Plan-Code-Verify** 工作流程

整合了 Verdent 工作流程的三個階段：

**Plan（規劃）：** 透過清晰、視覺化的邏輯圖與規劃規則來釐清需求並設計解決方案。你可以透過自然語言、UI 原型或互動式展示來表達規格。

**Code（編碼）：** 輕鬆地審查、重構並改善你的程式碼，每次都交付清晰的成果。多模態輸入確保實作完全符合需求。

**Verify（驗證）：** 透過驗證子代理與瀏覽器工具及早發現問題，獲得可靠的結果。

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