AgentSkillsCN

figma-to-frontend

掌握利用 Figma MCP 与 Playwright MCP 或 Playwright CLI，将 Figma 设计精准还原为前端代码的技能。当您收到 Figma URL 或节点 ID，并要求在浏览器宽度与设计宽度完全一致的前提下实现像素级完美匹配时，便可运用此技能。具体包括：提取设计令牌、拆分组件并逐一实现、通过截屏与样式计算对比来修正差异。

SKILL.md
--- frontmatter
name: figma-to-frontend
description: Figma MCPとPlaywright MCPまたはPlaywright cliを使ってFigmaデザインをピクセルパーフェクトにフロントエンド実装するための技能。Figma URL/node-idが与えられ、ブラウザ幅がデザイン幅と一致する状態で完全一致が要求される場合に使用する。デザイントークン抽出、コンポーネント分割実装、スクリーンショットと計算スタイル比較による差分修正を行う。

Figma to Frontend

概要

Figma MCPでデザイン情報を取得し、デザイントークン化→コンポーネント分割実装→Playwright MCPまたはPlaywright cliでの差分検証を繰り返して、デザイン幅での1:1一致を達成する。

前提条件

  • •Figma MCPが設定済みであること
  • •Playwright MCPまたはPlaywright cliが設定済みであること
  • •Figmaファイルへのアクセス権があること
  • •使用するフレームワーク/ライブラリがプロジェクトにセットアップ済みであること

MCPが未設定または接続できない場合は、その旨を明示し、設定手順の案内を依頼する。

ワークフロー

  1. •対象ノードの特定
  • •node-id付きのFigma URLを受け取り、ページ全体ではなくフレーム/コンポーネント単位で対象を絞る。
  • •複雑なページはセクションごとにノードを分割する。
  1. •Figma MCPでデザイン取得
  • •get_design_context を使って対象ノードの構造/レイアウト/スタイルを取得する。
  • •取得項目: レイアウト、カラー、タイポグラフィ、スペーシング、ボーダー、シャドウ、サイズ、制約。
  • •画像アセットやアイコンが不足する場合は、Figmaからのエクスポートを依頼する。
  1. •デザイントークン定義
  • •色、タイポ、スペーシング、角丸、シャドウをトークン化する。
  • •値はFigmaの数値をそのまま使い、勝手に丸めない。
  1. •段階的実装
  • •小さなコンポーネントから実装し、最後にページを組み上げる。
  • •Auto LayoutはFlexbox/Gridに変換し、padding と gap を忠実に反映する。
  • •Figmaのレイヤー構造を可能な限りコード構造に反映する。
  1. •Playwright MCPまたはPlaywright cliで検証と修正
  • •ブラウザの幅をFigmaのフレーム幅に合わせ、見た目が完全一致する状態を最優先で達成する。
  • •browser_navigate で対象ページを開き、browser_take_screenshot で全体/要素スクショを取得する。
  • •browser_evaluate で getComputedStyle() を取得し、Figma値と照合する。
  • •差分があれば修正し、再スクショで差分が消えるまで繰り返す。

検証の優先順位

  • •レイアウトと配置
  • •サイズ
  • •スペーシング
  • •タイポグラフィ
  • •色
  • •装飾（border, radius, shadow）
  • •状態（hover, focus, active）

完了条件

  • •デザイン幅でスクリーンショット比較の差分が視認できないこと
  • •主要要素の getComputedStyle() がFigma値と一致していること
  • •フォントと画像アセットが正しく反映されていること