mcpField
F
figma-annotation-guide

figma-annotation-guide

github.com/mohitagw15856デザイン・UI1.5k48 回インストール5 日前に更新
リポジトリ

figma-annotation-guide について

figma-annotation-guide は、Figma の画面やコンポーネントから開発者向けの引き継ぎ仕様を作成するスキルです。操作状態、レイアウト、アクセシビリティ、例外ケースを扱い、notugly コマンドで色のコントラストを計算します。

主な機能

  1. 01画面やコンポーネントの概要整理
  2. 02操作と各状態の記述
  3. 03レイアウトとコンテンツ規則の指定
  4. 04アクセシビリティ要件の注記
  5. 05色のコントラスト計算と記録

活用シーン

  1. 01Figma 画面の開発引き継ぎ資料を作成
  2. 02操作のエラー状態や空状態を記述
  3. 03画面の色コントラストを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mohitagw15856/pm-claude-skills --skill figma-annotation-guide

インストール後、Claude Code で/figma-annotation-guideを入力して読み込まれたか確認します。

詳細

Figma 注釈ガイドスキル

Figma の画面やコンポーネントについて、ビジュアルデザインを実装可能な仕様にするための開発者向け引き継ぎ注釈一式を作成します。

必須入力

  • 画面またはコンポーネントの説明（デザインした内容を説明または要約してください）
  • プラットフォーム（iOS / Android / Web / React Native）
  • インタラクションの種類（静的 / インタラクティブ / アニメーション / フォーム）
  • 開発者の対象分野（モバイル / フロントエンド / フルスタック）

プログラムによるヘルパー

コントラスト比は目視では判断できません。AA の基準は 4.5:1 です。白地での #777777 は 4.478（不合格）、#767676 は 4.54（合格）であり、スクリーンショットをどれだけ見ても違いは判別できません。計算しましょう。

npx --yes notugly fix "#8ab4f8" "#ffffff"     # ratio, APCA, and the nearest passing colour
npx --yes notugly onepager <url> --out review.html   # every pairing, printable
npx --yes notugly vision                      # which colours merge for colour-blind viewers

notugly fix は、コントラスト比、APCA の明度コントラスト、選択済みの色に最も近い合格色（色相と彩度は同じ）を返します。推測するのではなく、その数値を以下の表に記入してください。

決定論的に動作し、依存関係はゼロで、モデル呼び出しもありません。そのため実行コストはかからず、毎回同じ結果が得られます。

コントラストの注釈には、計算した比率と判定対象を記載してください。例：「4.52:1 — 本文テキストの AA 基準に合格」。「コントラストを確認する」という注釈はタスクであり、注釈ではありません。

出力構成

1. 画面／コンポーネントの概要

名前、目的、開始ポイント、終了ポイント。

2. インタラクションの注釈

［要素名］

  • デフォルト状態：[視覚的な説明]
  • タップ／クリック時：[具体的なアクション — API 呼び出し、状態変更、ナビゲーション]
  • 読み込み状態：[説明]
  • 成功状態：[完了後の動作]
  • エラー状態：[エラーの見え方とユーザーが選べる操作]
  • 無効化条件：[無効になる条件と理由]
3. 状態一覧
要素必要な状態
［要素］デフォルト、ホバー、アクティブ、無効、読み込み中、エラー、空

デザインがない状態には印を付けます：「警告：エラー状態のデザインがありません — 実装前に必要です」

4. 間隔とレイアウトの注記

固定要素と可変要素、スクロールの動作、ブレークポイント、セーフエリア。

5. コンテンツと文言のルール

文字数制限、動的コンテンツと静的コンテンツ、切り捨てのルール、空の状態。

6. アクセシビリティの注釈

タッチターゲット、スクリーンリーダー用ラベル、フォーカス順序、色のコントラスト、モーション設定。

7. エッジケースと開発者への質問
  • [開発者に確認を促す未解決の質問]

品質チェック

  • すべてのインタラクティブ要素で、あらゆる状態が定義されている
  • 状態一覧でデザインのない状態が示されている
  • アクセシビリティでタッチターゲットとスクリーンリーダー用ラベルを扱っている
  • 空の状態が指定されている
  • エッジケースが、対応可能な質問として列挙されている

アンチパターン

  • うまくいく場合だけ注釈を付けないでください。エラー状態、読み込み状態、空の状態をすべて記録する必要があります
  • 「少し余白を取る」のような曖昧な間隔の説明は避けてください。正確なピクセル値またはトークン名を指定してください
  • アクセシビリティの注釈を省略しないでください。フォーカス順序、ARIA ラベル、色のコントラスト比を必ず含めてください
  • インタラクションの動作を説明せずに済ませないでください。すべてのインタラクティブ要素について、応答を記載する必要があります
  • エッジケースなしで注釈を作成しないでください。境界条件で何が起きるかを開発者に伝える必要があります

トリガーフレーズの例

  • 「この Figma 画面の開発者向け注釈を書いて」
  • 「［画面／コンポーネント］の開発者向け引き継ぎメモを作成して」
  • 「このデザインをエンジニアリングチーム向けに文書化して」
  • 「［機能］の Figma 仕様を書いて」
  • 「このデザインを引き継ぐ前に、何を注釈として記載すればよいですか？」

コメント

Markdown 対応