create-design-system-rules

作成者： figma

プロジェクト全体で一貫したFigmaからコードへの実装を実現するカスタムデザインシステムルール。コンポーネント構成、スタイリング、デザイントークン、アセット処理に関するプロジェクト固有の規約を生成し、AIエージェントが一貫性のあるコードを生成できるよう導きます。CLAUDE.md（Claude Code用）、AGENTS.md（Codex CLI用）、.cursor/rules/figma-design-system.mdc（Cursor用）の3つのルールファイル形式に対応。ルール生成前にFigma MCPサーバー接続とコードベース分析による既存パターンの検出が必要です...

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

ZIPダウンロード GitHub

figmaのその他のスキル

video-interaction-mapper

このスキルは、ユーザーがUI画面の録画を分析し、インタラクションの状態をFigmaにマッピングするよう依頼した場合に使用されます。「動画を配置して…」といったリクエストでトリガーされます。

figma-code-connect

FigmaコンポーネントをコードスニペットにマッピングするFigma Code Connectテンプレートファイルを作成・管理します。ユーザーがCode ConnectやFigmaコンポーネントについて言及した場合に使用します。

figma-implement-motion

Figmaのモーションとアニメーションを本番対応のアプリケーションコードに変換します。Figmaデザインからアニメーション/モーションを実装する際に使用 — ユーザーが言及…

SwiftUI ↔ Figmaの変換。ユーザーがSwift、SwiftUI、iOS、iPhone、iPadのいずれかを言及した場合に使用し、Figmaデザインを…に変換する双方向の処理を行います。

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

このスキルは、エージェントがFigmaのuse_figma MCPツールをスライドコンテキストで使用する際に役立ちます。figma-useと併用可能で、figma-useは…を使用するための基礎的なコンテキストを提供します。

figma-use-figjam

このスキルは、エージェントがFigJamコンテキストでFigmaのuse_figma MCPツールを使用するのを支援します。use_figmaの基本的なコンテキストを持つfigma-useと併用できます。

code-connect-components

Code Connectを使用してFigmaデザインコンポーネントとコード実装の間に双方向リンクを確立します。Figma MCPサーバー接続と、OrganizationまたはEnterpriseプランで公開されたコンポーネントが必要です。Figmaの選択範囲内の未マッピングコンポーネントを自動的に識別し、名前、構造、プロパティに基づいてコードベース内の一致するコードコンポーネントをスキャンします。マッピングを作成する前に、一致したコンポーネントをレビュー用に提示し、選択的に受け入れまたは拒否できます。複数の...をサポートします。