Görsellerle çalışma
Verdent içinde görselleri yükleme ve görsellerle çalışma
Verdent for VS Code, güçlü çok modlu yeteneklere sahiptir; görseller yüklemenize ve görsel analiz, taslaklardan kod üretimi, ekran görüntüleriyle hata ayıklama ve daha fazlasını almanıza olanak tanır. Bu kılavuz, geliştirme sürecinizde görsel anlamadan yararlanmak için pratik iş akışlarını gösterir.
Verdent içine görsel yükleme
Diyelim ki analiz ya da referans için Verdent ile bir görsel paylaşmak istiyorsunuz.
Hızlı pano yöntemi:
- Bir görseli panonuza kopyalayın (ekran görüntüsü, tarayıcıdan kopyalanan vb.)
- Verdent giriş alanına tıklayın
- Yapıştırmak için Ctrl+V (Windows/Linux)
Önemli: macOS'ta görselleri yapıştırmak için Ctrl+V kullanın (Cmd+V değil).
Görsel sohbette görünür.
Görselleri yola göre referans verin:
Analyze this screenshot: /path/to/screenshot.pngVerdent, belirtilen yoldan görseli okur.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngYaygın biçimler: PNG, JPG, JPEG, WebP, GIF
Birden fazla görselle çalışın:
- Panodan birden fazla görseli sırayla yapıştırın
- Ya da birden fazla yola referans verin:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngTüm görseller sohbette görünür ve topluca referans verilebilir.
İpuçları:
- Desteklenen biçimler: PNG, JPG, JPEG, WebP, GIF, BMP
- Görseller, çok turlu tartışmalar için sohbet bağlamında kalır
- Yüklediğiniz görsellere takip eden sorularda referans verebilirsiniz
- Net görsel kalitesi daha iyi analiz sonuçları sağlar
Tasarım taslaklarından kod üretme
Diyelim ki bir tasarım taslağınız var ve Verdent tarafından uygulama kodunun üretilmesini istiyorsunuz.
Tasarım taslağını yükleyin
Taslak görselini kopyalayın (Figma dışa aktarımı, tasarım aracı veya elle çizilmiş eskiz) ya da dosya yoluna göre referans verin.
Kod üretimi isteyin
Generate React components to implement this dashboard designVerdent, görsel yapıyı analiz eder.
Verdent bileşen yapısını oluşturur
Verdent, görsel öğeleri belirler ve şunları üretir:
// 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>
);
}Bileşenler taslak yapısıyla eşleşir.
İlgili CSS'i üretin
Generate Tailwind CSS classes to match the mockup stylingVerdent, görsel tasarıma dayalı olarak stil ekler:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>Ayrıntıları iyileştirin
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent, tasarımla daha hassas eşleşmek için düzenlemeler yapar.
İpuçları:
- Daha yüksek çözünürlüklü taslaklar daha doğru kod üretir
- Çerçevenizi belirtin: React, Vue, Angular, vanilla HTML/CSS
- Stil yaklaşımından bahsedin: Tailwind, CSS Modules, Styled Components
- Hassasiyet için renk kodları veya tasarım sistemi ayrıntıları sağlayın
- Hızlı prototipler için elle çizilmiş eskizler de işe yarar
Ekran görüntüleriyle hataları ayıklama
Diyelim ki bir hata mesajıyla karşılaştınız ve onu anlamak için yardım istiyorsunuz.
Hatayı gösteren tarayıcı konsolunun ekran görüntüsünü yapıştırın:
Here's the error I'm getting in the console. What's causing it?Verdent şunları okur:
- Hata mesajı metni
- Yığın izi bilgisi
- Dosya adları ve satır numaraları
- İlgili konsol uyarıları
Verdent tanı sağlar:
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 düzeltmeyi önerir.
Terminal derleme hatalarının ekran görüntüsünü yapıştırın:
My TypeScript build is failing with these errorsVerdent şunları analiz eder:
- Tür hataları
- Dosya yolları
- Hata kodları
- Derleme bağlamı
Verdent açıklar:
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).Uygulama günlüklerindeki yığın izinin ekran görüntüsünü yapıştırın:
The application crashed with this exceptionVerdent şunları inceler:
- İstisna türü
- Yığın izi
- Yöntem adları ve satır numaraları
- Bağlamsal günlük mesajları
Kök nedeni belirler ve düzeltmeler önerir.
Tarayıcı DevTools'taki Network sekmesinin ekran görüntüsünü yapıştırın:
This API request is failing, here's the network tabVerdent şunları analiz eder:
- HTTP durum kodu
- İstek/yanıt başlıkları
- İstek yükü
- Yanıt gövdesi
API sorununu teşhis eder.
İpuçları:
- Tam hata mesajlarını ekleyin (önemli ayrıntıları kırpmayın)
- Mümkün olduğunda yığın izlerini eksiksiz gösterin
- Çevredeki bağlamı ekleyin (diğer konsol mesajları, ağ istekleri)
- Hatayı metinle açıklamak yerine gerçek hatanın ekran görüntüsünü alın
Sıkça sorulan sorular
Hangi görsel dosya boyutu sınırları geçerli?
Maksimum dosya boyutu: 5MB (aşılırsa otomatik sıkıştırılır; sıkıştırma sonrası hâlâ >5MB ise hata verir)
Maksimum çözünürlük: 2000×2000 piksel
Desteklenen biçimler: PNG, JPG, JPEG, GIF, BMP, WebP
En iyi uygulama: Optimal performans ve doğru analiz için 2000×2000'e kadar çözünürlüklerde 3MB'ın altındaki görselleri kullanın.
Verdent tek bir sohbette birden fazla görseli analiz edebilir mi?
Evet. Birden fazla görseli ardışık olarak yapıştırabilir ya da tek bir istemde birden fazla dosya yoluna referans verebilirsiniz. Verdent, karşılaştırma ve analiz için tüm görseller arasında bağlamı korur. Örnek: "Bu üç taslağı karşılaştır ve farkları belirle."
Verdent görsellerimi harici sunuculara yükler mi?
Pano aracılığıyla yapıştırılan ya da dosya yoluna göre referans verilen görseller, sohbet oturumunuz içinde işlenir. Görseller kalıcı olarak saklanmaz ve yeni bir sohbet başlattığınızda temizlenir. Dosya yolu referansları, görseli yüklemeden yerel olarak okur.
Verdent taslaklardan üretime hazır kod üretebilir mi?
Verdent, taslağınızdaki görsel yapıyı, düzeni ve stili uygulayan işlevsel başlangıç kodu üretir. Genellikle iş mantığı, veri entegrasyonu, erişilebilirlik özellikleri, hata yönetimi ve üretim optimizasyonları ekleyerek iyileştirmeniz gerekir.
Verdent tasarım taslağımı yanlış yorumlarsa ne olur?
Yinelemeli olarak düzeltici geri bildirim sağlayın. "Başlık gri değil mavi olmalı" ya da "O kartlar 4 sütun değil 3 sütunlu bir ızgarada olmalı" deyin. Verdent, düzeltmelerinize göre uygulamayı ayarlar. Birden fazla iyileştirme turu normaldir.