designfit

ローカル

github.com開発ツール73 週間前に更新

リポジトリ公式サイト

designfit について

designfitは、Figmaデザインとフロントエンド実装を照合するMCPサーバーとClaude Codeスキルです。デザイントークンと要素のジオメトリを許容差付きで比較し、ピクセル差分に頼らず修正項目を返します。

主な機能

01Figmaからデザインデータを抽出
02トークンと要素ジオメトリを検証
03違反項目と未マッピング要素を報告
04スコア付きの検証結果を返却
05忠実度スキルで反復チェック

活用シーン

01AIが構築したページをFigmaフレームと照合
02レイアウトや色の不一致を特定
03フロントエンドの段階的な修正を支援

MCP 対応

MCPクライアント向けに `designfit_extract` と `designfit_validate` ツールを提供します。抽出はFigmaリンクまたは指定されたノードデータを受け取り、検証は合否、スコア、違反項目、未マッピング要素を返します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "as9978-designfit": {
      "command": "npx",
      "args": [
        "-y",
        "designfit"
      ],
      "env": {
        "FIGMA_TOKEN": "<FIGMA_TOKEN>"
      }
    }
  }
}

起動コマンドnpx -y designfit

設定が必要な環境変数

FIGMA_TOKENシークレットFigma personal access token. Lets designfit_extract fetch frames; without it, pass the /nodes JSON instead.

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npmdesignfit0.2.1stdio

ツール

掲載時のツール一覧 · 2 週間前に更新

パラメーター	型	必須
url	string	はい
design	object	はい
design.root	object	はい
design.root.id	string	はい
design.root.name	string	はい
design.root.frame	object	はい
design.root.frame.h	number	はい
design.root.frame.w	number	はい
design.root.frame.x	number	はい
design.root.frame.y	number	はい
design.root.tokens	object	はい
design.root.tokens.fill	string	いいえ
design.root.tokens.color	any	いいえ
design.root.tokens.opacity	number	いいえ
design.root.tokens.fontSize	number	いいえ
design.root.tokens.fontFamily	string	いいえ
design.root.tokens.fontWeight	number	いいえ
design.root.tokens.lineHeight	number	いいえ
design.root.tokens.borderColor	any	いいえ
design.root.tokens.borderWidth	number	いいえ
design.root.tokens.borderRadius	number	いいえ
design.root.tokens.letterSpacing	number	いいえ
design.root.children	array	はい
design.root.tokenSources	object	いいえ
viewport	object	はい
viewport.width	number	はい
viewport.height	number	はい
tolerances	object	いいえ
tolerances.color	object	いいえ
tolerances.color.deltaE	number	いいえ
tolerances.fontSize	object	いいえ
tolerances.fontSize.px	number	いいえ
tolerances.geometry	object	いいえ
tolerances.geometry.size	number	いいえ
tolerances.geometry.position	number	いいえ
tolerances.lineHeight	object	いいえ
tolerances.lineHeight.px	number	いいえ
tolerances.borderWidth	object	いいえ
tolerances.borderWidth.px	number	いいえ
tolerances.borderRadius	object	いいえ
tolerances.borderRadius.px	number	いいえ
tolerances.letterSpacing	object	いいえ
tolerances.letterSpacing.px	number	いいえ
componentMap	array	はい

詳細

designfit

スクリーンショット差分の試行錯誤なしで、AI が構築したフロントエンドを Figma デザインと照合して検証します。

https://github.com/user-attachments/assets/01df52c9-90eb-4abc-b56c-fe18b31076cd

360 ノードの Figma フレームで実行した例です。designfit_extract がリンクからフレームを読み込み、続いて designfit_validate が3回のビルド反復をスコア化し、pass は87から89、そして100になります。スクリーンショットの差分比較は一切行いません。

designfit は、レンダリングされた実装を Figma デザインと照合し、コーディングエージェントに機械処理可能な修正リストを渡す MCP サーバー兼 Claude Code スキルです。生のピクセルではなく、デザイントークンとジオメトリ（画面ルートに対する要素ボックスの位置）を比較するため、フォントのレンダリングによるノイズでエージェントが迷走することはありません。入力も出力も決定論的です。

ピクセルではなくジオメトリを使う理由

AI が構築した UI と Figma フレームをスクリーンショットの差分で比較すると、試行錯誤が続きます。アンチエイリアスやサブピクセルのずれが「まだ間違っている」と判定されるため、エージェントはいつまでも修正を続けます。designfit は、デザイナーが実際に気づく問題、つまり色やサイズの誤り、位置ずれ、要素の欠落を、許容誤差が明示された決定論的な測定値として比較します。同じ入力なら同じ出力となり、迷走しません。

詳しくはこちらをご覧ください：AI が構築した UI のスクリーンショット差分で試行錯誤が続く理由と、ジオメトリによる解決方法。

インストール

Claude Code — プラグインとして：

/plugin marketplace add as9978/designfit
/plugin install designfit@designfit

続いて、測定エンジンが使用するブラウザーを取得するため、一度だけ次を実行します。

npx playwright install chromium

このプラグインは、designfit_extract と designfit_validate の MCP ツール、および designfit-fidelity-loop スキルをまとめて登録し、Figma の個人用アクセストークンを一度だけ要求します（省略可能です。トークンがない場合、extract には貼り付けた /nodes JSON を使用できます）。

その他の MCP クライアント — 手動でインストール：

npm install -g designfit
npx playwright install chromium

{ "mcpServers": { "designfit": { "command": "designfit", "env": { "FIGMA_TOKEN": "<token>" } } } }

Windows： 一部の MCP クライアントでは、designfit をそのまま起動できません（designfit.cmd に解決されます）。{ "command": "npx", "args": ["-y", "designfit"] } を使用するか、{ "command": "node", "args": ["<absolute-path>/node_modules/designfit/dist/index.js"] } のようにバイナリを直接指定してください。上記のプラグインインストールではすでに npx 形式を使用しているため、影響はありません。

使い方

エージェントに Figma フレームの実装を依頼し、そのフレームのリンクを渡します。designfit-fidelity-loop スキルが、designfit_extract → ビルド → 要素に data-designfit-id を付与 → designfit_validate → 修正、という流れを pass になるまで繰り返し、最後にタグを削除します。

プラグインをインストールしていれば、スキルはすでに登録されています。手動インストールの場合は登録されません。スキルは npm 依存関係から自動ロードされないため、skill/SKILL.md にあるスキルファイルをエージェントのスキルディレクトリにコピーしてください（Claude Code の場合：.claude/skills/designfit-fidelity-loop/SKILL.md）。これにより、スキルが検出されるようになります。

ツールは2つあります。

designfit_extract は、Figma リンク（{ url }）、または { fileKey, nodeId }、または貼り付けた GET /v1/files/:key/nodes の本文（{ nodes }）と、任意の maxDepth を受け取り、{ design, componentMap, viewport } を返します。取得には、MCP サーバーの環境変数に FIGMA_TOKEN が必要です。非表示ノードはスキップされ、ベクターだけで構成されたフレームは1つのリーフになります。
designfit_validate は { url, viewport, design, componentMap, tolerances? } を受け取り、{ pass, score, violations, unmapped } を返します。

実際の Figma フレームを使った詳しい手順（反復の流れ、コピー＆ペーストできるプロンプト、トラブルシューティング）については、docs/validating-a-figma-frame.md をご覧ください。

v1 の対象範囲

ビューポートは1つです。トークン、ジオメトリ、存在確認を行います。レスポンシブ対応の複数ブレークポイントと知覚的な VLM フォールバックはロードマップにあり、v1 には含まれません。

ライセンス

MIT

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。

designfit

designfit について

主な機能

活用シーン

MCP 対応

設定

ツール

詳細

designfit

ピクセルではなくジオメトリを使う理由

インストール

使い方

v1 の対象範囲

ライセンス

コメント

MCP は初めてですか？

MCP（Model Context Protocol）とは？

MCP サーバーとクライアントの違いは？

ローカルとリモート、どちらを選ぶべき？

Claude や Cursor にサーバーを導入するには？

掲載プロジェクトは審査されていますか？「認証済み」とは？

自分のプロジェクトが掲載されています。どう申請できますか？