mcpField
F
figma-reader

figma-reader

github.com/delexwデザイン・UI262 回インストール31 週間前に更新
リポジトリ

figma-reader について

figma-reader は、Figma MCP を通じてデザインのコンテキストを読み取り、整形したブループリントを保存するスキルです。Figma のリンク、コピーしたデザインプロンプト、UI 画像を受け付け、入力や MCP 接続がない場合はユーザーを案内します。

主な機能

  1. 01Figma MCP ツールの利用可否を確認
  2. 02リンク、プロンプト、UI 画像を受け付け
  3. 03デザイン選択とセットアップを案内
  4. 04デザイン情報をブループリントに整形
  5. 05指定ディレクトリに出力を保存

活用シーン

  1. 01Figma リンクからデザイン情報を取得
  2. 02UI 画像を使って Figma コンポーネントを特定
  3. 03実装用のデザインメモを保存

MCP 対応

Figma MCP ツールを使い、解決した Figma リンクからデザイン情報を読み取ります。実行前にツールの利用可否を確認します。

インストール

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

$npx skills add https://github.com/delexw/claude-code-misc --skill figma-reader

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

同梱ファイルreferences/output-format.mdreferences/rules.md

詳細

Figma Reader

Figma MCP サーバー経由でFigmaのデザインコンテキストを読み取ります。

入力

生の引数：$ARGUMENTS

引数から以下を推定します：

  • DESIGN_INPUT：Figmaリンク、Figmaからコピーしたデザインプロンプト、または添付されたUIデザイン画像（任意）
  • OUT_DIR：出力ディレクトリ。指定されていない場合は .implement-assets/figma

以下のすべての出力パスに OUT_DIR を使用します。

実行

  1. 事前確認：ToolSearch を使用してFigma MCPツールが利用可能かどうかを確認します。references/rules.md に従ってください
  2. MCPが利用できない場合は、AskUserQuestion を使用してセットアップを案内するか、スキップできるようにします
  3. デザイン入力の解決：
    • DESIGN_INPUTに有効なFigmaリンクまたはプロンプトが含まれている場合 → そのまま使用します
    • DESIGN_INPUTが添付されたUI画像の場合 → コンテキストとして画像を表示し、AskUserQuestion を使用して、Figmaで該当するコンポーネントを選択するようユーザーに尋ねます（references/rules.md の Design Input を参照）
    • DESIGN_INPUTが空、または指定されていない場合 → AskUserQuestion を使用してユーザーに尋ねます（references/rules.md の Design Input を参照）
  4. デザインの読み取り：Figma MCPツールを使用して、手順3で解決したFigmaリンクからデザインを読み取ります
    • 出力は references/output-format.md の形式にします
    • 出力の保存：Bash経由で mkdir -p OUT_DIR を実行し、Writeツールを使用して、整形済みの出力全体を OUT_DIR/blueprint.md に保存します

コメント

Markdown 対応