---
title: 使用圖片
description: 在 Verdent 中上傳與使用圖片
---

Verdent for VS Code 具備強大的多模態能力，讓你可以上傳圖片並獲得視覺分析、從設計稿產生程式碼、透過截圖除錯等等。本指南示範了在開發流程中運用圖片理解能力的實用工作流程。

---

## 上傳圖片到 Verdent

假設你想要分享一張圖片給 Verdent 進行分析或參考。

<Tabs>
  <Tab title="複製貼上">
    快速剪貼簿方式：

    1. 將圖片複製到剪貼簿（截圖、從瀏覽器複製等）
    2. 點擊 Verdent 的輸入欄位
    3. 按 **Ctrl+V**（Windows/Linux）貼上

    **重要：** 在 macOS 上，請使用 **Ctrl+V**（而非 Cmd+V）來貼上圖片。

    圖片會出現在對話中。
  </Tab>

  <Tab title="檔案路徑參照">
    透過路徑參照圖片：

    ```
    Analyze this screenshot: /path/to/screenshot.png
    ```

    Verdent 會從指定路徑讀取圖片。

    <CodeGroup>
    ```bash "Absolute Path"
    /home/user/screenshots/error.png
    /Users/john/Desktop/mockups/design.png
    ```

    ```bash "Relative Path (Project Root)"
    ./screenshots/error.png
    ./mockups/design.png
    ```

    ```bash "Relative Path (Current Directory)"
    ../images/diagram.png
    ../../assets/logo.png
    ```
    </CodeGroup>

    常見格式：PNG、JPG、JPEG、WebP、GIF
  </Tab>

  <Tab title="多張圖片">
    使用多張圖片：

    1. 從剪貼簿依序貼上多張圖片
    2. 或參照多個路徑：

    ```
    Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
    ```

    所有圖片都會出現在對話中，並可一併參照。
  </Tab>
</Tabs>

<Tip>
  **提示：**
  - 支援的格式：PNG、JPG、JPEG、WebP、GIF、BMP
  - 圖片會保留在對話上下文中，供多輪討論使用
  - 你可以在後續問題中參照已上傳的圖片
  - 清晰的圖片品質能產出更好的分析結果
</Tip>

***

## 從設計稿產生程式碼

假設你有一份設計稿，想讓 Verdent 產生對應的實作程式碼。

<Steps>
  <Step title="上傳設計稿">
    複製設計稿圖片（來自 Figma 匯出、設計工具或手繪草圖）或透過檔案路徑參照它。
  </Step>

  <Step title="請求產生程式碼">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent 會分析視覺結構。
  </Step>

  <Step title="Verdent 建立元件結構">
    Verdent 辨識視覺元素並產生：

    ```tsx
    // DashboardLayout.tsx
    import React from 'react';
    import { StatCard } from './StatCard';
    import { RecentActivity } from './RecentActivity';
    import { UserChart } from './UserChart';

    export function DashboardLayout() {
      return (
        <div className="dashboard-container">
          <div className="stats-grid">
            <StatCard title="Total Users" value="1,234" trend="+12%" />
            <StatCard title="Revenue" value="$45.6K" trend="+8%" />
            <StatCard title="Active Sessions" value="89" trend="-3%" />
          </div>
          <div className="charts-section">
            <UserChart />
          </div>
          <div className="activity-section">
            <RecentActivity />
          </div>
        </div>
      );
    }
    ```

    元件會符合設計稿的結構。
  </Step>

  <Step title="產生對應的 CSS">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent 會根據視覺設計加上樣式：

    ```tsx
    <div className="grid grid-cols-3 gap-6 p-6">
      <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
    </div>
    ```
  </Step>

  <Step title="調整細節">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent 會進行調整，使其更精確地符合設計。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 解析度較高的設計稿能產出更精準的程式碼
  - 指定你的框架：React、Vue、Angular、原生 HTML/CSS
  - 提及樣式方式：Tailwind、CSS Modules、Styled Components
  - 提供色碼或設計系統細節以提高精確度
  - 手繪草圖也適用於快速原型製作
</Tip>

***

## 透過截圖除錯

假設你遇到一則錯誤訊息，想要協助理解它。

<Tabs>
  <Tab title="瀏覽器主控台錯誤">
    貼上顯示錯誤的瀏覽器主控台截圖：

    ```
    Here's the error I'm getting in the console. What's causing it?
    ```

    Verdent 會讀取：
    - 錯誤訊息文字
    - 堆疊追蹤資訊
    - 檔名與行號
    - 相關的主控台警告

    Verdent 會提供診斷：
    ```
    This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.
    ```

    Verdent 會建議修正方式。
  </Tab>

  <Tab title="終端機錯誤">
    貼上終端機編譯錯誤的截圖：

    ```
    My TypeScript build is failing with these errors
    ```

    Verdent 會分析：
    - 型別錯誤
    - 檔案路徑
    - 錯誤代碼
    - 編譯上下文

    Verdent 會說明：
    ```
    You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).
    ```
  </Tab>

  <Tab title="執行階段例外">
    貼上應用程式記錄中堆疊追蹤的截圖：

    ```
    The application crashed with this exception
    ```

    Verdent 會檢查：
    - 例外類型
    - 堆疊追蹤
    - 方法名稱與行號
    - 相關的記錄訊息

    並找出根本原因並建議修正方式。
  </Tab>

  <Tab title="網路錯誤">
    貼上瀏覽器 DevTools Network 分頁的截圖：

    ```
    This API request is failing, here's the network tab
    ```

    Verdent 會分析：
    - HTTP 狀態碼
    - 請求／回應標頭
    - 請求酬載
    - 回應內容

    並診斷 API 問題。
  </Tab>
</Tabs>

<Tip>
  **提示：**
  - 包含完整的錯誤訊息（不要裁切掉重要細節）
  - 盡可能完整顯示堆疊追蹤
  - 包含周圍的上下文（其他主控台訊息、網路請求）
  - 截下實際的錯誤畫面，而非僅以文字描述
</Tip>

***

## 常見問題

<Accordion title="圖片檔案大小有什麼限制？">
**最大檔案大小：** 5MB（超過時會自動壓縮；若壓縮後仍 >5MB 則會出現錯誤）

**最大解析度：** 2000×2000 像素

**支援的格式：** PNG、JPG、JPEG、GIF、BMP、WebP

**最佳做法：** 使用小於 3MB、解析度至多 2000×2000 的圖片，以獲得最佳效能與精準分析。
</Accordion>

<Accordion title="Verdent 能在單一對話中分析多張圖片嗎？">
可以。你可以依序貼上多張圖片，或在一則提示詞中參照多個檔案路徑。Verdent 會跨所有圖片維持上下文，以供比較與分析。例如：「比較這三份設計稿並找出差異。」
</Accordion>

<Accordion title="Verdent 會將我的圖片上傳到外部伺服器嗎？">
透過剪貼簿貼上或以檔案路徑參照的圖片，會在你的對話工作階段內處理。圖片不會被永久儲存，並會在你開始新對話時清除。檔案路徑參照會在本機讀取圖片，不會上傳。
</Accordion>

<Accordion title="Verdent 能從設計稿產生可上線的程式碼嗎？">
Verdent 會產生可運作的起始程式碼，實作出你設計稿中的視覺結構、版面與樣式。你通常需要進一步加上商業邏輯、資料整合、無障礙功能、錯誤處理與正式環境最佳化來完善它。
</Accordion>

<Accordion title="如果 Verdent 誤解了我的設計稿怎麼辦？">
反覆提供修正回饋。例如說「標題應該是藍色，而不是灰色」或「那些卡片應該是 3 欄格線，而不是 4 欄」。Verdent 會根據你的修正調整實作。多輪調整是很正常的。
</Accordion>

***

## 延伸閱讀

<CardGroup cols={2}>
  <Card title="撰寫新程式碼" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    使用 Verdent 建立新功能與元件
  </Card>

  <Card title="理解程式碼" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    程式碼理解與探索的工作流程
  </Card>
</CardGroup>