@atezer/figma-mcp-bridge 1.7.23 → 1.7.25

package/skills/ux-copy-guidance/SKILL.md

@@ -0,0 +1,373 @@
+---
+name: ux-copy-guidance
+description: UX yazarlık rehberi — CTA, hata mesajı, boş durum, onay diyaloğu, başarı mesajı ve yükleme durumu için copy kalıpları üretir. Marka ses/ton profili ile kişiselleştirir. Figma text node'larına doğrudan uygulayabilir. "UX copy yaz", "buton metni ne olsun", "hata mesajı", "empty state copy", "boş durum metni", "copy kılavuzu", "marka sesi", "ton rehberi", "microcopy" ifadeleriyle tetiklenir. F-MCP Bridge plugin bağlantısı gerektirir (Figma entegrasyonu için).
+metadata:
+  mcp-server: user-figma-mcp-bridge
+  personas:
+    - designer
+    - uidev
+    - po
+---
+
+# UX Copy Guidance — Yazarlık ve Marka Sesi Rehberi
+
+## Overview
+
+Bu skill, arayüz metinlerini (microcopy) tasarım prensipleri ve marka sesiyle uyumlu şekilde üretir veya değerlendirir. Figma text node'larına doğrudan uygulayabilir.
+
+**Okuma + Yazma** — Onay ile Figma text node'larını güncelleyebilir.
+
+## Prerequisites
+
+- F-MCP Bridge plugin bağlı olmalı (Figma entegrasyonu için)
+- İsteğe bağlı: Proje kökünde `.fmcp-brand-profile.json` (marka kişiselleştirmesi)
+
+## F-MCP skill koordinasyonu
+
+- **Referans veren skill'ler:**
+  - `ai-handoff-export` → İçerik Spesifikasyonları bölümü bu skill'e yönlendirir
+  - `figma-screen-analyzer` → Copy kalitesi değerlendirmesinde bu skill'in prensiplerini uygular
+  - `component-documentation` → Bileşen label/placeholder copy'si bu skill'in kalıplarını kullanır
+  - `generate-figma-screen` → Text node oluştururken bu skill'in kalıplarını kullanır
+- **Profil oluşturma:** Bu skill profil yoksa otomatik oluşturma akışı başlatır
+
+---
+
+## 5 Temel Prensip
+
+Her arayüz metni bu 5 prensibe uygun olmalıdır:
+
+| # | Prensip | Açıklama | Örnek |
+|---|---------|----------|-------|
+| 1 | **Anlaşılır** | Jargon yok, belirsizlik yok, açık söyle | "Dosyayı kaldır" ✓ — "Öğeyi kuyruğunuzdan çıkarın" ✗ |
+| 2 | **Kısa** | Tam anlamı en az kelimeyle ifade et | "Kaydet" ✓ — "Değişikliklerinizi kaydetmek için tıklayın" ✗ |
+| 3 | **Tutarlı** | Aynı kavram her yerde aynı terim | "Sil" her yerde "sil" — bazen "kaldır" bazen "çıkar" değil |
+| 4 | **Faydalı** | Her kelime kullanıcının hedefine hizmet etsin | Hata mesajında çözüm yolu ✓ — sadece "Hata oluştu" ✗ |
+| 5 | **İnsanca** | Yardımsever bir insan gibi yaz, robot gibi değil | "Bir sorun oluştu" ✓ — "Exception 403: Forbidden" ✗ |
+
+---
+
+## Kopya Kalıpları
+
+### CTA (Call to Action)
+
+**Formül:** Fiille başla + spesifik ol + sonuca eşle
+
+| Doğru | Yanlış | Neden |
+|-------|--------|-------|
+| Hesap oluştur | Gönder | Sonuç belirsiz |
+| Ücretsiz dene | Başla | Ne başlıyor? |
+| Raporu indir | Tamam | Eylem belirsiz |
+| Değişiklikleri kaydet | İleri | Ne olacak? |
+
+**Kurallar:**
+- Max uzunluk: `.fmcp-brand-profile.json` → `copyRules.maxCTALength` (varsayılan: 24 karakter)
+- Kaçınılacak kelimeler: `.fmcp-brand-profile.json` → `copyRules.avoidWords`
+- Tercih edilecek kelimeler: `.fmcp-brand-profile.json` → `copyRules.preferWords`
+
+### Hata Mesajları
+
+**Formül:** Ne oldu + Neden + Nasıl düzeltilir
+
+```
+"Ödeme reddedildi. Bankanız kartı onaylamadı. Farklı bir kart deneyin veya bankanızla iletişime geçin."
+ ─────────────    ──────────────────────    ─────────────────────────────────────────────────────
+  Ne oldu           Neden                    Nasıl düzeltilir
+```
+
+| Durum | Örnek |
+|-------|-------|
+| Doğrulama hatası | "E-posta adresi geçersiz. Lütfen @ işareti içeren bir adres girin." |
+| Sunucu hatası | "Bir sorun oluştu. Birkaç dakika sonra tekrar deneyin." |
+| Bağlantı hatası | "İnternet bağlantınız kesildi. Bağlantınızı kontrol edip tekrar deneyin." |
+| Yetki hatası | "Bu sayfaya erişim izniniz yok. Yöneticinizden izin isteyin." |
+
+**Ton:** `.fmcp-brand-profile.json` → `copyRules.errorTone`
+- `empathetic-actionable` (varsayılan): Empatik + çözüm odaklı
+- `technical`: Doğrudan teknik bilgi
+- `minimal`: Sadece gerekli bilgi
+
+### Boş Durumlar (Empty State)
+
+**Formül:** Bu ne + Neden boş + Nasıl başlanır
+
+```
+"Henüz proje yok. İlk projenizi oluşturarak ekibinizle çalışmaya başlayın."
+ ──────────────    ──────────────────────────────────────────────────────
+  Bu ne + neden boş     Nasıl başlanır
+```
+
+| Durum | Örnek |
+|-------|-------|
+| İlk kullanım | "Henüz mesaj yok. İlk mesajınızı gönderin!" |
+| Arama sonuçsuz | "Sonuç bulunamadı. Farklı anahtar kelimelerle deneyin." |
+| Filtre sonuçsuz | "Bu filtreyle eşleşen öğe yok. Filtreleri temizleyin." |
+| Silme sonrası | "Tüm bildirimler okundu. Yeni bildirimler burada görünecek." |
+
+### Onay Diyalogları
+
+**Formül:** Eylemi netleştir + sonuçları belirt + butonlara eylem fiili
+
+```
+Başlık: "3 dosya silinsin mi?"
+Açıklama: "Bu işlem geri alınamaz. Silinen dosyalar çöp kutusuna taşınmaz."
+Butonlar: [ Dosyaları sil ] [ Vazgeç ]
+                ✓ Eylem fiili     ✓ Net
+           YANLIŞ: [ Tamam ] [ İptal ]
+```
+
+| Durum | Başlık | Açıklama | Butonlar |
+|-------|--------|----------|----------|
+| Silme | "3 dosya silinsin mi?" | "Bu geri alınamaz" | Sil / Vazgeç |
+| Çıkış | "Kaydedilmemiş değişiklikler var" | "Çıkarsanız değişiklikler kaybolur" | Kaydetmeden çık / Kaydet |
+| Yayın | "Makale yayınlansın mı?" | "Yayın sonrası herkes görebilir" | Yayınla / Geri dön |
+
+### Başarı Mesajları
+
+**Formül:** Kısa kutla + sonraki adım (isteğe bağlı)
+
+| Durum | Örnek |
+|-------|-------|
+| Kaydetme | "Değişiklikler kaydedildi." |
+| Oluşturma | "Proje oluşturuldu. Ekip üyelerini davet edebilirsiniz." |
+| Gönderme | "Mesaj gönderildi." |
+| Silme | "Dosya silindi." (nötr ton — kutlama yok) |
+
+### Yükleme Durumları
+
+**Formül:** Ne yapılıyor + beklenti süresi (uzunsa)
+
+| Süre | Örnek |
+|------|-------|
+| 1-3 sn | "Yükleniyor..." (spinner yeterli) |
+| 3-10 sn | "Raporunuz hazırlanıyor..." |
+| >10 sn | "Bu birkaç dakika sürebilir. Sayfayı kapatmayın." |
+| Belirsiz | "İşleminiz sıraya alındı. Tamamlandığında bildirim alacaksınız." |
+
+---
+
+## Ses ve Ton Rehberi
+
+### Varsayılan Ton Matrisi
+
+| Bağlam | Ton | Örnek |
+|--------|-----|-------|
+| **Başarı** | Kutlayıcı ama abartısız | "Harika! Profiliniz güncellendi." |
+| **Hata** | Empatik + aksiyon odaklı | "Bir sorun oluştu. Tekrar deneyebilirsiniz." |
+| **Uyarı** | Net + acil | "Dikkat: Bu işlem geri alınamaz." |
+| **Nötr** | Bilgilendirici + kısa | "Son güncelleme: 5 dakika önce." |
+| **Onboarding** | Teşvik edici + yönlendirici | "İlk adım: Profilinizi tamamlayın." |
+| **Tebrik** | Sıcak ama profesyonel | "Tebrikler! İlk projenizi oluşturdunuz." |
+
+### Marka Profili ile Kişiselleştirme
+
+Proje kökünde `.fmcp-brand-profile.json` varsa:
+
+1. **`voiceTone.personality`** → Ton kalibrasyonu:
+   - `["samimi", "cesur"]` → kısa, direkt, enerjik
+   - `["profesyonel", "güvenilir"]` → formel, ölçülü, sakin
+   - `["playful", "genç"]` → emoji uygun, günlük dil, cesur kısaltmalar
+
+2. **`voiceTone.formality`** → Kelime seçimi:
+   - `formal`: "İşleminiz başarıyla tamamlanmıştır."
+   - `semi-formal`: "İşlem tamamlandı."
+   - `casual`: "Tamam, bitti!"
+
+3. **`voiceTone.humor`** → Humor seviyesi:
+   - `none`: Asla espri veya şaka tonu
+   - `subtle`: Hafif sıcaklık, ince humor ("Harika iş!")
+   - `playful`: Emoji, şakacı ton ("Boom! Proje hazır 🚀")
+
+4. **`voiceTone.examples`** → Gerçek örnekleri ton referansı olarak kullan
+
+### Profil Yoksa: Otomatik Oluşturma Akışı
+
+`.fmcp-brand-profile.json` dosyası bulunamadığında, kullanıcıya 3 soru sor:
+
+**Soru 1:** "Markanız bir insan olsa nasıl konuşurdu? 3 sıfatla tanımlayın."
+- Örnek: samimi, cesur, profesyonel
+
+**Soru 2:** "Formallik seviyesi?"
+- Formal (kurumsal, mesafeli)
+- Yarı-formal (profesyonel ama sıcak)
+- Casual (arkadaşça, günlük)
+
+**Soru 3:** "Bir başarı mesajı örneği verin (uygulamanızda kullanılmış veya hayal ettiğiniz)."
+- Örnek: "Harika! Profilin güncellendi."
+
+Cevaplardan minimal `.fmcp-brand-profile.json` oluştur ve proje köküne kaydet.
+
+---
+
+## Çok Dilli / i18n Kuralları
+
+Çoklu dil desteği olan projelerde copy üretirken:
+
+### Metin Uzunluğu Farkları
+
+| Dil | Türkçeye göre uzunluk farkı |
+|-----|----------------------------|
+| Almanca | %20-40 daha uzun |
+| Fince | %20-30 daha uzun |
+| İngilizce | %10-20 daha kısa |
+| Japonca/Çince | %30-50 daha kısa (karakter bazlı) |
+| Arapça | Benzer uzunluk ama RTL layout |
+
+**Kural:** En uzun dili (`.fmcp-brand-profile.json` → `i18n.longestLocale`) baz alarak tasarımda truncation planla.
+
+### RTL (Sağdan Sola) Desteği
+
+- Arapça, İbranice, Farsça: layout tamamen ayna
+- İkonlar: yön belirten ikonlar (ok, geri/ileri) ters çevrilmeli
+- Sayılar: RTL dillerde de soldan sağa yazılır (istisna)
+
+### Kültür-Nötr Dil
+
+- Metafor ve deyimlerden kaçın ("taşı gediğine koymak" → "düzeltmek")
+- Kültüre bağlı emoji dikkatli kullan (🙏 bazı kültürlerde "teşekkür", bazılarında "dua")
+- Tarih formatı: yerelleştir (TR: 07.04.2026, US: 04/07/2026, ISO: 2026-04-07)
+- Para birimi: sembol + format yerelleştir (₺1.234,56 vs $1,234.56)
+
+---
+
+## Figma Entegrasyonu
+
+### Tekli Text Node Güncelleme
+
+```js
+// figma_execute — Tek text node'a copy uygula
+const node = await figma.getNodeByIdAsync("<TEXT_NODE_ID>");
+await figma.loadFontAsync(node.fontName);
+node.characters = "Yeni copy metni";
+return { updated: node.id, text: node.characters };
+```
+
+### Toplu Copy İnceleme ve Güncelleme
+
+1. Ekrandaki tüm text node'ları listele:
+
+```js
+const root = await figma.getNodeByIdAsync("<SCREEN_NODE_ID>");
+const textNodes = root.findAll(n => n.type === "TEXT");
+const copyList = textNodes.map(n => ({
+  id: n.id,
+  name: n.name,
+  current: n.characters,
+  fontSize: n.fontSize,
+  parent: n.parent?.name || "—"
+}));
+return { totalTextNodes: copyList.length, nodes: copyList.slice(0, 50) };
+```
+
+2. Kullanıcıya tablo olarak sun:
+
+| # | Node | Mevcut Copy | Önerilen Copy | Durum |
+|---|------|------------|---------------|-------|
+| 1 | CTA Button | "Gönder" | "Hesap oluştur" | Değişecek |
+| 2 | Error Text | "Hata" | "E-posta adresi geçersiz. @ işareti olmalı." | Değişecek |
+| 3 | Page Title | "Hoş Geldiniz" | — | Uygun |
+
+3. **Kullanıcı onayı al** — onaylanan node'ları toplu güncelle:
+
+```js
+const updates = [
+  { id: "<ID_1>", text: "Hesap oluştur" },
+  { id: "<ID_2>", text: "E-posta adresi geçersiz. @ işareti olmalı." }
+];
+
+for (const u of updates) {
+  const node = await figma.getNodeByIdAsync(u.id);
+  await figma.loadFontAsync(node.fontName);
+  node.characters = u.text;
+}
+
+return { updatedCount: updates.length };
+```
+
+> **ONAY KURALI:** Text node güncellemeleri kullanıcı onayı olmadan yapılmaz. Önce tablo sun, onay al, sonra uygula.
+
+---
+
+## Required Workflow
+
+### Step 1: Plugin Bağlantısını Doğrula
+
+```
+figma_get_status()
+```
+
+### Step 2: Marka Profili Kontrol
+
+Proje kökünde `.fmcp-brand-profile.json` ara.
+- **Varsa:** Oku, `voiceTone` ve `copyRules` alanlarını not al.
+- **Yoksa:** Kullanıcıya "Marka profili bulunamadı. Oluşturmak ister misiniz?" sor.
+  - Evet → 3 soru akışı → profil oluştur
+  - Hayır → varsayılan ton matrisiyle devam et
+
+### Step 3: Hedef Belirle
+
+Kullanıcının isteğine göre:
+
+**A) Tek copy üretimi:** CTA, hata mesajı, boş durum vb. → ilgili kalıbı uygula, 3 alternatif sun.
+
+**B) Ekran copy incelemesi:** Figma ekranındaki tüm text node'ları tara → mevcut copy'yi değerlendir → öneriler sun.
+
+**C) Copy spec üretimi:** Bir bileşen veya ekran için tüm copy kurallarını dokümante et (karakter limitleri, truncation, durum metinleri).
+
+### Step 4: Copy Üret / Değerlendir
+
+- 5 temel prensibe uygunluk kontrolü
+- Marka profili varsa ton kalibrasyonu
+- Her copy için 2-3 alternatif sun (kullanıcı seçsin)
+- i18n gerekiyorsa en uzun dili baz al
+
+### Step 5: Figma'ya Uygula (İsteğe Bağlı)
+
+Kullanıcı isterse text node'ları güncelle (onay akışı ile).
+
+### Step 6: Copy Spec Çıktısı
+
+İstenirse yapılandırılmış copy spec raporu üret:
+
+```markdown
+## Copy Spec — [Ekran Adı]
+
+### CTA'lar
+| Buton | Copy | Max Karakter | Alternatifler |
+|-------|------|-------------|---------------|
+| Ana CTA | "Hesap oluştur" | 24 | "Kaydol", "Ücretsiz başla" |
+
+### Hata Mesajları
+| Alan | Mesaj | Ton |
+|------|-------|-----|
+| E-posta | "Geçerli bir e-posta girin" | empathetic-actionable |
+
+### Boş Durumlar
+| Ekran | Mesaj |
+|-------|-------|
+| Proje listesi | "Henüz proje yok. İlk projenizi oluşturun." |
+```
+
+---
+
+## Türkçe Karakter Kuralı (ZORUNLU)
+
+Tüm Türkçe metin içeriklerinde (Figma text node, kod string, dokümantasyon) doğru Unicode karakterler kullanılmalıdır. ASCII karşılıkları YASAKTIR:
+
+| Doğru | Yanlış | Doğru | Yanlış |
+|-------|--------|-------|--------|
+| ş | s | Ş | S |
+| ı | i | İ | I |
+| ö | o | Ö | O |
+| ü | u | Ü | U |
+| ç | c | Ç | C |
+| ğ | g | Ğ | G |
+
+Son adım: Üretilen tüm Türkçe metinleri karakter kontrolünden geçir.
+
+## Evolution Triggers
+
+- Yeni copy kalıbı ihtiyacı (notification, tooltip, placeholder) eklenebilir
+- Marka profili şeması genişletilirse alan okuma güncellenmeli
+- AI ile otomatik copy kalite skoru (5 prensibe uyum puanı) eklenebilir
+- Çoklu dil desteği genişletilirse dil bazlı kalıp varyantları eklenebilir

package/skills/visual-qa-compare/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: visual-qa-compare
+description: Figma tasarımı ile kodlanmış UI arasında görsel karşılaştırma yapar. Screenshot tabanlı fark tespiti, spacing/color/typography sapmaları raporlar. "visual QA", "görsel karşılaştır", "Figma vs kod", "pixel compare", "QA kontrol", "implementasyon doğrula" ifadeleriyle tetiklenir. F-MCP Bridge plugin bağlantısı gerektirir.
+metadata:
+  mcp-server: user-figma-mcp-bridge
+  personas:
+    - uidev
+    - designops
+---
+
+# Visual QA Compare — Figma vs Kod Görsel Karşılaştırma
+
+> **Design Token Kuralı:** Bu skill'deki kod örneklerinde geçen font adları, renk kodları, piksel boyutları yalnızca FORMAT gösterimidir. Çalışma anında tüm design token değerleri (font, renk, boyut, spacing, radius, gölge) kayıtlı kütüphaneden (`figma_get_variables`, `figma_get_styles`) veya kullanıcıdan okunmalıdır. Hardcoded token değeri kullanma. Detay: `project-context.md` → "Design Token Kuralı".
+
+## Overview
+
+Bu skill, Figma tasarımı ile kodlanmış UI arasındaki **görsel** farkları tespit eder. `design-drift-detector` token/kod tabanlı çalışırken, bu skill **pixel/görsel** tabanlı karşılaştırma yapar.
+
+**Salt okunur** — Figma tuvalinde değişiklik yapmaz.
+
+## Fark: visual-qa-compare vs design-drift-detector
+
+| Özellik | visual-qa-compare | design-drift-detector |
+|---|---|---|
+| **Odak** | Görsel/pixel farklar | Token/kod değer farkları |
+| **Girdi** | Figma screenshot + kod UI screenshot | Figma variable'lar + kod token dosyaları |
+| **Çıktı** | Görsel fark raporu (spacing, renk, tipografi) | Drift raporu (değer uyumsuzlukları) |
+| **Araç** | `figma_capture_screenshot` + `figma_get_design_context` | `figma_check_design_parity` + `figma_get_variables` |
+
+## Prerequisites
+
+- F-MCP Bridge plugin bağlı olmalı
+- Kodlanmış UI'ın çalışır durumda screenshot'ı alınabilmeli (dev server veya deploy)
+- Hedef Figma ekranın node ID'si bilinmeli
+
+## F-MCP skill koordinasyonu
+
+- **Birlikte:** `design-drift-detector` ile token bazlı kontrol (görsel + token = tam QA)
+- **Önce (isteğe bağlı):** `implement-design` çıktısı sonrası doğrulama
+- **Sonra:** Fark varsa `fix-figma-design-system-finding` (Figma tarafı) veya kod düzeltme
+
+## Required Workflow
+
+### Step 1: Plugin Bağlantısını Doğrula
+
+```
+figma_get_status()
+```
+
+### Step 2: Figma Screenshot Al
+
+```
+figma_capture_screenshot(nodeId="<NODE_ID>", format="PNG", scale=2)
+```
+
+### Step 3: Figma Design Context Al
+
+> **DERİN ANALİZ KURALI:** Sadece frame/node isimlerine bakarak sonuç çıkarma. Her node'un içindeki text content (`characters`), instance prop'ları ve child yapılarını detaylı oku. Bir şeyin "eksik" veya "yok" olduğunu iddia etmeden önce tüm child node'ların içeriğini kontrol et.
+
+> **GÖRSEL DOĞRULAMA KURALI:** Analiz sonucunu raporlamadan önce `figma_capture_screenshot` ile ekran görüntüsü al ve görsel olarak kontrol et. Text content ile screenshot'ın tutarlı olduğunu teyit et. Çelişki varsa screenshot'ı esas al.
+
+```
+figma_get_design_context(
+  nodeId="<NODE_ID>",
+  depth=3,
+  verbosity="full",
+  includeLayout=true,
+  includeVisual=true,
+  includeTypography=true
+)
+```
+
+Bu veriden referans değerleri çıkar:
+- **Spacing:** padding, margin, item spacing değerleri
+- **Renk:** fill, stroke, text renkleri (hex)
+- **Tipografi:** font family, size, weight, line height
+- **Boyut:** width, height, corner radius
+
+### Step 4: Kod UI Referansı Al
+
+Kullanıcıdan kodlanmış UI'ın screenshot'ını veya canlı URL'ini iste. Yöntemler:
+
+1. **Kullanıcı screenshot paylaşır** — doğrudan karşılaştır
+2. **Dev server URL** — browser aracıyla screenshot al (varsa)
+3. **Deploy URL** — production/staging screenshot'ı
+
+### Step 5: Karşılaştırma Analizi
+
+AI ile Figma screenshot ve design context verilerini kullanarak kodlanmış UI ile karşılaştır:
+
+#### 5a: Spacing Analizi
+
+```markdown
+| Öğe | Figma | Kod | Fark | Öncelik |
+|---|---|---|---|---|
+| Header padding | 24px | 20px | -4px | Orta |
+| Card spacing | 16px | 16px | 0 | ✓ |
+| Button padding H | 24px | 16px | -8px | Yüksek |
+```
+
+#### 5b: Renk Analizi
+
+```markdown
+| Öğe | Figma | Kod | Fark | Öncelik |
+|---|---|---|---|---|
+| Primary button | #2563EB | #2563EB | — | ✓ |
+| Body text | #1F2937 | #374151 | Farklı | Orta |
+| Background | #FFFFFF | #FAFAFA | Hafif fark | Düşük |
+```
+
+#### 5c: Tipografi Analizi
+
+```markdown
+| Öğe | Figma | Kod | Fark | Öncelik |
+|---|---|---|---|---|
+| H1 | Inter 32/40 Bold | Inter 32/40 Bold | — | ✓ |
+| Body | Inter 16/24 Regular | Inter 14/20 Regular | Size farkı | Yüksek |
+| Caption | Inter 12/16 Regular | Inter 12/16 Regular | — | ✓ |
+```
+
+### Step 6: Token Parity Kontrolü (opsiyonel)
+
+Görsel farkların token kaynaklı olup olmadığını kontrol et:
+
+```
+figma_check_design_parity(
+  codeTokens='{"color/primary": "#2563EB", "spacing/md": 16, "font/body-size": 16}'
+)
+```
+
+### Step 7: Rapor Üret
+
+Tüm karşılaştırma sonuçlarını aşağıdaki formatta yapılandırılmış QA raporu olarak oluştur.
+
+## Çıktı Formatı
+
+```markdown
+# Visual QA Raporu — [Ekran Adı]
+
+## Genel Uyum: %87 (26/30 öğe eşleşiyor)
+
+### Kritik Farklar (4)
+1. **Body text font size** — Figma: 16px, Kod: 14px → Token güncellenmeli
+2. **Button horizontal padding** — Figma: 24px, Kod: 16px → CSS düzeltmesi
+3. **Card corner radius** — Figma: 12px, Kod: 8px → Token kontrolü
+4. **Body text color** — Figma: #1F2937, Kod: #374151 → Token eşlemesi kontrol
+
+### Eşleşen Öğeler (26)
+✓ Header layout, ✓ Primary colors, ✓ H1 typography, ✓ Spacing grid, ...
+
+### Öneriler
+1. `design-drift-detector` ile token kaynaklı farkları tespit et
+2. CSS token değişkenlerini Figma variable isimleriyle hizala
+3. Body text size'ı 16px'e güncelle (DS standardı)
+
+### Platform-Spesifik Notlar
+- **iOS:** Dynamic Type ile font scaling kontrol edilmeli
+- **Android:** density-independent pixel (dp) doğrulaması
+- **Web:** Responsive breakpoint'lerde tekrar kontrol
+```
+
+## Evolution Triggers
+
+- Bridge'e görsel diff aracı eklenirse (ör. visual diff aracı) otomatik karşılaştırma adımı eklenmeli
+- Browser otomasyon araçlarıyla entegrasyon genişletilirse Step 4 otomatikleştirilebilir
+- CI entegrasyonu için JSON çıktı formatı eklenebilir

package/dist/browser/base.d.ts

@@ -1,50 +0,0 @@
-/**
- * Browser Manager Interface
- * Abstract interface for browser automation across different runtimes
- */
-/**
- * Browser Manager Interface
- * Provides unified API for browser automation regardless of runtime (Cloudflare/Local)
- *
- * Note: Uses 'any' for Page type to support both puppeteer-core and @cloudflare/puppeteer
- * implementations which have incompatible type definitions but compatible runtime behavior
- */
-export interface IBrowserManager {
-    /**
-     * Launch or connect to browser instance
-     */
-    launch(): Promise<void>;
-    /**
-     * Get active page instance
-     */
-    getPage(): Promise<any>;
-    /**
-     * Navigate to Figma URL
-     */
-    navigateToFigma(url?: string): Promise<any>;
-    /**
-     * Reload current page
-     */
-    reload(hardReload?: boolean): Promise<void>;
-    /**
-     * Evaluate JavaScript in page context
-     */
-    evaluate<T>(fn: () => T): Promise<T>;
-    /**
-     * Check if browser is running
-     */
-    isRunning(): boolean;
-    /**
-     * Close browser instance
-     */
-    close(): Promise<void>;
-    /**
-     * Get current URL
-     */
-    getCurrentUrl(): string | null;
-    /**
-     * Wait for navigation to complete
-     */
-    waitForNavigation(timeout?: number): Promise<void>;
-}
-//# sourceMappingURL=base.d.ts.map

package/dist/browser/base.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/browser/base.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAExB;;OAEG;IACH,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IAE5C;;OAEG;IACH,MAAM,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAKrC;;OAEG;IACH,SAAS,IAAI,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB;;OAEG;IACH,aAAa,IAAI,MAAM,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD"}

package/dist/browser/base.js

@@ -1,6 +0,0 @@
-/**
- * Browser Manager Interface
- * Abstract interface for browser automation across different runtimes
- */
-export {};
-//# sourceMappingURL=base.js.map

package/dist/browser/base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/browser/base.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/dist/browser/local.d.ts

@@ -1,81 +0,0 @@
-/**
- * Local Browser Manager
- * Connects to Figma Desktop via Chrome Remote Debugging Protocol
- */
-import { type Page } from 'puppeteer-core';
-import type { IBrowserManager } from './base.js';
-/**
- * Local browser configuration
- */
-export interface LocalBrowserConfig {
-    debugPort: number;
-    debugHost: string;
-}
-/**
- * Local Browser Manager
- * Connects to existing Figma Desktop instance via remote debugging port
- */
-export declare class LocalBrowserManager implements IBrowserManager {
-    private browser;
-    private page;
-    private config;
-    constructor(config: LocalBrowserConfig);
-    /**
-     * Connect to Figma Desktop via remote debugging port
-     */
-    launch(): Promise<void>;
-    /**
-     * Find the best page for plugin debugging
-     * Actively searches for pages with workers across ALL tabs
-     */
-    private findBestPage;
-    /**
-     * Get active Figma page or create new one
-     * Prefers pages with active plugin workers for plugin debugging
-     */
-    getPage(): Promise<Page>;
-    /**
-     * Navigate to Figma URL
-     */
-    navigateToFigma(figmaUrl?: string): Promise<Page>;
-    /**
-     * Reload current page
-     */
-    reload(hardReload?: boolean): Promise<void>;
-    /**
-     * Execute JavaScript in page context
-     */
-    evaluate<T>(fn: () => T): Promise<T>;
-    /**
-     * Check if browser is connected
-     */
-    isRunning(): boolean;
-    /**
-     * Disconnect from browser (doesn't close Figma Desktop)
-     */
-    close(): Promise<void>;
-    /**
-     * Get current page URL
-     */
-    getCurrentUrl(): string | null;
-    /**
-     * Check if the browser connection is still alive
-     * Returns false if connection is stale (e.g., after computer sleep)
-     */
-    isConnectionAlive(): Promise<boolean>;
-    /**
-     * Reconnect to Figma Desktop if connection was lost
-     * Call this before any operation that requires a live connection
-     */
-    ensureConnection(): Promise<void>;
-    /**
-     * Force a complete reconnection to Figma Desktop
-     * Use this when frames become detached or stale even though the browser appears connected
-     */
-    forceReconnect(): Promise<void>;
-    /**
-     * Wait for navigation
-     */
-    waitForNavigation(timeout?: number): Promise<void>;
-}
-//# sourceMappingURL=local.d.ts.map

package/dist/browser/local.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"local.d.ts","sourceRoot":"","sources":["../../src/browser/local.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAkB,EAAgB,KAAK,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIjD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,YAAW,eAAe;IAC1D,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,MAAM,CAAqB;gBAEvB,MAAM,EAAE,kBAAkB;IAItC;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IA2C7B;;;OAGG;YACW,YAAY;IA4C1B;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC9B;;OAEG;IACG,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAyBvD;;OAEG;IACG,MAAM,CAAC,UAAU,UAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAoB/C;;OAEG;IACG,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAQ1C;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB5B;;OAEG;IACH,aAAa,IAAI,MAAM,GAAG,IAAI;IAQ9B;;;OAGG;IACG,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAe3C;;;OAGG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAgBvC;;;OAGG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAqBrC;;OAEG;IACG,iBAAiB,CAAC,OAAO,SAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;CAUvD"}