create-design-system-rules

tarafından figma

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...

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

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.

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.

code-connect-components

Figma tasarım bileşenleri ile kod uygulamaları arasında Code Connect kullanarak çift yönlü bağlantılar kurar. Figma MCP sunucu bağlantısı ve Organization veya Enterprise planlarında yayınlanmış bileşenler gerektirir. Figma seçimlerindeki eşlenmemiş bileşenleri otomatik olarak tanımlar, ardından kod tabanınızı ad, yapı ve prop'lara göre eşleşen kod bileşenleri için tarar. Eşleşen bileşenleri eşleme oluşturmadan önce incelemeniz için sunar ve seçici kabul veya reddetmeye olanak tanır. Birden fazla...