# Generate Figma Screen

> Kod veya açıklamadan Figma'da tam ekran/sayfa oluşturur. Yayınlanmış design system bileşenlerini arayıp instance olarak yerleştirir; hardcode değer yerine DS token'larını kullanır. "Figma'da ekran oluştur", "kodu Figma'ya çevir", "landing page çiz", "ekran tasarla", "generate screen", "UI'ı Figma'ya aktar" ifadeleriyle tetiklenir. F-MCP Bridge ve figma_execute gerektirir.

- **Type:** Skill
- **Install:** `agentstack add skill-atezer-fmcp-generate-figma-screen`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [atezer](https://agentstack.voostack.com/s/atezer)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [atezer](https://github.com/atezer)
- **Source:** https://github.com/atezer/FMCP/tree/main/skills/generate-figma-screen
- **Website:** https://www.npmjs.com/package/@atezer/figma-mcp-bridge

## Install

```sh
agentstack add skill-atezer-fmcp-generate-figma-screen
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Generate Figma Screen — Kod/Açıklamadan Figma Ekranı

> **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, bir kod tabanından veya metin açıklamasından Figma'da tam sayfa/ekran oluşturur. Temel ilke: hardcode hex renk ve piksel değerleri yerine **yayınlanmış design system** bileşenlerini (component instance), değişkenlerini (variable) ve stillerini (text/effect style) kullanmak.

Topluluk `figma-generate-design` skill'inden uyarlanmış, F-MCP Bridge araçlarına göre yeniden yazılmıştır.

**Zorunlu:** Her `figma_execute` çağrısından önce [figma-canvas-ops](../figma-canvas-ops/SKILL.md) kılavuzundaki kuralları uygula.

## Skill Boundaries

- Bu skill: Figma'da **ekran** oluşturma/güncelleme (DS bileşen instance'ları ile)
- Figma'dan **kod** üretmek istiyorsan → [implement-design](../implement-design/SKILL.md)
- Yeniden kullanılabilir **bileşen/variant** oluşturmak istiyorsan → [generate-figma-library](../generate-figma-library/SKILL.md)
- Code Connect eşlemesi istiyorsan → [code-design-mapper](../code-design-mapper/SKILL.md)

## Prerequisites

- F-MCP Bridge plugin bağlı olmalı
- Hedef Figma dosyasında yayınlanmış DS bileşenleri (veya team library erişimi) olmalı
- Kaynak: kod dosyaları veya ekran açıklaması

## F-MCP skill koordinasyonu

- **Önce (isteğe bağlı):** `audit-figma-design-system` ile mevcut ekranın DS uyumunu kontrol et
- **Birlikte:** `figma-canvas-ops` (her `figma_execute` öncesi zorunlu)
- **Sonra:** `figma-a11y-audit` ile erişilebilirlik kontrolü; `design-drift-detector` ile kod parity'si

## Required Workflow

**Bu adımları sırayla uygula. Adım atlama.**

### Step 0: Aktif Tasarım Sistemi Kontrolü (ZORUNLU - v1.8.0+)

**Ekran yapmaya başlamadan önce DS context'inin belirli olduğundan emin ol.**

```
1. Read .claude/design-systems/active-ds.md
2. Status alanı:
   ✅ Aktif        → Library Name'i not al, Step 1'e geç
   ❌ Henüz seçilmedi → Kullanıcıya sor:
     "Hangi tasarım sistemi ile ilerleyelim?
      - ❖ SUI (varsa)
      - Material Design
      - Apple HIG
      - Kendi DS'iniz (Figma library URL verin)
      - Hiçbiri (ham Figma)"
3. Kullanıcı yanıtladıktan sonra active-ds.md'yi update et:
   - Status: ✅ Aktif
   - Library Name: 
   - Selected At: 
4. Sonraki turlarda bu soruyu TEKRAR SORMA — active-ds.md zaten dolu.
   Kullanıcı açıkça "DS değiştir" demediği sürece aynı DS'i kullan.
```

**Bypass:** Kullanıcı "DS'siz devam et" derse `Status: DS bypass mode` olarak işaretle. Token binding kuralı esnetilir ama yine de kullanıcıya hardcoded değer kullandığını bildir.

Detay: [figma-canvas-ops SKILL Section 0 — Design System Context](../figma-canvas-ops/SKILL.md#0-design-system-context-zorunlu--v180).

### Step 1: Plugin Bağlantısını Doğrula

```
figma_get_status()
```

### Step 2: Ekranı Anla

Figma'ya dokunmadan önce ne inşa edileceğini anla:

1. Koddan oluşturuluyorsa ilgili kaynak dosyaları oku — sayfa yapısı, bölümler, kullanılan bileşenler
2. Ekranın ana bölümlerini listele (Header, Hero, Content, Footer vb.)
3. Her bölüm için gereken UI bileşenlerini belirle (Button, Input, Card, Nav vb.)

### Step 2.5: Tasarım Yönü Belirleme

DS bileşenlerini keşfetmeden ÖNCE, ne inşa edileceğinin estetik yönünü belirle.

#### Marka Profili Kontrolü

Proje kökünde `.fmcp-brand-profile.json` varsa:
- `aestheticDirection` → estetik yön zaten tanımlı, kullan
- `typography.displayFont` / `typography.bodyFont` → font seçimi zaten tanımlı, kullan
- `typography.rationale` → seçim gerekçesi mevcut

#### Profil Yoksa Kullanıcıya Sor

**Amaç:** Bu ekran hangi sorunu çözüyor? Kim kullanıyor?

**Estetik Yön:** Aşağıdakilerden birini seç veya tanımla:

| Yön | Karakteristik | Örnek Referans |
|-----|--------------|----------------|
| Brutal minimal | Çok beyaz alan, tek font, siyah-beyaz + tek accent | Stripe, Linear |
| Maksimalist | Yoğun renk, bold tipografi, katmanlı | Spotify Wrapped, Figma |
| Retro-futuristik | Neon + karanlık, monospace, grid | Vercel, Terminal |
| Organik / doğal | Yumuşak köşeler, sıcak renkler, el yapımı his | Notion, Calm |
| Lüks / rafine | Serif font, düşük kontrast, çok whitespace | Apple, Aesop |
| Playful / oyunsu | Renkli, yuvarlak, büyük tipografi | Duolingo, Slack |
| Editorial / dergi | Grid bazlı, image-heavy, typographic | Medium, NYT |
| Brutalist / ham | Kırık grid, mono font, minimal dekorasyon | Bloomberg, Craigslist |
| Soft / pastel | Hafif renkler, yumuşak gölgeler, rounded | Headspace, Airbnb |
| Industrial / utiliteryen | Fonksiyonel, data-dense, utility-first | GitHub, Grafana |

**Kısıtlamalar:** Teknik gereksinimler (framework, performans, a11y)

**Farklılaşma:** Bu ekranı unutulmaz yapan tek şey ne?

> **DS bileşen kütüphanesi olan projelerde:** Estetik yön DS'nin belirlediği sınırlar içinde olmalı. DS font, renk ve spacing kararlarını zaten vermiştir. Bu adım DS'yi *aşmak* için değil, DS bileşenlerini *nasıl compose edeceğini* yönlendirmek içindir.

#### Tipografi Stratejisi

| Durum | Font Seçimi |
|-------|-------------|
| Marka profili var | `typography.displayFont` + `typography.bodyFont` kullan |
| DS font'ları var | DS font'larını kullan (Inter DS font'uysa Inter DOĞRU — Anti-pattern DEĞİL) |
| Ne DS ne profil var | Ayırt edici display font seç (Satoshi, Clash Display, General Sans vb.) + okunaklı body font |

- Display font: başlıklar, hero text, sayfa title
- Body font: paragraflar, açıklamalar, form etiketleri
- Font çifti kararını raporda belirt (neden bu çift?)

### Step 3: Design System Keşfi (Cache-First Stratejisi)

Üç şey gerekiyor: **bileşenler**, **variable'lar**, **stiller**.

**⚠️ MCP TOOL SEÇİMİ (v1.8.0+):**
- F-MCP plugin bağlıysa **`figma_search_assets`** veya **`figma_get_library_variables`** kullan
- Resmi Figma MCP'nin **`search_design_system`** tool'unu **ÇAĞIRMA** — "Resource links not supported" / "file could not be accessed" hatası verir
- Detay: FMCP_INSTRUCTIONS → "TOOL SELECTION" bölümü

**CACHE-FIRST KURALI (MUTLAK ZORUNLU - PRE-FLIGHT BLOCKER):**

Figma API'ye gitmeden önce `.claude/design-systems//` cache'ini kontrol et:

```
1. Read .claude/design-systems//_meta.md
   ↓
   ✅ Var, sync güncel (24h içinde) → cache'leri kullan, devam et
   ❌ Yok / sync eski / yarım kalmış → Step 3a-3d'yi ÇALIŞTIR ve cache'i doldur,
                                       ANCAK O ZAMAN ekran üretimine başla
```

**Cache eksik veya stale ise ekran üretimi BAŞLAYAMAZ** — önce keşif/cache, sonra üretim. Bu, hardcoded fallback'leri ve tekrar tekrar API çağrılarını engeller.

- Text style key'leri → `.claude/design-systems//tokens.md` (text style key cache)
- Variable key'leri → `.claude/design-systems//tokens.md`
- Component key'leri + override notları → `.claude/design-systems//components.md`
- Font ailesi + available weights → `.claude/design-systems//tokens.md` (Font Weights bölümü)

Cache doldurulduktan sonra her oturumda 24 saat boyunca tekrar API'ye gitmeden okunabilir. **Bu, sonraki oturumlarda token tüketimini %60-70 düşürür.**

**Cache Invalidation:** Cache dosyasının başına `lastUpdated: YYYY-MM-DD HH:mm` ekle. 24 saatten eski cache'ler otomatik yenilenmelidir. Kütüphane güncellendiğinde key'ler değişebilir.

#### Kütüphane Cache Şablonu

Her DS kütüphanesi `.claude/libraries/.md` dosyasında şu bölümleri içermeli:

```markdown
### Text Style Key Cache (importStyleByKeyAsync ile kullan)
| Style Adı | Font | Size | Key |
|-----------|------|------|-----|
| heading/h1 | Bold | 32 | `abc123...` |
| body/regular | Regular | 14 | `def456...` |

### Effect Style Key Cache
| Style Adı | Key |
|-----------|-----|
| shadow/card | `ghi789...` |

### Sık Kullanılan Variable Key Cache
**Renkler:**
| Variable | Key |
|----------|-----|
| bg/primary | `jkl012...` |

**Boyutlar:**
| Variable | Key |
|----------|-----|
| spacing/md | `mno345...` |

### Sık Kullanılan Component Key Cache
| Bileşen | Key | Override Notları |
|---------|-----|------------------|
| Button | `pqr678...` | `Label#id` → TEXT property |
| Input | `stu901...` | Label → nested text (findOne) |
```

**Cache oluşturma:** İlk ekran oluşturmada `figma_get_styles`, `figma_get_variables(summary)` ve `componentProperties` ile key'leri topla, `.claude/libraries/.md`'ye yaz. Sonraki oturumlarda direkt cache'den oku.

#### 3a: Bileşen keşfi

**Tercih: önce mevcut ekranları incele.** Dosyada aynı DS'yi kullanan ekranlar varsa, `figma_execute` ile mevcut instance'ları tara:

```js
const frame = figma.currentPage.findOne(n => n.name === "Mevcut Ekran");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];
```

Mevcut ekran yoksa `figma_search_components` ve `figma_get_design_system_summary` kullan. **Geniş ara** — birden fazla terim dene:

```
figma_search_components(query="button", currentPageOnly=false)
figma_search_components(query="input", currentPageOnly=false)
figma_search_components(query="card", currentPageOnly=false)
```

#### 3b: Variable keşfi

```
figma_get_variables(verbosity="summary")
```

Renk, spacing, radius token'larını not al. Gerekirse `verbosity="full"` ile detay al.

#### 3c: Stil keşfi

```
figma_get_styles()
```

Text style ve effect style'ları not al.

#### 3d: DS Variable Key'lerini Hazırla (ZORUNLU)

Ekran oluşturmadan önce kullanılacak tüm DS token'larının **variable key'lerini** topla. Bu adım atlanamaz.

1. **Kütüphane dosyasını oku:** `.claude/libraries/` dizinindeki kütüphane dosyasından font ailesi, variable collection ve text style bilgilerini al.
2. **HEDEF dosyada variable key'lerini çek** (DS dosyasına bağlanmak GEREKMEZ):
   ```
   figma_get_library_variables({ libraryName: "❖ SUI" })
   ```
   Veya `figma_execute` ile:
   ```js
   // HEDEF dosyada çalıştır — DS dosyası değil!
   var cols = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
   var target = cols.filter(function(c) { return c.libraryName === "❖ SUI"; });
   var results = [];
   for (var ci = 0; ci  {
  const right = c.x + c.width;
  if (right > maxX) maxX = right;
});

// DS'den arka plan ve spacing variable'larını import et
const bgVar = await figma.variables.importVariableByKeyAsync("SURFACE_BG_KEY");
const paddingVar = await figma.variables.importVariableByKeyAsync("SPACING_KEY");

const frame = figma.createFrame();
frame.name = "Ekran Adı";
frame.x = maxX + 100;
frame.y = 0;
frame.resize(1440, 900); // Masaüstü varsayılan; mobil için 390x844
frame.layoutMode = "VERTICAL";
frame.primaryAxisSizingMode = "AUTO";
frame.counterAxisSizingMode = "FIXED";

// Arka plan rengini DS variable'ına BAĞLA (hardcoded renk YAZMA)
const fills = [{type: "SOLID", color: {r:1,g:1,b:1}}]; // geçici
const boundFill = figma.variables.setBoundVariableForPaint(fills[0], "color", bgVar);
frame.fills = [boundFill];

// Padding'i DS variable'ına BAĞLA
frame.setBoundVariable("paddingLeft", paddingVar);
frame.setBoundVariable("paddingRight", paddingVar);
frame.setBoundVariable("paddingTop", paddingVar);
frame.setBoundVariable("paddingBottom", paddingVar);

return { frameId: frame.id, position: { x: frame.x, y: frame.y } };
```

### Step 5: Bölüm Bölüm İnşa Et

**Her bölümü ayrı bir `figma_execute` çağrısında oluştur.** Tek çağrıda tüm ekranı oluşturmaya ÇALIŞMA.

Sıra: Üstten alta — Header → Hero → Content → Footer

Her bölüm için:

1. `figma_execute` ile bölüm frame'ini oluştur, DS bileşen instance'larını yerleştir
2. **Tüm renkleri `setBoundVariableForPaint` ile DS variable'ına bağla** — hardcoded renk kullanma
3. **Tüm spacing/padding/radius değerlerini `setBoundVariable` ile bağla** — hardcoded sayı kullanma
4. **Metin node'larına text style ata:** `setTextStyleIdAsync` ile DS text style'ını uygula — hardcoded fontSize/fontName kullanma
5. Oluşturulan node ID'lerini return et
6. `figma_capture_screenshot` ile görsel doğrulama — boundVariables bağlı mı kontrol et

**Metin oluşturma kalıbı (DS'e bağlı):**

```js
await figma.loadFontAsync({ family: "DS_FONT", style: "Regular" });
const textColorVar = await figma.variables.importVariableByKeyAsync("TEXT_COLOR_KEY");

const text = figma.createText();
text.characters = "Metin içeriği";

// Text style uygula (fontSize, fontName, lineHeight hep style'dan gelir)
await text.setTextStyleIdAsync("TEXT_STYLE_ID");

// Metin rengini DS variable'ına bağla
const textFills = [...text.fills];
const boundTextFill = figma.variables.setBoundVariableForPaint(textFills[0], "color", textColorVar);
text.fills = [boundTextFill];
```

**Loading State Karar Ağacı:**

Dinamik içerik barındıran her öğe için uygun loading pattern'ını belirle:

| Beklenen Yüklenme Süresi | Loading Pattern | Kullanım |
|--------------------------|----------------|----------|
|  10 saniye | Progress bar | Dosya yükleme, toplu işlem |

**Skeleton türleri:**
- Metin bloğu → `skeleton-text` (tam genişlik × 16px, 2-3 satır)
- Başlık → `skeleton-title` (200px × 24px)
- Avatar/ikon → `skeleton-circle` (pulse animasyonlu daire)
- Kart → `skeleton-card` (başlık + 2 satır metin + görsel alanı)
- Tablo/liste → `skeleton-row` (satır bazlı tekrarlayan skeleton)

**Instance oluşturma kalıbı:**

```js
// figma_instantiate_component aracını kullan veya figma_execute içinde:
const component = figma.root.findOne(
  n => n.type === "COMPONENT" && n.name === "Button"
);
const instance = component.createInstance();
parentFrame.appendChild(instance);
// FILL boyutlandırmayı appendChild'DAN SONRA ayarla
instance.layoutSizingHorizontal = "FILL";
```

**Tercihen `figma_instantiate_component` aracını kullan** — daha güvenli ve basit.

### Step 5.1: Gestalt İlkeleri ile Spacing Kararları (ZORUNLU)

Tek bir `itemSpacing` ile tüm bölümü dizme — **YANLIŞ**. Spacing kararlarında tüm tasarım ilkelerini sentezle:

**Gestalt Proximity:** İlişkili öğeler yakın, ilişkisiz öğeler uzak.
```
Card içi mantıksal gruplar (nested frame ile):
├── Header Group (title + subtitle) → iç gap: küçük (sp-050 ~ sp-100)
├── Form Group (inputs + checkbox) → iç gap: küçük-orta (sp-100 ~ sp-150)
├── Action Group (button + register link) → iç gap: küçük (sp-100 ~ sp-150)
├── Social Group (divider + social buttons + legal) → iç gap: küçük-orta (sp-150)
└── Gruplar arası gap: BÜYÜK (sp-300 ~ sp-400)
```

**Similarity:** Aynı işlevi gören öğeler aynı text style, renk ve boyutta olmalı.
**Hierarchy:** Büyük/bold = önemli (başlık, CTA), küçük/light = ikincil (legal text, açıklama).
**Contrast:** CTA butonu ve önemli öğeler arka plandan ayrışmalı.
**Alignment:** Tutarlı hizalama ile düzen hissi — tüm child'lar `layoutSizingHorizontal="FILL"` (appendChild SONRA).
**White Space:** Nefes aldıran boşluklar — ne çok sıkışık ne çok dağınık.

### Step 5.15: DS Bileşen Kullanım Kuralı (ZORUNLU)

**Önce DS'te o işlevi karşılayan bileşen variant'ını ara. DS'te varsa bileşeni kullan, yoksa raw node oluştur.**

| İhtiyaç | YANLIŞ (raw node) | DOĞRU (DS bileşen) |
|---------|-------------------|---------------------|
| Link text | Text node + Text/link rengi | Button(Type=Link) instance |
| İkon göstermek | Rectangle + SVG path | İkon component instance |
| Ayırıcı çizgi | Rectangle 1px yükseklik | Divider component instance |
| Placeholder input | Text node + gri renk | Input component doğru variant |
| Toggle | Checkbox + custom logic | Switch component instance |

**Kural:** Ekrana koyacağın her UI öğesi için şu soruyu sor: "DS'te bu işlevi karşılayan bileşen var mı?"
- **Evet →** DS bileşenini kullan, variant/prop

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [atezer](https://github.com/atezer)
- **Source:** [atezer/FMCP](https://github.com/atezer/FMCP)
- **License:** MIT
- **Homepage:** https://www.npmjs.com/package/@atezer/figma-mcp-bridge

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-atezer-fmcp-generate-figma-screen
- Seller: https://agentstack.voostack.com/s/atezer
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.