@atezer/figma-mcp-bridge 1.7.23 → 1.7.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +37 -0
- package/.cursor-plugin/plugin.json +21 -0
- package/CHANGELOG.md +30 -0
- package/README.md +4 -3
- package/agents/ds-auditor.md +29 -0
- package/agents/screen-builder.md +29 -0
- package/agents/token-syncer.md +26 -0
- package/assets/logo.png +0 -0
- package/commands/add-library.md +122 -0
- package/commands/ds-add.md +255 -0
- package/commands/ds-sync.md +314 -0
- package/commands/implement.md +43 -0
- package/commands/install-library.md +73 -0
- package/commands/setup.md +26 -0
- package/commands/test.md +39 -0
- package/commands/update.md +25 -0
- package/dist/core/config.d.ts +1 -5
- package/dist/core/config.d.ts.map +1 -1
- package/dist/core/config.js +11 -111
- package/dist/core/config.js.map +1 -1
- package/dist/core/plugin-bridge-server.d.ts.map +1 -1
- package/dist/core/plugin-bridge-server.js +1 -2
- package/dist/core/plugin-bridge-server.js.map +1 -1
- package/dist/core/response-guard.d.ts +1 -1
- package/dist/core/response-guard.js +1 -1
- package/dist/core/types/index.d.ts +2 -98
- package/dist/core/types/index.d.ts.map +1 -1
- package/dist/core/version.d.ts +1 -1
- package/dist/core/version.js +1 -1
- package/dist/local-plugin-only.d.ts.map +1 -1
- package/dist/local-plugin-only.js +14 -13
- package/dist/local-plugin-only.js.map +1 -1
- package/f-mcp-plugin/README.md +8 -15
- package/f-mcp-plugin/manifest.json +1 -3
- package/hooks/hooks.json +26 -0
- package/package.json +15 -31
- package/skills/BRAND_PROFILE_SCHEMA.md +113 -0
- package/skills/SKILL_INDEX.md +194 -0
- package/skills/TOOL_MAPPING.md +111 -0
- package/skills/ai-handoff-export/SKILL.md +254 -0
- package/skills/apply-figma-design-system/SKILL.md +104 -0
- package/skills/audit-figma-design-system/SKILL.md +278 -0
- package/skills/code-design-mapper/SKILL.md +370 -0
- package/skills/component-documentation/SKILL.md +190 -0
- package/skills/design-drift-detector/SKILL.md +407 -0
- package/skills/design-system-rules/SKILL.md +407 -0
- package/skills/design-token-pipeline/SKILL.md +619 -0
- package/skills/ds-impact-analysis/SKILL.md +266 -0
- package/skills/figjam-diagram-builder/SKILL.md +172 -0
- package/skills/figma-a11y-audit/SKILL.md +587 -0
- package/skills/figma-canvas-ops/SKILL.md +325 -0
- package/skills/figma-screen-analyzer/SKILL.md +235 -0
- package/skills/fix-figma-design-system-finding/SKILL.md +117 -0
- package/skills/fmcp-project-rules/SKILL.md +93 -0
- package/skills/generate-figma-library/SKILL.md +598 -0
- package/skills/generate-figma-screen/SKILL.md +689 -0
- package/skills/implement-design/SKILL.md +473 -0
- package/skills/ux-copy-guidance/SKILL.md +373 -0
- package/skills/visual-qa-compare/SKILL.md +166 -0
- package/dist/browser/base.d.ts +0 -50
- package/dist/browser/base.d.ts.map +0 -1
- package/dist/browser/base.js +0 -6
- package/dist/browser/base.js.map +0 -1
- package/dist/browser/local.d.ts +0 -81
- package/dist/browser/local.d.ts.map +0 -1
- package/dist/browser/local.js +0 -283
- package/dist/browser/local.js.map +0 -1
- package/dist/core/console-monitor.d.ts +0 -82
- package/dist/core/console-monitor.d.ts.map +0 -1
- package/dist/core/console-monitor.js +0 -428
- package/dist/core/console-monitor.js.map +0 -1
- package/dist/core/design-system-manifest.d.ts +0 -272
- package/dist/core/design-system-manifest.d.ts.map +0 -1
- package/dist/core/design-system-manifest.js +0 -261
- package/dist/core/design-system-manifest.js.map +0 -1
- package/dist/core/enrichment/enrichment-service.d.ts +0 -52
- package/dist/core/enrichment/enrichment-service.d.ts.map +0 -1
- package/dist/core/enrichment/enrichment-service.js +0 -272
- package/dist/core/enrichment/enrichment-service.js.map +0 -1
- package/dist/core/enrichment/index.d.ts +0 -8
- package/dist/core/enrichment/index.d.ts.map +0 -1
- package/dist/core/enrichment/index.js +0 -8
- package/dist/core/enrichment/index.js.map +0 -1
- package/dist/core/enrichment/relationship-mapper.d.ts +0 -106
- package/dist/core/enrichment/relationship-mapper.d.ts.map +0 -1
- package/dist/core/enrichment/relationship-mapper.js +0 -352
- package/dist/core/enrichment/relationship-mapper.js.map +0 -1
- package/dist/core/enrichment/style-resolver.d.ts +0 -80
- package/dist/core/enrichment/style-resolver.d.ts.map +0 -1
- package/dist/core/enrichment/style-resolver.js +0 -327
- package/dist/core/enrichment/style-resolver.js.map +0 -1
- package/dist/core/figma-api.d.ts +0 -137
- package/dist/core/figma-api.d.ts.map +0 -1
- package/dist/core/figma-api.js +0 -274
- package/dist/core/figma-api.js.map +0 -1
- package/dist/core/figma-desktop-connector.d.ts +0 -242
- package/dist/core/figma-desktop-connector.d.ts.map +0 -1
- package/dist/core/figma-desktop-connector.js +0 -1042
- package/dist/core/figma-desktop-connector.js.map +0 -1
- package/dist/core/figma-reconstruction-spec.d.ts +0 -162
- package/dist/core/figma-reconstruction-spec.d.ts.map +0 -1
- package/dist/core/figma-reconstruction-spec.js +0 -387
- package/dist/core/figma-reconstruction-spec.js.map +0 -1
- package/dist/core/figma-tools.d.ts +0 -21
- package/dist/core/figma-tools.d.ts.map +0 -1
- package/dist/core/figma-tools.js +0 -2920
- package/dist/core/figma-tools.js.map +0 -1
- package/dist/core/snippet-injector.d.ts +0 -24
- package/dist/core/snippet-injector.d.ts.map +0 -1
- package/dist/core/snippet-injector.js +0 -97
- package/dist/core/snippet-injector.js.map +0 -1
- package/dist/core/types/enriched.d.ts +0 -213
- package/dist/core/types/enriched.d.ts.map +0 -1
- package/dist/core/types/enriched.js +0 -6
- package/dist/core/types/enriched.js.map +0 -1
- package/dist/local.d.ts +0 -73
- package/dist/local.d.ts.map +0 -1
- package/dist/local.js +0 -2605
- package/dist/local.js.map +0 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "figma-mcp-bridge",
|
|
3
|
+
"version": "1.7.25",
|
|
4
|
+
"description": "Figma tasarım verilerini 46 MCP aracı ile AI asistanlarına açar. 19 uzman skill, 8 komut. REST API token gerektirmez, Zero Trust mimarisi.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Abdussamed Tezer",
|
|
7
|
+
"url": "https://github.com/atezer"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/atezer/FMCP",
|
|
10
|
+
"repository": "https://github.com/atezer/FMCP",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"figma",
|
|
14
|
+
"mcp",
|
|
15
|
+
"design",
|
|
16
|
+
"design-system",
|
|
17
|
+
"design-tokens",
|
|
18
|
+
"ui",
|
|
19
|
+
"claude-code"
|
|
20
|
+
],
|
|
21
|
+
"skills": "./skills/",
|
|
22
|
+
"commands": "./commands/",
|
|
23
|
+
"agents": "./agents/",
|
|
24
|
+
"hooks": "./hooks/hooks.json",
|
|
25
|
+
"mcpServers": {
|
|
26
|
+
"figma-mcp-bridge": {
|
|
27
|
+
"command": "npx",
|
|
28
|
+
"args": ["-y", "@atezer/figma-mcp-bridge@latest", "figma-mcp-bridge-plugin"]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"userConfig": {
|
|
32
|
+
"default_platform": {
|
|
33
|
+
"description": "Varsayılan hedef platform (web/ios/android)",
|
|
34
|
+
"sensitive": false
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "figma-mcp-bridge",
|
|
3
|
+
"version": "1.7.25",
|
|
4
|
+
"description": "Figma tasarim verilerini genis figma_* MCP araclari ile AI asistanlarina acar. Ayrintili liste: docs/TOOLS.md. REST API token gerektirmez (plugin-only), Zero Trust mimarisi.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Abdussamed Tezer"
|
|
7
|
+
},
|
|
8
|
+
"homepage": "https://github.com/atezer/FMCP",
|
|
9
|
+
"repository": "https://github.com/atezer/FMCP",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"keywords": ["figma", "mcp", "design", "design-system", "design-tokens", "ui", "cursor", "plugin"],
|
|
12
|
+
"logo": "assets/logo.png",
|
|
13
|
+
"skills": "./skills/",
|
|
14
|
+
"commands": "./commands/",
|
|
15
|
+
"mcpServers": {
|
|
16
|
+
"figma-mcp-bridge": {
|
|
17
|
+
"command": "npx",
|
|
18
|
+
"args": ["-y", "@atezer/figma-mcp-bridge@latest", "figma-mcp-bridge-plugin"]
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,36 @@ Bu dosya [Keep a Changelog](https://keepachangelog.com/tr/1.1.0/) biçimine uygu
|
|
|
12
12
|
|
|
13
13
|
Bu changelog'a ekleme öncesi sürümlerin tam ayrıntıları için `git log` kullanılabilir.
|
|
14
14
|
|
|
15
|
+
## [1.7.23] - 2026-04-11
|
|
16
|
+
|
|
17
|
+
### Refactor: Local Full + Cloudflare Modları Kaldırıldı
|
|
18
|
+
|
|
19
|
+
Proje artık yalnızca **plugin-only** modunu destekliyor. CDP debug port (9222), Figma REST API ve Cloudflare Workers modları kaldırıldı. ~15.000+ satır kod temizlendi.
|
|
20
|
+
|
|
21
|
+
**Kaldırılan:**
|
|
22
|
+
- `src/local.ts` — Full local server (CDP + REST + Puppeteer)
|
|
23
|
+
- `src/index.ts` — Cloudflare Workers entry point
|
|
24
|
+
- `src/browser/` — Tüm browser modülleri (Puppeteer, Cloudflare Browser Rendering)
|
|
25
|
+
- `src/cloud-*.ts` — Cloudflare cloud-specific modüller
|
|
26
|
+
- `src/core/figma-tools.ts` — REST API araç kaydı (3,564 satır)
|
|
27
|
+
- `src/core/figma-desktop-connector.ts` — CDP connector (1,391 satır)
|
|
28
|
+
- `src/core/figma-api.ts`, `console-monitor.ts`, `snippet-injector.ts`, `design-system-manifest.ts`, `figma-reconstruction-spec.ts`
|
|
29
|
+
- `src/core/enrichment/` — Tüm enrichment modülleri
|
|
30
|
+
- `tsconfig.cloudflare.json`, `wrangler.jsonc`, `worker-configuration.d.ts`
|
|
31
|
+
- Bağımlılıklar: `@cloudflare/puppeteer`, `agents`, `puppeteer-core`, `wrangler`
|
|
32
|
+
|
|
33
|
+
**Güncellenen:**
|
|
34
|
+
- `package.json` — main/types → local-plugin-only, bin sadeleştirildi, 3 runtime + 1 dev bağımlılık kaldırıldı
|
|
35
|
+
- `tsconfig.local.json` — Sadece plugin-only + core
|
|
36
|
+
- `scripts/validate-fmcp-skills-tools.mjs` — Kaynak: sadece local-plugin-only.ts
|
|
37
|
+
- `.github/workflows/ci.yml` — local.ts version check kaldırıldı
|
|
38
|
+
- `KURULUM.md`, `CONTRIBUTING.md`, `f-mcp-plugin/README.md`, `f-mcp-plugin/manifest.json`
|
|
39
|
+
- `.cursor/skills/f-mcp/TOOL_MAPPING.md` — 19 kaldırılan araç temizlendi
|
|
40
|
+
- `src/core/types/index.ts` — Kullanılmayan tipler kaldırıldı
|
|
41
|
+
- `src/core/config.ts` — Browser/console/screenshot config kaldırıldı
|
|
42
|
+
|
|
43
|
+
**Korunan:** 46 MCP aracı, 19 skill, plugin bridge (WebSocket 5454), audit log
|
|
44
|
+
|
|
15
45
|
## [1.7.19] - 2026-04-10
|
|
16
46
|
|
|
17
47
|
### Fix: `figma_create_frame` Otomatik Pozisyonlama
|
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ Kurulum tek seferlik. Sonrasında **Claude Desktop'ı** açın — tıpkı Claud
|
|
|
51
51
|
|------|-------------------|-----|
|
|
52
52
|
| **Claude Desktop** (masaüstü uygulaması) | ✅ | Sohbet arayüzü — günlük kullanım için önerilen |
|
|
53
53
|
| **Claude Code** (terminal uygulaması) | ✅ | Kod yazma ve geliştirme için |
|
|
54
|
-
| **Cursor** | ✅ | Kod editörü —
|
|
54
|
+
| **Cursor** | ✅ | Kod editörü — geliştiriciler için |
|
|
55
55
|
| **Claude Chat** (claude.ai web) | ❌ | Web tarayıcısı Figma plugin'ine erişemez |
|
|
56
56
|
|
|
57
57
|
---
|
|
@@ -128,7 +128,8 @@ Daha fazla: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
|
|
|
128
128
|
## Teknik detaylar
|
|
129
129
|
|
|
130
130
|
- **46 araç** — tasarım okuma, bileşen oluşturma, variable yönetimi, export ([tam liste](docs/TOOLS_FULL_LIST.md))
|
|
131
|
-
- **
|
|
131
|
+
- **20 skill** — token pipeline, ekran üretimi, erişilebilirlik denetimi, kod üretimi, DS denetim ([skill dizini](skills/SKILL_INDEX.md))
|
|
132
|
+
- **3 otonom agent** — DS denetim, token senkronizasyon, ekran oluşturma (Claude Code)
|
|
132
133
|
- **Çoklu dosya + çoklu AI aracı** — Claude, Cursor ve Claude Code aynı anda çalışır
|
|
133
134
|
- **Figma Desktop + Tarayıcı** — Her ikisinde de çalışır
|
|
134
135
|
- **Gizlilik** — Veriler bilgisayarınızdan çıkmaz, internetsiz (air-gap) ortamlarda çalışır
|
|
@@ -138,7 +139,7 @@ Daha fazla: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
|
|
|
138
139
|
|
|
139
140
|
| | |
|
|
140
141
|
|---|---|
|
|
141
|
-
| Güncel sürüm | **1.7.
|
|
142
|
+
| Güncel sürüm | **1.7.25** ([CHANGELOG](CHANGELOG.md) · [Releases](https://github.com/atezer/FMCP/releases)) |
|
|
142
143
|
| npm | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |
|
|
143
144
|
| Lisans | MIT — kişisel ve ticari kullanıma açık |
|
|
144
145
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ds-auditor
|
|
3
|
+
description: Figma ekranlarını design system uyumu açısından otonom olarak denetler, DS uyum raporu üretir. "DS audit yap", "design system kontrolü", "ekranı denetle" ifadeleriyle tetiklenir.
|
|
4
|
+
model: sonnet
|
|
5
|
+
maxTurns: 30
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# DS Auditor — Design System Uyumluluk Denetim Ajanı
|
|
9
|
+
|
|
10
|
+
Sen F-MCP DS Auditor ajanısın. Görevin Figma ekranlarını design system uyumu açısından otonom olarak denetlemek ve kapsamlı bir rapor üretmektir.
|
|
11
|
+
|
|
12
|
+
## Görev
|
|
13
|
+
|
|
14
|
+
1. **Bağlantı kontrolü:** `figma_get_status()` ile Figma plugin bağlantısını doğrula.
|
|
15
|
+
2. **Hedef tespiti:** Kullanıcıdan hangi ekran/frame'in denetleneceğini öğren veya mevcut sayfadaki tüm frame'leri tara.
|
|
16
|
+
3. **Denetim:** `audit-figma-design-system` skill'indeki adımları uygula:
|
|
17
|
+
- DS bileşen kullanımı (instance vs local)
|
|
18
|
+
- Token bağlantıları (bound vs unbound)
|
|
19
|
+
- Stil tutarlılığı (text style, color style)
|
|
20
|
+
- Spacing/padding uyumu
|
|
21
|
+
4. **Raporlama:** Bulgularını yapılandırılmış markdown formatında sun.
|
|
22
|
+
5. **Öneriler:** Her bulgu için düzeltme önerisi ver (hangi skill kullanılmalı: fix-figma-design-system-finding veya apply-figma-design-system).
|
|
23
|
+
|
|
24
|
+
## Kurallar
|
|
25
|
+
|
|
26
|
+
- Sadece okuma işlemleri yap — hiçbir şeyi değiştirme.
|
|
27
|
+
- Her tasarım değerini DS'ten doğrula: hardcoded değer = FAIL.
|
|
28
|
+
- Raporu Türkçe yaz.
|
|
29
|
+
- CI ortamında JSON formatı kullan.
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: screen-builder
|
|
3
|
+
description: Açıklama veya koddan Figma ekranı oluşturur, DS bileşenlerini kullanır. "Figma'da ekran oluştur", "ekran tasarla", "generate screen" ifadeleriyle tetiklenir.
|
|
4
|
+
model: sonnet
|
|
5
|
+
maxTurns: 40
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Screen Builder — Figma Ekran Oluşturma Ajanı
|
|
9
|
+
|
|
10
|
+
Sen F-MCP Screen Builder ajanısın. Görevin açıklama, wireframe veya koddan Figma'da tam ekran oluşturmaktır.
|
|
11
|
+
|
|
12
|
+
## Görev
|
|
13
|
+
|
|
14
|
+
1. **Bağlantı kontrolü:** `figma_get_status()` ile Figma plugin bağlantısını doğrula.
|
|
15
|
+
2. **DS hazırlık:** Kayıtlı kütüphaneyi kontrol et (`.claude/libraries/`), yoksa `figma_search_components()` ile DS bileşenlerini tara.
|
|
16
|
+
3. **Token okuma:** `figma_get_variables()` ve `figma_get_styles()` ile tasarım token'larını al.
|
|
17
|
+
4. **Ekran oluşturma:** `generate-figma-screen` skill'indeki adımları uygula:
|
|
18
|
+
- DS bileşen instance'ları kullan (hardcoded shape YASAK)
|
|
19
|
+
- Tüm değerleri DS variable'larına bağla
|
|
20
|
+
- Auto-layout ile responsive yapı kur
|
|
21
|
+
5. **Doğrulama:** `figma_capture_screenshot()` ile sonucu göster ve kullanıcı onayı al.
|
|
22
|
+
|
|
23
|
+
## Kurallar
|
|
24
|
+
|
|
25
|
+
- `figma-canvas-ops` kurallarını her `figma_execute` öncesi uygula.
|
|
26
|
+
- Hardcoded renk/boyut/font YASAK — tümü DS'ten bağlanmalı.
|
|
27
|
+
- Her node'da DS variable bağlantısı zorunlu.
|
|
28
|
+
- Brand profile varsa (`.fmcp-brand-profile.json`) oku ve uygula.
|
|
29
|
+
- Raporu ve tüm iletişimi Türkçe yap.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: token-syncer
|
|
3
|
+
description: Figma design token'larını kod dosyalarıyla senkronize eder (CSS/Tailwind/Swift/Compose). "Token'ları senkronla", "export tokens", "token pipeline" ifadeleriyle tetiklenir.
|
|
4
|
+
model: sonnet
|
|
5
|
+
maxTurns: 20
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Token Syncer — Design Token Senkronizasyon Ajanı
|
|
9
|
+
|
|
10
|
+
Sen F-MCP Token Syncer ajanısın. Görevin Figma variable'larını ve stil'lerini kod tarafındaki token dosyalarıyla senkronize etmektir.
|
|
11
|
+
|
|
12
|
+
## Görev
|
|
13
|
+
|
|
14
|
+
1. **Bağlantı kontrolü:** `figma_get_status()` ile Figma plugin bağlantısını doğrula.
|
|
15
|
+
2. **Token okuma:** `figma_get_variables()` ve `figma_get_styles()` ile mevcut token'ları çek.
|
|
16
|
+
3. **Platform tespiti:** Hedef platformu belirle (Web: CSS/Tailwind/Sass, iOS: Swift, Android: Compose/XML).
|
|
17
|
+
4. **Senkronizasyon:** `design-token-pipeline` skill'indeki adımları uygula:
|
|
18
|
+
- Figma → Kod (export)
|
|
19
|
+
- Kod → Figma (import — opsiyonel)
|
|
20
|
+
5. **Doğrulama:** Oluşturulan dosyaları kontrol et.
|
|
21
|
+
|
|
22
|
+
## Kurallar
|
|
23
|
+
|
|
24
|
+
- Hardcoded token değeri YASAK — tümü Figma'dan okunmalı.
|
|
25
|
+
- Mevcut token dosyası varsa üzerine yazmadan önce diff göster.
|
|
26
|
+
- Raporu Türkçe yaz.
|
package/assets/logo.png
ADDED
|
Binary file
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Tasarım Sistemi Kütüphanesi Ekle
|
|
2
|
+
|
|
3
|
+
Kullanıcı "kütüphane ekle", "library ekle", "tasarım sistemi ekle", "design system ekle" dediğinde bu komutu uygula.
|
|
4
|
+
|
|
5
|
+
## Akış
|
|
6
|
+
|
|
7
|
+
### Adım 1 — Bilgi topla
|
|
8
|
+
|
|
9
|
+
Kullanıcıdan şu bilgileri iste. Eksik olan her şeyi sor, tahmin etme:
|
|
10
|
+
|
|
11
|
+
**Zorunlu:**
|
|
12
|
+
|
|
13
|
+
1. **Kütüphane adı** — Kısa isim (örn: SUI, Primer, Carbon)
|
|
14
|
+
2. **Ana Figma dosyası URL'si** — Bileşenler + variables + styles içeren dosya. En az 1 tane olmalı.
|
|
15
|
+
|
|
16
|
+
**İsteğe bağlı (varsa sor):**
|
|
17
|
+
|
|
18
|
+
3. **Mobil dosyası URL'si** — Mobil platforma özel bileşenler varsa
|
|
19
|
+
4. **İkon dosyası URL'si** — Ayrı bir ikon kütüphanesi varsa
|
|
20
|
+
5. **Asset dosyası URL'si** — Logo, illüstrasyon gibi varlıklar varsa
|
|
21
|
+
6. **Diğer dosyalar** — Başka Figma dosyası varsa (tema, dokümantasyon, vb.)
|
|
22
|
+
|
|
23
|
+
Her dosya için kullanıcıya sor: **"Bu dosyada ne var? Kısa açıklama verin."**
|
|
24
|
+
|
|
25
|
+
### Adım 2 — Figma dosyalarını tara
|
|
26
|
+
|
|
27
|
+
Her dosya için sırayla:
|
|
28
|
+
|
|
29
|
+
1. `figma_get_status()` — Plugin bağlı mı kontrol et. Bağlı değilse kullanıcıdan Figma'da plugini açmasını iste.
|
|
30
|
+
2. `figma_get_design_system_summary(fileKey)` — Component set/component sayıları, variable collection adları
|
|
31
|
+
3. `figma_get_variables(fileKey, verbosity: "inventory")` — Variable grupları (inventory büyükse Python ile parse et, sadece grup adı + sayı çıkar)
|
|
32
|
+
4. `figma_get_styles(fileKey, verbosity: "summary")` — Paint, text, effect style listesi
|
|
33
|
+
5. `figma_search_components(fileKey, currentPageOnly: false, limit: 200)` — Tüm bileşen adları ve key'leri
|
|
34
|
+
6. `figma_get_file_data(fileKey, depth: 1, verbosity: "summary")` — Sayfa yapısı
|
|
35
|
+
7. **Font ailesi çıkarma (ZORUNLU):** Ana/WEB dosyasındaki text style'lardan font ailesini belirle. `figma_get_styles` sonucundaki text style ID'lerinden birini seç, `figma_execute` ile font bilgisini oku:
|
|
36
|
+
```js
|
|
37
|
+
const style = await figma.getStyleByIdAsync("TEXT_STYLE_ID");
|
|
38
|
+
const font = style.fontName; // { family: "...", style: "..." }
|
|
39
|
+
return { fontFamily: font.family, fontStyle: font.style };
|
|
40
|
+
```
|
|
41
|
+
Sonucu kütüphane dosyasının "Genel Bilgi" bölümüne `Font Ailesi` olarak yaz. Bu bilgi tüm skill'ler tarafından font seçiminde kullanılır.
|
|
42
|
+
|
|
43
|
+
### Adım 3 — Kütüphane dosyası oluştur
|
|
44
|
+
|
|
45
|
+
`.claude/libraries/{kütüphane-adı-küçük-harf}.md` dosyasını oluştur.
|
|
46
|
+
|
|
47
|
+
Dosya formatı şablonu:
|
|
48
|
+
|
|
49
|
+
```markdown
|
|
50
|
+
# {Kütüphane Adı} — {Açıklama}
|
|
51
|
+
|
|
52
|
+
## Genel Bilgi
|
|
53
|
+
|
|
54
|
+
- **Adı:** {Kütüphane Adı}
|
|
55
|
+
- **Font Ailesi:** {text style'lardan çıkarılan font ailesi, ör: "Source Sans Pro"}
|
|
56
|
+
- **Gizlilik:** Lokal — repo'ya dahil edilmez, paylaşılmaz.
|
|
57
|
+
- **Son tarama:** {tarih}
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## {N}. {Dosya Açıklaması}
|
|
62
|
+
|
|
63
|
+
| Alan | Değer |
|
|
64
|
+
|------|-------|
|
|
65
|
+
| **Dosya Adı** | {Figma dosya adı} |
|
|
66
|
+
| **File Key** | `{fileKey}` |
|
|
67
|
+
| **Node ID** | `{nodeId}` |
|
|
68
|
+
| **URL** | {tam URL} |
|
|
69
|
+
|
|
70
|
+
### Sayısal Özet
|
|
71
|
+
|
|
72
|
+
(figma_get_design_system_summary sonuçları — tablo olarak)
|
|
73
|
+
|
|
74
|
+
### Variable Collection'lar
|
|
75
|
+
|
|
76
|
+
(varsa — collection adı, sayı, açıklama tablosu)
|
|
77
|
+
|
|
78
|
+
### Variable Grupları
|
|
79
|
+
|
|
80
|
+
(varsa — top-level grup adı ve sayı tablosu)
|
|
81
|
+
|
|
82
|
+
### Text/Effect/Paint Style'lar
|
|
83
|
+
|
|
84
|
+
(varsa — hiyerarşik liste)
|
|
85
|
+
|
|
86
|
+
### Bileşen Sayfaları
|
|
87
|
+
|
|
88
|
+
(sayfa adı → bileşen adları tablosu, deprecated ve WIP işaretleri ayrı)
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Skill Talimatları
|
|
93
|
+
|
|
94
|
+
(hangi dosyadan ne okunacak, platform seçimi kuralları, import yöntemi)
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Adım 4 — Sistem dosyalarını güncelle
|
|
98
|
+
|
|
99
|
+
1. **`.gitignore`** — `.claude/libraries/` satırı yoksa ekle
|
|
100
|
+
2. **`project-context.md`** — "Design System Kütüphaneleri" bölümündeki tabloya yeni satır ekle. Bölüm yoksa oluştur.
|
|
101
|
+
|
|
102
|
+
### Adım 5 — Kullanıcıya bildir
|
|
103
|
+
|
|
104
|
+
Kısa özet ver:
|
|
105
|
+
|
|
106
|
+
> ✅ {Kütüphane Adı} eklendi.
|
|
107
|
+
>
|
|
108
|
+
> **Taranan dosyalar:** {N} dosya
|
|
109
|
+
> **Bileşen:** {toplam component set} set, {toplam component} component
|
|
110
|
+
> **Variable:** {toplam} token ({collection sayısı} collection)
|
|
111
|
+
> **Style:** {paint} paint, {text} text, {effect} effect
|
|
112
|
+
>
|
|
113
|
+
> Skill'ler artık {Kütüphane Adı}'yı varsayılan kütüphane olarak tanıyor.
|
|
114
|
+
|
|
115
|
+
## Kurallar
|
|
116
|
+
|
|
117
|
+
- Kullanıcıya teknik terim açıklama. "File key", "node ID" gibi kavramları sen çöz, URL'den parse et.
|
|
118
|
+
- Figma plugini bağlı değilse nazikçe "Figma'da {dosya adı} dosyasını açıp F-MCP pluginini çalıştırın" de.
|
|
119
|
+
- Tarama sırasında hata alırsan kullanıcıya hangi dosyada sorun olduğunu bildir, diğerlerine devam et.
|
|
120
|
+
- Variable verisi çok büyükse (>50K karakter) Python ile parse et, tüm veriyi context'e yükleme.
|
|
121
|
+
- Deprecated (⛔️) ve WIP (⌛️) bileşenleri ayrı listele.
|
|
122
|
+
- Her dosyayı taradıktan sonra ilerlemeyi bildir: "✅ {dosya adı} tarandı. Sıradaki: {sonraki dosya}"
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
# Design System Ekle (Akıllı Tespit)
|
|
2
|
+
|
|
3
|
+
Kullanıcı bir Figma linki ile yeni tasarım sistemi eklemek istediğinde bu komutu kullan. Bu komut yeni ekleme ve güncelleme arasındaki farkı otomatik tespit eder.
|
|
4
|
+
|
|
5
|
+
## Argüman
|
|
6
|
+
$ARGUMENTS
|
|
7
|
+
|
|
8
|
+
Argüman olabilir:
|
|
9
|
+
- Tek Figma linki
|
|
10
|
+
- Birden fazla Figma linki (boşlukla ayrılmış)
|
|
11
|
+
- Boş (kullanıcıdan iste)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Adım 1: Argüman Kontrolü
|
|
16
|
+
|
|
17
|
+
- `$ARGUMENTS` boşsa → kullanıcıya şöyle de: "Hangi Figma linkini eklemek istersin? Lütfen yapıştır."
|
|
18
|
+
- Link(ler) varsa → regex ile file key(ler)'i çıkar: `figma\.com/design/([a-zA-Z0-9]+)`
|
|
19
|
+
- Geçersiz link varsa → "Bu Figma linki gibi durmuyor. Format: https://figma.com/design/..."
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Adım 2: Her File Key İçin Figma Analizi
|
|
24
|
+
|
|
25
|
+
Her file key için **paralel** çağrı yap:
|
|
26
|
+
|
|
27
|
+
1. `mcp__figma-mcp-bridge__figma_list_connected_files` → bağlı mı kontrol et
|
|
28
|
+
- Bağlı DEĞİLSE → DUR ve kullanıcıya talimat:
|
|
29
|
+
```
|
|
30
|
+
❌ Bu Figma dosyası plugin'e bağlı değil.
|
|
31
|
+
Lütfen:
|
|
32
|
+
1. Figma'da dosyayı aç
|
|
33
|
+
2. F-MCP Bridge plugin'i çalıştır (Plugins → F-MCP ATezer Bridge)
|
|
34
|
+
3. Sonra tekrar dene
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
2. `mcp__figma-mcp-bridge__figma_get_file_data` (verbosity: "summary") → dosya adını al
|
|
38
|
+
|
|
39
|
+
3. `mcp__figma-mcp-bridge__figma_get_variables` (verbosity: "summary") → token sayısı
|
|
40
|
+
4. `mcp__figma-mcp-bridge__figma_get_styles` (verbosity: "summary") → stil sayısı
|
|
41
|
+
5. `mcp__figma-mcp-bridge__figma_search_components` (query: "", currentPageOnly: false, limit: 500) → bileşen sayısı
|
|
42
|
+
|
|
43
|
+
**Hata yönetimi:** Her çağrı için try-catch. Başarısız olanı "0" say ama diğerlerine devam.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Adım 3: Mevcut Kütüphane Tespiti
|
|
48
|
+
|
|
49
|
+
`.claude/design-systems/` altındaki tüm `_meta.md` dosyalarını oku ve bu yeni file key(ler) ile karşılaştır.
|
|
50
|
+
|
|
51
|
+
### Kontrol 1: File Key Eşleşmesi (Kesin)
|
|
52
|
+
Bu file key zaten bir kütüphanede kayıtlı mı?
|
|
53
|
+
|
|
54
|
+
**Varsa:**
|
|
55
|
+
```
|
|
56
|
+
📋 Bu Figma dosyası zaten "<library-name>" kütüphanesinde kayıtlı.
|
|
57
|
+
Son güncelleme: <tarih>
|
|
58
|
+
|
|
59
|
+
Güncellemek ister misin? (evet / iptal)
|
|
60
|
+
```
|
|
61
|
+
- evet → `/ds-sync <library-name>` mantığı uygulanır, DUR.
|
|
62
|
+
- iptal → İşlem sonlandırılır.
|
|
63
|
+
|
|
64
|
+
### Kontrol 2: İsim Eşleşmesi (Tam)
|
|
65
|
+
`.claude/design-systems/<normalized-name>/` dizini var mı?
|
|
66
|
+
|
|
67
|
+
**Varsa:**
|
|
68
|
+
```
|
|
69
|
+
⚠️ "<name>" adında bir kütüphane zaten var, ama farklı bir Figma dosyası.
|
|
70
|
+
|
|
71
|
+
Seçenekler:
|
|
72
|
+
1. Mevcut <name>'i bu yeni dosyayla değiştir
|
|
73
|
+
2. Farklı isimle ekle (örn: <name>-v2)
|
|
74
|
+
3. İptal
|
|
75
|
+
|
|
76
|
+
Hangisi?
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Kontrol 3: Fuzzy İsim Eşleşmesi
|
|
80
|
+
Benzer isim var mı? (ör: "sui" vs "sui-mobile") Karşılaştırma: normalized isimde substring kontrolü.
|
|
81
|
+
|
|
82
|
+
**Varsa:**
|
|
83
|
+
```
|
|
84
|
+
🔍 "<new-name>" dosyasını buldum.
|
|
85
|
+
Mevcut "<existing-name>" kütüphanen var. Bu onunla ilgili mi?
|
|
86
|
+
|
|
87
|
+
Seçenekler:
|
|
88
|
+
1. Mevcut <existing-name>'e ek kaynak (source) olarak ekle → mobile.md / icons.md gibi section'a yazılır
|
|
89
|
+
2. Ayrı <new-name> kütüphanesi olarak ekle
|
|
90
|
+
3. İptal
|
|
91
|
+
|
|
92
|
+
Hangisi?
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Kontrol 4: Hiç Eşleşme Yok
|
|
96
|
+
Yeni kütüphane olarak ekleme akışına geç (Adım 4).
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Adım 4: Yeni Kütüphane Ekleme Akışı
|
|
101
|
+
|
|
102
|
+
### 4a. İçerik Analizi ve Section Tespiti
|
|
103
|
+
|
|
104
|
+
Figma analiz sonuçlarına göre hangi section'ların oluşturulacağına karar ver:
|
|
105
|
+
|
|
106
|
+
```python
|
|
107
|
+
# Pseudo-code
|
|
108
|
+
sections = []
|
|
109
|
+
if variables > 0 or styles > 0:
|
|
110
|
+
sections.append("tokens")
|
|
111
|
+
|
|
112
|
+
# Bileşen isimlerini analiz et
|
|
113
|
+
component_names = [... figma_search_components sonucu ...]
|
|
114
|
+
icon_count = count names matching [r'^\.?icon', r'^flag_', r'\.ikon_', r'/icon']
|
|
115
|
+
mobile_count = count names matching [r'mobile', r'mobil', r'iOS', r'android', r'bottom.?sheet']
|
|
116
|
+
asset_count = count names matching [r'logo', r'illustration', r'grafik']
|
|
117
|
+
|
|
118
|
+
if icon_count > 20:
|
|
119
|
+
sections.append("icons")
|
|
120
|
+
if mobile_count > 5:
|
|
121
|
+
sections.append("mobile")
|
|
122
|
+
if asset_count > 3:
|
|
123
|
+
sections.append("assets")
|
|
124
|
+
|
|
125
|
+
# Her zaman components (ikon/asset hariç)
|
|
126
|
+
non_special_count = len(component_names) - icon_count - asset_count
|
|
127
|
+
if non_special_count > 5:
|
|
128
|
+
sections.append("components")
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### 4b. ID ve İsim Önerisi
|
|
132
|
+
|
|
133
|
+
- Dosya adını kebab-case'e çevir: "Material UI" → "material-ui"
|
|
134
|
+
- Rezerve isimler: `_config`, `_README`, `commands`, `hooks` → kullanma
|
|
135
|
+
- ID regex kontrolü: `^[a-z][a-z0-9-]{1,30}$`
|
|
136
|
+
- Geçersizse normalize et veya kullanıcıya sor
|
|
137
|
+
|
|
138
|
+
### 4c. Kullanıcıya Özet Göster
|
|
139
|
+
|
|
140
|
+
```
|
|
141
|
+
📊 Analiz Sonucu:
|
|
142
|
+
|
|
143
|
+
Dosya: <file_name>
|
|
144
|
+
Önerilen ID: <id>
|
|
145
|
+
Ad: <display_name>
|
|
146
|
+
|
|
147
|
+
Bulunan içerik:
|
|
148
|
+
✅ Tokens: <N> variable, <M> style
|
|
149
|
+
✅ Components: <K> bileşen
|
|
150
|
+
✅ Icons: <L> ikon (ayrı section)
|
|
151
|
+
ℹ️ Mobile: bulunamadı
|
|
152
|
+
|
|
153
|
+
Oluşturulacak dosyalar:
|
|
154
|
+
• _meta.md
|
|
155
|
+
• tokens.md
|
|
156
|
+
• components.md
|
|
157
|
+
• icons.md
|
|
158
|
+
|
|
159
|
+
Bu şekilde kaydetmek istiyor musun? (evet / değiştir / iptal)
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### 4d. Onay Sonrası
|
|
163
|
+
|
|
164
|
+
1. **Dizin oluştur:** `mkdir -p .claude/design-systems/<id>`
|
|
165
|
+
|
|
166
|
+
2. **`_meta.md` yaz** (kaynak-section eşleştirme ile):
|
|
167
|
+
```markdown
|
|
168
|
+
# <display_name> — Meta
|
|
169
|
+
|
|
170
|
+
## Kaynaklar (Source-to-Section Eşleştirme)
|
|
171
|
+
| Source ID | Figma File Key | File Name | Yazılan Section'lar |
|
|
172
|
+
|-----------|----------------|-----------|----------------------|
|
|
173
|
+
| main | <file_key> | <name> | tokens.md, components.md |
|
|
174
|
+
|
|
175
|
+
## Sync Durumu
|
|
176
|
+
- **Son başarılı sync:** (henüz yapılmadı)
|
|
177
|
+
- **Durum:** 🆕 BEKLEMEDE
|
|
178
|
+
- **Eksik section'lar:** tokens, components, icons, mobile
|
|
179
|
+
- **Devam komutu:** `/ds-sync <id>`
|
|
180
|
+
|
|
181
|
+
## İstatistikler
|
|
182
|
+
- Token sayısı: 0
|
|
183
|
+
- Bileşen sayısı: 0
|
|
184
|
+
- İkon sayısı: 0
|
|
185
|
+
|
|
186
|
+
## Sync Geçmişi
|
|
187
|
+
- (boş)
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
3. **İlk sync başlat:** `/ds-sync <id>` mantığını çalıştır (ayrı komut dosyası).
|
|
191
|
+
|
|
192
|
+
4. **project-context.md güncelle:** DS kurallar bölümü zaten genel kural içeriyorsa dokunma. Sadece kütüphane özelinde bir not gerekmez; kural otomatik uygulanır.
|
|
193
|
+
|
|
194
|
+
5. **Kullanıcıya rapor:**
|
|
195
|
+
```
|
|
196
|
+
✅ <display_name> eklendi.
|
|
197
|
+
📂 .claude/design-systems/<id>/
|
|
198
|
+
📊 İlk sync başlatılıyor (tahmini süre: <N> dakika)...
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
## Adım 5: Çoklu Kaynak İşleme (Fuzzy Match Seçeneği 1)
|
|
204
|
+
|
|
205
|
+
Kullanıcı benzer isimde mevcut bir kütüphaneye kaynak eklemek isterse:
|
|
206
|
+
|
|
207
|
+
1. Mevcut `_meta.md`'yi oku
|
|
208
|
+
2. "Kaynaklar" tablosuna yeni satır ekle
|
|
209
|
+
3. Yeni kaynağın içerik analizini yap
|
|
210
|
+
4. Hangi section'a yazılacağını belirle (örn: "mobile" isimdeki dosya → mobile.md)
|
|
211
|
+
5. `_meta.md`'de section listesini güncelle
|
|
212
|
+
6. Sadece o section için sync başlat (`/ds-sync <existing> mobile`)
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## Adım 6: Çoklu Link Tek Seferde (Senaryo E)
|
|
217
|
+
|
|
218
|
+
Kullanıcı birden fazla link verirse:
|
|
219
|
+
|
|
220
|
+
1. Her link için Adım 2'yi uygula (paralel)
|
|
221
|
+
2. Dosya adlarını kullanıcıya göster:
|
|
222
|
+
```
|
|
223
|
+
🔍 3 Figma dosyası tespit ettim:
|
|
224
|
+
1. Material UI
|
|
225
|
+
2. Material UI Icons
|
|
226
|
+
3. Material UI Themes
|
|
227
|
+
|
|
228
|
+
Bu 3'ü AYNI kütüphane olarak mı (tek 'material-ui') yoksa AYRI ayrı mı ekleyeyim?
|
|
229
|
+
(aynı / ayrı / iptal)
|
|
230
|
+
```
|
|
231
|
+
3. Cevaba göre:
|
|
232
|
+
- "aynı" → tek kütüphane, 3 kaynak
|
|
233
|
+
- "ayrı" → 3 ayrı kütüphane (her biri için Adım 4)
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## Hata Mesajları
|
|
238
|
+
|
|
239
|
+
| Hata | Kullanıcıya |
|
|
240
|
+
|------|-------------|
|
|
241
|
+
| Link yok | "Hangi Figma linkini eklemek istersin?" |
|
|
242
|
+
| Geçersiz link | "Bu Figma linki gibi durmuyor. Format: https://figma.com/design/..." |
|
|
243
|
+
| Bağlı değil | Adım 2'deki bağlantı talimatı |
|
|
244
|
+
| Boş dosya | "Bu dosyada hiçbir tasarım sistemi öğesi bulamadım. Link doğru mu?" |
|
|
245
|
+
| Permission denied | "Bu dosyaya erişim izninizin olmadığı görünüyor. Figma hesabınızı kontrol edin." |
|
|
246
|
+
| API timeout | "Figma yanıt vermiyor. Bağlantıyı kontrol edip tekrar dene." |
|
|
247
|
+
|
|
248
|
+
---
|
|
249
|
+
|
|
250
|
+
## Doğal Dil Desteği
|
|
251
|
+
|
|
252
|
+
Kullanıcı slash command kullanmasa bile bu komuttaki mantığı uygula:
|
|
253
|
+
- "Material UI kütüphanesini ekle: <link>" → bu komutun mantığı
|
|
254
|
+
- "Şu linkdeki tasarım sistemini ekle: <link>" → bu komutun mantığı
|
|
255
|
+
- "<link> bunu ekle" → bu komutun mantığı
|