使用圖片
在 Verdent 中上傳與使用圖片
Verdent for VS Code 具備強大的多模態能力，讓你可以上傳圖片並獲得視覺分析、從設計稿產生程式碼、透過截圖除錯等等。本指南示範了在開發流程中運用圖片理解能力的實用工作流程。
上傳圖片到 Verdent
假設你想要分享一張圖片給 Verdent 進行分析或參考。
快速剪貼簿方式：
- 將圖片複製到剪貼簿（截圖、從瀏覽器複製等）
- 點擊 Verdent 的輸入欄位
- 按 Ctrl+V（Windows/Linux）貼上
重要： 在 macOS 上，請使用 Ctrl+V（而非 Cmd+V）來貼上圖片。
圖片會出現在對話中。
透過路徑參照圖片：
Analyze this screenshot: /path/to/screenshot.pngVerdent 會從指定路徑讀取圖片。
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.png常見格式：PNG、JPG、JPEG、WebP、GIF
使用多張圖片：
- 從剪貼簿依序貼上多張圖片
- 或參照多個路徑：
Compare these three mockups: design-v1.png, design-v2.png, design-v3.png所有圖片都會出現在對話中，並可一併參照。
提示：
- 支援的格式：PNG、JPG、JPEG、WebP、GIF、BMP
- 圖片會保留在對話上下文中，供多輪討論使用
- 你可以在後續問題中參照已上傳的圖片
- 清晰的圖片品質能產出更好的分析結果
從設計稿產生程式碼
假設你有一份設計稿，想讓 Verdent 產生對應的實作程式碼。
上傳設計稿
複製設計稿圖片（來自 Figma 匯出、設計工具或手繪草圖）或透過檔案路徑參照它。
請求產生程式碼
Generate React components to implement this dashboard designVerdent 會分析視覺結構。
Verdent 建立元件結構
Verdent 辨識視覺元素並產生：
// 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>
);
}元件會符合設計稿的結構。
產生對應的 CSS
Generate Tailwind CSS classes to match the mockup stylingVerdent 會根據視覺設計加上樣式：
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>調整細節
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent 會進行調整，使其更精確地符合設計。
提示：
- 解析度較高的設計稿能產出更精準的程式碼
- 指定你的框架：React、Vue、Angular、原生 HTML/CSS
- 提及樣式方式：Tailwind、CSS Modules、Styled Components
- 提供色碼或設計系統細節以提高精確度
- 手繪草圖也適用於快速原型製作
透過截圖除錯
假設你遇到一則錯誤訊息，想要協助理解它。
貼上顯示錯誤的瀏覽器主控台截圖：
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 會建議修正方式。
貼上終端機編譯錯誤的截圖：
My TypeScript build is failing with these errorsVerdent 會分析：
- 型別錯誤
- 檔案路徑
- 錯誤代碼
- 編譯上下文
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).貼上應用程式記錄中堆疊追蹤的截圖：
The application crashed with this exceptionVerdent 會檢查：
- 例外類型
- 堆疊追蹤
- 方法名稱與行號
- 相關的記錄訊息
並找出根本原因並建議修正方式。
貼上瀏覽器 DevTools Network 分頁的截圖：
This API request is failing, here's the network tabVerdent 會分析：
- HTTP 狀態碼
- 請求／回應標頭
- 請求酬載
- 回應內容
並診斷 API 問題。
提示：
- 包含完整的錯誤訊息（不要裁切掉重要細節）
- 盡可能完整顯示堆疊追蹤
- 包含周圍的上下文（其他主控台訊息、網路請求）
- 截下實際的錯誤畫面，而非僅以文字描述
常見問題
圖片檔案大小有什麼限制？
最大檔案大小： 5MB（超過時會自動壓縮；若壓縮後仍 >5MB 則會出現錯誤）
最大解析度： 2000×2000 像素
支援的格式： PNG、JPG、JPEG、GIF、BMP、WebP
最佳做法： 使用小於 3MB、解析度至多 2000×2000 的圖片，以獲得最佳效能與精準分析。
Verdent 能在單一對話中分析多張圖片嗎？
可以。你可以依序貼上多張圖片，或在一則提示詞中參照多個檔案路徑。Verdent 會跨所有圖片維持上下文，以供比較與分析。例如：「比較這三份設計稿並找出差異。」
Verdent 會將我的圖片上傳到外部伺服器嗎？
透過剪貼簿貼上或以檔案路徑參照的圖片，會在你的對話工作階段內處理。圖片不會被永久儲存，並會在你開始新對話時清除。檔案路徑參照會在本機讀取圖片，不會上傳。
Verdent 能從設計稿產生可上線的程式碼嗎？
Verdent 會產生可運作的起始程式碼，實作出你設計稿中的視覺結構、版面與樣式。你通常需要進一步加上商業邏輯、資料整合、無障礙功能、錯誤處理與正式環境最佳化來完善它。
如果 Verdent 誤解了我的設計稿怎麼辦？
反覆提供修正回饋。例如說「標題應該是藍色，而不是灰色」或「那些卡片應該是 3 欄格線，而不是 4 欄」。Verdent 會根據你的修正調整實作。多輪調整是很正常的。