implement-design

tarafından figma

Figma tasarımlarını piksel mükemmelliğinde görsel doğrulukla üretime hazır koda dönüştürür. Figma MCP sunucu bağlantısı ve dosya anahtarı ile düğüm kimliği içeren bir Figma URL'si gerektirir; tasarım bağlamını, ekran görüntülerini ve varlıkları çıkarmak için. Yedi adımlı yapılandırılmış iş akışı: URL'yi ayrıştır, tasarım bağlamını getir, görsel referansı yakala, varlıkları indir, proje kurallarına çevir, birebir eşleşme sağla ve Figma'ya karşı doğrula. Kopyalama yerine tasarım sistemi yeniden kullanımına öncelik verir; Figma token'larını proje tasarımına eşler...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

ZIP İndir GitHub

figma tarafından daha fazla skill

video-interaction-mapper

Bu beceri, kullanıcı bir UI ekran kaydını analiz etmesini ve etkileşim durumlarını Figma'ya haritalamasını istediğinde kullanılmalıdır. "videoyu koy..." gibi talepler için tetiklenir.

figma-code-connect

Figma Code Connect şablon dosyalarını oluşturur ve sürdürür; bu dosyalar Figma bileşenlerini kod parçacıklarına eşler. Kullanıcı Code Connect, Figma bileşeninden bahsettiğinde kullanılır.

create-design-system-rules

Projenizde tutarlı Figma'dan koda geçiş uygulaması için özel tasarım sistemi kuralları. Bileşen organizasyonu, stil, tasarım token'ları ve varlık yönetimi için projeye özgü kurallar oluşturur; bu kurallar AI ajanlarını tutarlı kod üretmeye yönlendirir. Üç kural dosyası formatını destekler: Claude Code için CLAUDE.md, Codex CLI için AGENTS.md ve Cursor için .cursor/rules/figma-design-system.mdc. Kural oluşturmadan önce mevcut desenleri keşfetmek için Figma MCP sunucu bağlantısı ve kod tabanı analizi gerektirir...

figma-implement-motion

Figma hareket ve animasyonlarını üretime hazır uygulama koduna çevirir. Bir Figma tasarımından animasyon/hareket uygulanırken kullanın — kullanıcı şunlardan bahseder…

SwiftUI ↔ Figma çevirisi. Kullanıcı Swift, SwiftUI, iOS, iPhone veya iPad'den bahsettiğinde — HER İKİ yönde de — bir Figma tasarımını çevirirken kullanın…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Bu beceri, ajanların Figma'nın use_figma MCP aracını Slaytlar bağlamında kullanmasına yardımcı olur. figma-use ile birlikte kullanılabilir; figma-use, kullanım için temel bağlam sağlar…

figma-use-figjam

Bu beceri, ajanların Figma'nın use_figma MCP aracını FigJam bağlamında kullanmasına yardımcı olur. figma-use ile birlikte kullanılabilir; bu araç, … kullanımı için temel bağlam sağlar.