mcpField
F
figma-generate-design

figma-generate-design

github.com/nexu-ioデザイン・UI104.6k2.8k 回インストール1 日前に更新
リポジトリ

figma-generate-design について

figma-generate-designは、デザインシステムのコンポーネントとデザイントークンを使い、コードや説明からFigmaの画面を作成・更新するスキルです。

主な機能

  1. 01説明からFigma画面を作成
  2. 02コードからアプリ画面を変換
  3. 03デザインシステムのコンポーネントを使用
  4. 04デザイントークンを適用

活用シーン

  1. 01説明からアプリ画面を作成
  2. 02アプリ画面をFigmaに変換
  3. 03既存のFigma画面を更新

MCP 対応

FigmaのMCP server guideをもとに整理されたスキルです。READMEには、MCPサーバーへの接続や管理方法は記載されていません。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill figma-generate-design

インストール後、Claude Code で/figma-generate-designを入力して読み込まれたか確認します。

詳細

figma-generate-design

Figma の MCP サーバーガイドから厳選しました。

機能

デザインシステムのコンポーネントを使用して、コードや説明から Figma の画面を作成または更新します。デザイントークンを使用して、アプリのページを Figma に変換します。

ソース

使用方法

このカタログの項目は、エージェントが計画中にスキルを見つけられるよう、OpenDesign でスキルを紹介します。元のアセット、スクリプト、リファレンスを含む上流のワークフロー全体を実行するには、上流のバンドルを、現在使用しているエージェントのスキルディレクトリにインストールしてください。

# Inspect the upstream README for exact paths
open https://github.com/figma/skills

次に、このスキルの名前（figma-generate-design）を指定するか、スキルのフロントマターに記載されたトリガーフレーズのいずれかを使って、このスキルを呼び出すようエージェントに依頼してください。

コメント

Markdown 対応