テック技報最新号へ →
デザイン

Claude Code × Figma MCP で清書した画面は、文脈を持たない読み取り専用の検査役に「実測値」で全数検査させる

作ったAI自身の確認は甘くなる。別のサブエージェントに Figma の Plugin API で読んだ値だけを証拠に、変数・インスタンス・余白の違反を挙げさせ、作った側が裁定して直す。

@seikei_kin · 2026-10-21
#AI×デザイン#Figma#FigmaMCP#ClaudeCode#デザインシステム#レビュー#サブエージェント

筆者の実例では、スクショを見比べて「大丈夫」と判断した後の画面から、変数が当たっていない色の直書きが31件出てきた。パッと見が合っていても、トークンに準拠していないことは目では見えない。

仕組み

  • 作る係:Claude Code(Figma公式MCPの generate_figma_design でHTMLをフレームにし、use_figma で素の矩形をコンポーネントのインスタンスに差し替え、色・書体・余白・角丸を変数にバインドする)。
  • 検査係:作った会話の文脈を渡さない別のサブエージェント。3つのルールを課す。
    1. 直さない:ファイルの作成・変更・削除は禁止で報告だけ。指摘には「対象ノードID・実測値・期待値・修正案」を必ず付け、スクショの印象や推測は書かない。
    2. うのみにしない:指摘は経緯を知る作る側が「直す/退ける」を裁定する。直す前に、同じプロパティを他の正常な箇所でも読んで本当に外れ値か確かめる(例:変数側の透明度がFigma上で二重に見えていただけ、という冤罪があった)。退けた理由は人に報告する。
    3. 2周で終わらなければ人に返す:直したら差分だけ再検査。2周しても残る指摘は判断が要るものなので、リストを人が引き取る。
  • 正解の資料:実装仕様、スタイルガイド、トークン一覧を「期待値」として検査係に渡す。

検査観点の例

A 配置(既存画面との情報設計の整合)/B トークン準拠(色・テキストスタイル・余白・角丸・gap)/C 実装との一致/D 見切れ・重なり・はみ出し。最後に PASS / FAIL。

回してわかったこと

  • 観点に入れていないものは、見えていても違反にならない。余白を観点から外していたら、検査係は padding の値を読んで報告しながら違反には挙げず、カード47枚がすり抜けた。失敗するたびに採点基準のリストに1行足す。
  • 1周あたり8万〜13万トークン(画面1枚規模)。アイデア段階では回さず、実装に渡す直前の清書だけで回す。
  • 観点ごとに検査係を3体に分けて並列にすると、見落とし(省略記号で切れた文字を「収まっている」と通した等)は減ったが、消費は2.2倍、境目に落ちる指摘や正反対の結論も出て、人の裁定が増えた。並列は最後の1周だけにする。
  • 長い指示は毎回書くと漏れるので、手順ごとスキルにして「検査・改善ループで清書して」の一言で回す。

注意点

出典

  • 紹介投稿: @seikei_kin · 2026-10-20
  • 記事: vivi-koh「Claude Code × Figma MCP で作ったデザインを別のAIに検査させる」 qiita.com
  • 収集日: 2026-10-21(JST)
X の元の投稿を開く