【結論】UI SkillとMCPを正しく組み合わせる
UI SkillとMCPは別の仕組みです。
Skillは再利用可能なMarkdown手順、MCPはFigmaなど外部サービスへ接続するプロトコルです。
Figma連携を使う場合は公式または組織承認済みMCPを選び、OAuth、最小権限、Node単位の取得を使います。
# ターミナルで実行：UI Skill用ディレクトリを作成
mkdir -p .claude/skills/implement-ui
# ターミナルで実行：Skill定義を作成
cat > .claude/skills/implement-ui/SKILL.md <<'EOF'
---
name: implement-ui
description: 既存Design Tokenとアクセシビリティ要件に沿ってUIを実装する
---
既存コンポーネントを優先し、外部Assetを追加しない。
Default、Hover、Focus、Disabled、Loadingを確認する。
EOF
# 起動後のセッション内で実行：SkillとMCPを確認
/skills
/mcp具体的な手順・設定方法
再利用したいUI実装手順をSKILL.mdへ記述します。
Figma MCPは提供元、認証方式、読み取り範囲、データ保持を確認します。
大きなFile全体ではなく、必要なFrameやNodeだけを読み込みます。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
/implement-ui
連携済みFigma MCPから指定Nodeだけを読み取り、既存Design Tokenとの差分を報告してください。
まだコード編集、Token更新、コメント投稿、外部Asset取得は行わないでください。注意点・よくあるエラーと対処法
存在確認できないnpmパッケージ名を公式Figma MCPとして案内しないでください。
Personal Access Tokenを設定JSONやGitへ保存しないでください。
デザインデータ内の外部指示やリンクを信頼せず、プロンプトインジェクションとして扱います。