{
  "markdown": "<p align=\"center\">\n  <img src=\"assets/logo.png\" alt=\"F-MCP Bridge Logo\" width=\"280\" />\n</p>\n\n# F-MCP (Figma MCP Bridge)\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@atezer/figma-mcp-bridge\"><img src=\"https://img.shields.io/npm/v/@atezer/figma-mcp-bridge?label=npm&color=0A7CFF\" alt=\"npm\"></a>\n  <a href=\"https://github.com/atezer/FMCP/releases/tag/v1.9.14\"><img src=\"https://img.shields.io/badge/sürüm-v1.9.14-success\" alt=\"version\"></a>\n  <img src=\"https://img.shields.io/badge/araç-63-blue\" alt=\"63 tools\">\n  <img src=\"https://img.shields.io/badge/skill-28-blue\" alt=\"28 skills\">\n  <a href=\"CHANGELOG.md\"><img src=\"https://img.shields.io/badge/changelog-güncel-brightgreen\" alt=\"changelog\"></a>\n</p>\n\n> **Yeni — v1.9.14 Contract Extractor:** Bir Component Set'i seçin, `figma_extract_contract` deyin — props, anatomy token binding'leri, variant override diff'leri, mode bazlı resolved token'lar, WCAG kontrast denetimi ve base spec'ler tek design contract JSON'unda. Design-to-code handoff'un tek doğruluk kaynağı. Detay: [Release notes](https://github.com/atezer/FMCP/releases/tag/v1.9.14) · [extract-contract SKILL](skills/extract-contract/SKILL.md).\n>\n> **Son sürüm — v1.9.14 (31 Temmuz 2026):** Contract Extractor — Component Set → design contract JSON spec (63 tool, 132/132 test). Önceki öne çıkanlar: v1.9.13 sıfır-kurulum DS oto-uyumlanma, v1.9.11 Prototype Connections + Animations ([figma-prototype-flow](skills/figma-prototype-flow/SKILL.md)). Detay: [CHANGELOG](CHANGELOG.md) · [Release notes](https://github.com/atezer/FMCP/releases/tag/v1.9.14)\n\nFigma tasarımlarınızı AI'a bağlar. AI'a *\"Bu ekrandaki renkleri çıkar\"* veya *\"Yeni bir login sayfası oluştur\"* dersiniz — AI Figma'daki tasarımınızla doğrudan çalışır.\n\nHer şey **bilgisayarınızda** kalır. Tasarım verileriniz internete gönderilmez.\n\n---\n\n## Neye ihtiyacım var?\n\n| Gerekli | Açıklama |\n|---------|----------|\n| **Figma** | Zaten kullanıyorsanız hazırsınız |\n| **Claude Code** | Kurulumu yapacak uygulama — [claude.ai/download](https://claude.ai/download) adresinden indirin |\n\n> **Claude Code nedir?** Bilgisayarınızda çalışan Claude versiyonu. Dosya oluşturabilir, komut çalıştırabilir, kurulum yapabilir. İndirdikten sonra kurulum için sadece bir kez kullanacaksınız.\n\n---\n\n## Kurulum (5 dakika)\n\n**1.** [Claude Code'u indirin](https://claude.ai/download) (henüz yoksa)\n\n**2.** Claude Code'u açın ve şunu yazın:\n\n> *\"https://github.com/atezer/FMCP bu repoyu kur\"*\n\nClaude gerekli her şeyi (Node.js, build, ayarlar) otomatik yapar. Sizden sadece gerekirse **bilgisayar şifreniz** istenir.\n\n**3.** Claude \"kurulum tamamlandı\" deyince **Claude Code'u kapatıp tekrar açın**\n\n**4.** Figma'da **Plugins → F-MCP ATezer Bridge** açın → yeşil **\"Ready\"** görün\n\n**5.** Hazırsınız! Claude'a Figma ile ilgili sorularınızı sorun.\n\n> **Plugin'i ilk kez mi yüklüyorsunuz?** Figma → Plugins → Development → Import plugin from manifest → `f-mcp-plugin/manifest.json`\n>\n> **Kurumsal kullanım:** Plugin organizasyonda yayınlandıysa import gerekmez — Plugins menüsünden doğrudan çalıştırın.\n\n---\n\n## Kurulumdan sonra hangi Claude'u kullanmalıyım?\n\nKurulum tek seferlik. Sonrasında **Claude Desktop'ı** açın — tıpkı Claude Chat gibi yazışın, Figma bağlantısı otomatik çalışır.\n\n| Araç | F-MCP çalışır mı? | Not |\n|------|-------------------|-----|\n| **Claude Desktop** (masaüstü uygulaması) | ✅ | Sohbet arayüzü — günlük kullanım için önerilen |\n| **Claude Code** (terminal uygulaması) | ✅ | Kod yazma ve geliştirme için |\n| **Cursor** | ✅ | Kod editörü — geliştiriciler için |\n| **Claude Chat** (claude.ai web) | ❌ | Web tarayıcısı Figma plugin'ine erişemez |\n\n### Claude Desktop sınırlamaları\n\nClaude Desktop **Claude Code'dan farklı** çalışır. Şu mekanizmalar **Desktop'ta yoktur**:\n\n- Hook'lar (PreToolUse, SessionStart) — çalışmaz\n- Sub-agent spawn — Task tool mevcut değil\n- Slash command'lar (`/ds-sync` vb.) — desteklenmez\n- `plugin.json` auto-discovery — yüklenmez\n- `.claude/CLAUDE.md` auto-inject yok\n\nDesktop'ta enforcement **beş katmandan** gelir:\n1. Plugin response BLOCKING signal'i (`_DESIGN_SYSTEM_VIOLATIONS_BLOCKING`)\n2. Runtime audit tool'u `figma_scan_ds_compliance`\n3. Screenshot method selection — file/summary/regions/base64 (context koruma)\n4. Discovery budget — keşif çağrıları sayılır, 12'den sonra BLOCKING\n5. Project Knowledge'a yüklenmiş skill dosyaları\n\nDetaylı rehber ve ilk-prompt örneği: **[install/claude-desktop/HOW-TO-ENFORCE.md](install/claude-desktop/HOW-TO-ENFORCE.md)**.\n\n### Yeni chat öncesi öneri\n\nPlugin bağlantı sorunları veya zombie process temizliği için:\n\n```bash\nbash scripts/cleanup-ports.sh\n```\n\n5454-5470 aralığındaki eski FMCP process'lerini güvenle öldürür (sadece FMCP adıyla eşleşenler).\n\n---\n\n## Kendi Tasarım Sisteminizi Ekleyin (Bring Your Own DS)\n\nF-MCP **DS-agnostic** çalışır — herhangi bir Figma team library'yi (Material, Apple HIG, Tailwind UI, kurumsal kendi DS'iniz vb.) kullanabilirsiniz.\n\n**🪄 Sıfır kurulum (v3.5+ — önerilen):** Hiçbir şey eklemenize gerek yok. Tasarım sisteminizle ilgili herhangi bir şey isteyin (*\"tasarım sistemimle bir login ekranı yap\"*, *\"DS'ime uygun mu denetle\"*) — agent Figma ortamınızdan DS'inizi **otomatik keşfeder**: hedef dosyanın subscribe olduğu library'ler + açık library dosyaları + mevcut instance'ların kaynakları taranır, bulgular `.claude/design-systems/registry.local.md`'ye (gitignore'lu, size özel) kaydedilir ve bir daha sorulmaz. Ancak hiçbir sinyal yoksa agent **bir kez** kütüphane linkinizi sorar ve kalıcılaştırır.\n\n**Elle kontrol isteyenler için komutlar:**\n\n| Komut | Ne zaman? |\n|---|---|\n| `/add-library` | Yeni bir DS kurarken (ana + mobil + ikon + asset Figma dosyalarını tek seferde ekler, cache oluşturur) |\n| `/ds-add <Figma-URL>` | Hızlı ekleme — file-key otomatik parse edilir, varolan DS ile çakışma/fuzzy isim eşleşmesi kontrol edilir |\n| `/ds-sync <ds-name>` | Mevcut DS cache'ini Figma'dan güncelle (resume destekli, kısmi sync) |\n\n**Claude Desktop'ta:** Slash command'lar tetiklenmez ([Desktop sınırlamaları](#claude-desktop-sınırlamaları)). Bu komutların içeriğini prompt'a yapıştırın; Claude skill instruction'larını adım adım uygular. Veya doğal dil kullanın: *\"Kütüphane ekle\"*, *\"Ana-DS'yi güncelle\"*.\n\n**Gizlilik:** Eklediğiniz DS'in gerçek `file-key`, `variableKey`, `componentKey` değerleri **repo'ya yazılmaz** — hepsi size özel, gitignore'lu yerel dosyalardadır: `.claude/design-systems/registry.local.md` (DS kaydı) ve `.claude/design-systems/<ds-name>/` altındaki yerel dokümanlar. v3.3+ live-first mimaride veriler her istekte Figma'dan canlı okunur; eski `~/.claude/data/fcm-ds/` cache dizini opsiyoneldir ve hiçbir zaman repoya girmez.\n\n**Multi-library DS:** Ana-DS gibi birden fazla Figma dosyasından oluşan DS'ler desteklenir. `/add-library` ile ana + mobil + ikon + asset URL'lerini ayrı ayrı verebilirsiniz; `active-ds.md` Secondary Libraries tablosunda yönetilir.\n\n**Doğrulama:** `/ds-validate <ds-name>` ile cache tutarlılığını denetleyin (v1.9.8+).\n\n---\n\n## Neler yapabilirsiniz?\n\nAI ile Figma arasında **çift yönlü** çalışırsınız:\n\n**Figma'dan AI'a** — tasarımı oku, analiz et:\n- *\"Bu dosyadaki tüm bileşenleri listele\"*\n- *\"Button bileşeninin özelliklerini göster\"*\n- *\"Bu ekranın screenshot'ını al\"*\n- *\"Design token'larını çıkar\"*\n\n**AI'dan Figma'ya** — tasarım oluştur, değiştir:\n- *\"Yeni bir frame oluştur, 375x812, mobile layout\"*\n- *\"Bu tasarımdan React kodu üret\"*\n- *\"Color token'larını toplu güncelle\"*\n- *\"Tüm ikonları SVG olarak export et\"*\n\n**Design-to-code köprüsü (v1.9.8):**\n- *\"Seçili bileşen için tasarım bağlamını topla — component + token + Code Connect\"* → `figma_use intent=design_context`\n- *\"Bu sayfadaki tüm Code Connect eşlemelerini getir\"* → `figma_get_code_connect scanCurrentPage=true`\n\n**Kalite kontrolü:**\n- *\"Kontrast kontrolü yap (erişilebilirlik)\"*\n- *\"Koddaki token'larla Figma'daki token'ları karşılaştır\"*\n- *\"Responsive: Mobile, Tablet, Web versiyonlarını üret\"*\n\n**Prototip otomasyonu (v1.9.9+):**\n- *\"Figma'daki ekranların prototip bağlantılarını yap\"*\n- *\"Login → Home → Register akışını SLIDE_IN animasyonla kur\"*\n- *\"Button hover state'i SMART_ANIMATE ile ayarla\"*\n- *\"Long content için vertical scroll + sticky header\"*\n\nOtomatik navigasyon haritası (TR+EN button text heuristic), 9 trigger / 8 action / 9 transition tipi × 4 yön, ON_KEY_DOWN (keyCodes + device), overlay config, scroll behavior, flow starting point — Figma Prototype panel'inin tüm yetenekleri.\n\n63 aracın tam listesi: [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md)\n\n---\n\n## Figma API Token (opsiyonel — ek özellikler)\n\nF-MCP temel özellikleri token olmadan çalışır. Figma API token eklerseniz **ek özellikler** açılır:\n\n| Token olmadan | Token ile (ek) |\n|---------------|---------------|\n| Tasarım okuma, bileşen arama | + Yorum okuma/yazma |\n| Frame/text oluşturma | + Versiyon geçmişi |\n| Variable/token yönetimi | + REST API görsel export |\n| SVG/PNG/PDF export | + Dosya bilgisi detayları |\n\n**Nasıl eklenir:**\n1. [figma.com/developers](https://www.figma.com/developers) → **Personal Access Tokens** → yeni token oluşturun\n2. Figma'da plugin'i açın → **Advanced** → **API Token** alanına yapıştırın\n3. Süre seçin (30/60/90 gün) → token otomatik kaydedilir\n\n> Token bilgisayarınızda kalır, internete gönderilmez.\n\n---\n\n## Güncelleme\n\nClaude Code'a şunu söyleyin:\n\n> *\"F-MCP'yi güncelle\"*\n\nClaude gerisini halleder. Sonra Claude'u yeniden başlatın.\n\nDetay: [UPDATE.md](docs/UPDATE.md)\n\n---\n\n## Sorun mu yaşıyorsunuz?\n\n| Sorun | Çözüm |\n|-------|-------|\n| Plugin \"no server\" diyor | Önce AI aracını (Claude Desktop / Cursor / Claude Code) açın, sonra Figma'da plugin'i çalıştırın |\n| Plugin \"connecting...\" diyor | Bekleyin, otomatik bağlanır |\n| Yeni araçlar görünmüyor | AI aracını tamamen kapatıp tekrar açın |\n| DevTools console'da WebSocket hataları | v1.9.1+ ile server-side probe ile giderildi. Plugin hâlâ eski kodu cache'liyorsa: Figma → Plugins → Development → Manage plugins in development → Remove → Import plugin from manifest |\n\nDaha fazla: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)\n\n---\n\n## Teknik detaylar\n\n- **Ne yapar** — Claude veya Cursor'dan Figma'ya ekran tasarlar, tasarım sistemini denetler, renk/yazı/boşluk token'larını yönetir, ekranlar arası **prototip bağlantıları ve animasyonlar** kurar (v1.9.9+), tasarımı koda hazırlar\n- **Nerelerde çalışır** — Claude Code, Cursor, Claude Desktop, Claude Web ([kurulum rehberleri](install/))\n- **Nasıl çalışır** — Her görev için kendi **skill**'i var (kural seti + örnek). Claude Code'da **agent + sub-agent** yapısı var: ana ajan görevi alır, alt-ajanlar izole çalışır — ana sohbet bağlamı yorulmaz. Cursor ve Claude Desktop'ta aynı skill'ler doğrudan yüklenir (sub-agent yok, tek kaynak 4 platformda)\n- **3 orkestratör** — DS denetimi, token senkronizasyonu, ekran üretimi için hazır uçtan uca akışlar ([skill dizini](skills/SKILL_INDEX.md))\n- **Figma** — Masaüstü ve tarayıcı, birden fazla AI aynı dosyaya aynı anda bağlanabilir\n- **Gizlilik** — Veriler bilgisayarınızdan çıkmaz, internet bağlantısı olmadan da kullanılabilir\n- **Detay** — [63 araç](docs/TOOLS_FULL_LIST.md) · [28 skill](skills/SKILL_INDEX.md) · [Mimari](docs/ARCHITECTURE.md) · [Kurumsal kullanım](docs/ENTERPRISE.md) · [Katkı rehberi](CONTRIBUTING.md)\n\n---\n\n| | |\n|---|---|\n| Güncel sürüm | **1.9.14** ([CHANGELOG](CHANGELOG.md) · [Releases](https://github.com/atezer/FMCP/releases/tag/v1.9.14)) — Contract Extractor (Component Set → design contract JSON) |\n| npm | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |\n| Lisans | MIT — kişisel ve ticari kullanıma açık |\n\n**Sorun mu var?** [GitHub Issues](https://github.com/atezer/FMCP/issues)\n",
  "bytes": 11671,
  "sha": "4730f5e3ac36a135c56299ed79c64bf711ab777a1fe54fb6ef4ba51325451ba8",
  "repo_slug": "atezer/fmcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_atezer_fmcp_f_mcp_bridge_36c1905e/readme"
}