本文へ移動
cccskills
無料GitHub で公開

figma-mcp-design-orchestrator

Figma MCP で「設計を Figma 上で完結」させる進行役。ユーザーファースト成果物→Canvas/MCP 実行。figma-use 必須・公式付属 Skill 連携（全PJ共通）。

ax-inc-dev/claude-cursor-orchestrationスター 3(GitHub 3 + cccskills 0)
連携ツールFigma

実行スコア 未検証

インストール方法を見る

含まれるファイル（1）

  • SKILL.md5.1 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Figma MCP Design Orchestrator（全PJ共通）

When to Use

  • ユーザーが Figma で画面／デザインシステム／LP を作り切りたい、figma.com URL を渡した、コードより先にデザインを固めたいとき
  • Use proactively：Figma・デザインハンドオフ・Make・FigJam に触れる前に本 SKILL を Read

絶対順序（Web・チュートリアルと Figma 公式 INSTRUCTIONS の準拠）

  1. Read: user-first-product-design — 外形（Figma）に入る前にアウトカムとタスクを固定する。
  2. 成果物（任意）: docs/design/ux-brief.md 等に落とす — テンプレは ~/.cursor/templates/docs-design/
  3. Figma MCP の 読み取り／デザイン→コードなら get_design_context を中核に（節「Design-to-code」）。
  4. Figma への書き込み（変数・コンポーネント・オートレイアウト・キャンバス編集）は use_figma のみ。その前に必ず figma-use Skill を全文 Read（公式 MANDATORY）。
  5. Web ページを初めて Figma に取り込む用途は generate_figma_design。既存フレームの更新・同期は基本 use_figma（公式 INSTRUCTIONS の使い分け）。
  6. コンポーネントを増やす前に search_design_system（既存を流用）。

Figma 付属 Skill の場所（この Mac）

プラグインキャッシュはハッシュで変わり得る。必ず 次を Glob で探してから Read すること。

  • 優先パターン: ~/.cursor/plugins/cache/**/figma-use/SKILL.md
  • 同ディレクトリの figma-generate-design / figma-implement-design / figma-code-connect-components など
やりたいこと読む Skill（最低限）MCP ツールの目安
キャンバスに書く・変数・コンポーネントfigma-useuse_figma（skillNames: "figma-use"）
コード／説明から 画面全体を Figma にfigma-use + figma-generate-designuse_figma + search_design_system、必要なら generate_figma_design
Figma から コード実装figma-implement-designget_design_context
コード ↔ コンポーネント対応figma-code-connect-componentsCode Connect 系ツール

call_mcp_tool の server は環境により plugin-figma-figma（identifier）。利用前に MCP ディスクリプタでサーバー名を確認する。

URL から fileKey / nodeId

公式パース（INSTRUCTIONS 準拠）:

  • figma.com/design/:fileKey/:fileName?node-id=1-2 → nodeId は 1:2（ハイフンをコロンに）
  • ブランチ URL: .../design/:fileKey/branch/:branchKey/... → fileKey には branchKey を使う
  • figma.com/make/... → Make ファイルキー
  • figma.com/board/... → FigJam（get_figjam 等）

デザイン・ファイルのベストプラクティス（調査ソースの合意）

  • Auto Layout を前提に（読みやすい階層・実装時の一貫性）
  • Variables／トークンで色・余白・角丸・タイポを持つ（ハードコード地獄を避ける）
  • コンポーネントで再利用。増殖前に search_design_system
  • 巨大フレームを避け、セクション単位で use_figma を分割（figma-use の「小ステップ」）
  • Design-to-code で返ったコードは 参照用。プロジェクトのスタック・既存 DS に合わせて改める（公式 INSTRUCTIONS）

Subagent 委譲（全PJ ~/.cursor/agents/）

段階Subagentslash
UX 仕様のみ（Figma 触らない）figma-ux-spec-lead/figma-ux-spec-lead
キャンバス構築・変数・コンポーネントfigma-canvas-builder/figma-canvas-builder

親エージェントは Task にワークスペースルート・Figma URL・fileKey・対象ページ名・user-first の要約を渡す。

<SUBAGENT-STOP>
figma-canvas-builder に figma-use の全文を貼らない。**「fileKey」「やること」「参照フレーム名」**と figma-use を Read 済みで委譲する。
</SUBAGENT-STOP>

Design-to-code（実装フェーズ）

  1. get_design_context(fileKey, nodeId, ...) — スクリーンショットは デフォルトで残す（excludeScreenshot はユーザーが省けと言ったときのみ）
  2. Code Connect・注釈・CSS 変数ヒントを優先し、プロジェクトのコンポーネントにマッピング
  3. 実装 Skill: figma-implement-design を Read

参考リンク

  • Cursor × Figma MCP の補助説明例: Builder.io — Figma MCP Server
  • 「トークン準備がコード品質を決める」系の記事群と整合（設計前に変数化）

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

b2b-site-strategy-and-ia

無料概要あり

B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用（全PJ共通）。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

babysit

無料

Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.

日本語の概要は準備中です。原文の説明を表示しています。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

biz-presentation-engine

無料概要あり

法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書（アウトライン＋テンプレート指定＋カラー＋コンテンツ）を受け取り、単一HTMLファイルとして実装する。43種テンプレート＋14種アニメーション。トリガー：プレゼン実装、スライドHTML生成、提案資料コーディング。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

brainstorming

無料

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

日本語の概要は準備中です。原文の説明を表示しています。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

canvas

無料

A Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.

日本語の概要は準備中です。原文の説明を表示しています。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

create-cursor-agent

無料

Authors Cursor Rules (.cursor/rules/*.mdc) and custom Subagents (.cursor/agents/*.md or ~/.cursor/agents). Use when creating or refactoring rules/subagents, splitting large rules, choosing subagent vs skill, setting model/readonly/background, or replacing repeated delegation prompts.

日本語の概要は準備中です。原文の説明を表示しています。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

ax-inc-dev のスキルをすべて見る

このスキルの問題を報告する