Components

figma-code-connect-components は、Figma Code Connect を使って Figma のデザインコンポーネントを対応するコードコンポーネントに対応付けるためのスキルです。デザイン実装の整合、variant と prop の対応、そしてマッピング作成前に適切なローカルコンポーネントを見つける用途に向いています。キャンバス上の文章作成やページ全体の生成ではなく、connect、map、link-to-code のワークフローに最適です。

wpds スキルを使うと、WordPress Design System（WPDS）に基づいて WordPress UI の作成やレビューを進められます。WPDS MCP server を通じてコンポーネント、トークン、パターン、パッケージの適合性を確認できるため、wpds ガイドを勘ではなく正規ドキュメントに沿って保てます。Gutenberg、WooCommerce、WordPress.com、Jetpack などの関連インターフェースにまたがる Design Systems 業務で特に有用です。

figma-use は、use_figma を呼び出す前に毎回インストールしておくことで、Figma のファイルコンテキスト内で JavaScript を安全に実行できるようにするスキルです。ノードの作成・編集、変数やスタイルの接続、コンポーネントやバリアントの構築、ファイル構造のプログラム的な निरी査といった、デザイン実装作業を支援します。リポジトリには、よくある Figma 自動化エラーを減らすための使い方、注意点、パターンがまとめられています。

component-refactoringスキルは、アナライザーの指標をもとに、Difyフロントエンド内の複雑なReactコンポーネントをリファクタリングするのを支援します。`pnpm analyze-component --json` で複雑度が50を超える、行数が300を超える、またはコード分割、hook抽出、あるいは一般的な書き換えではなく、より安全なcomponent-refactoringの手順が必要な場合に使います。

figma-generate-library は、コードベースから Figma のデザインシステムを構築・更新するためのスキルです。トークン、コンポーネントライブラリ、ドキュメント、ライト/ダークテーマ対応まで、順序立てたワークフローで進められます。単発のモックアップではなく、Design Systems 向けの実践的なガイドが必要なときに使ってください。Plugin API の呼び出しには figma-use を補完的に併用できます。

figma-generate-design は、公開済みのデザインシステムを使って、コード化されたページ、モーダル、ドロワー、サイドバー、パネルなどの複数セクション画面を Figma へ落とし込むのに役立ちます。Code Connect や関連ソースからコンポーネント、変数、スタイル、ライブラリアセットを見つけ、画面全体を一から描き直すのではなく、Design Implementation 向けにセクションごとに組み立てます。コードやトークンとの忠実性を重視して Figma 画面を作成したいときは、figma-generate-design ガイドを使ってください。

figma-use は、Figma Plugin API のワークフローで安全に `use_figma` を呼び出すために必須のスキルです。Figmaファイルを JavaScript で作成・更新・確認・構成する前に、この figma-use スキルをインストールして読み込んでください。特に、Design Implementation、コンポーネント作業、変数、オートレイアウト、プログラムによるファイル読み取りで役立ちます。

figma-generate-library は、コードベースを tokens、variables、components、theming、documentation を備えた Figma の design system library に変換するのに役立ちます。Design Systems の作業で、install、setup、discovery、creation、validation、code との reconciliation まで含む段階的なワークフローが必要なときに、この figma-generate-library スキルを使います。

figma-generate-design は、実際の画面・ページ・複数セクションのレイアウトを、汎用的な図形ではなく公開済みのデザインシステムを再利用しながら Figma に落とし込むのに役立ちます。コードやプロダクトページとの高い整合性、編集しやすい構造、トークンベースの一貫性を重視する場合に最適です。ラフなモックアップではなく、フルページの UI デザイン更新に使ってください。