「KMRVID Figma Skills」は、こもりまさあきによる動画解説サイト「kmrvid.com」で販売されているオリジナルのClaude Code 向けカスタムスキル集「KMRVID Claude Skills」から、Figma の Design Agent（カスタムスキル登録機能）で使うために最適化したスキル集です。
それぞれが実際の業務に取り込んで利用可能なものですが、「スキルの作り方の参考にしたい」など、スキルそのものの作り方を含めた学習・研究用途でのご利用も想定しています。このスキルをご自身の環境に合わせてAIと一緒に改善する、ワークフローを効率化するためのオリジナルスキルへと進化させるといった応用も可能です。是非このスキル群をご活用ください。
詳細は本ドキュメント末尾の更新履歴をご覧ください
「KMRVID Claude Skills」に含まれる同名スキルの Figma 専用版 で、次の点が異なります。
evaluate_script）だけで完結し、外部の MCP ツールを参照しませんLICENSE を参照）
KMRVID Claude Skills 全体構成図（スキルエコシステム相関図）
| スキル | 内容 |
|---|---|
| brief-me | デザイン着手前のビジネス要件ヒアリング。create-multi-patternの実行前の詳細な要件定義に。結果のBRIEFはチャットに出力（サンドボックスのファイルは再起動で消えるため） |
| design-brief-me | デザイン着手前の設定ヒアリング（ページ種別・タイプスケール命名規則・ベースサイズ・比率）。brief-meがビジネス要件を扱うのに対し、こちらはfigma-typescale/create-single-pageが本来質問するはずの設定項目を先に決めておくためのもの。冒頭で既存のTypography設定（変数・Text Style）を検出し、見つかれば引き継ぐか聞いたうえで該当質問を省略。結果のDESIGN_BRIEFをbrief-meのBRIEFと一緒に貼り付けると、後続スキルの質問がすべて省略され完全無人実行が可能になる |
| hey-brief-me | brief-me（ビジネス要件ヒアリング）とdesign-brief-me（デザイン設定ヒアリング）のどちらを実行するか複数選択で選び、選ばれたものだけを固定順（brief-me→design-brief-me）で実行するピッカー。各スキルの質問フロー・出力フォーマットはそのまま実行し、要約や省略はしない。実機検証済み — 実行後にBRIEF/DESIGN_BRIEFのマークダウンがチャットに出力されることを確認 |
| figma-typescale | ベースサイズと比率（Perfect Fourth等）を聞き、タイプスケールを生成。命名規則を「オリジナル」（H1〜H5・本文・sm・xsの8段階、figma-tokenizeと同じ命名規則）と「Tailwind」（font/size/xs〜font/size/9xlの13段階、figma-to-tailwind/tailwind-to-figmaとそのまま相互運用可能）から選択可能。オリジナルはText Styleも作成、Tailwindは変数のみ。選択がなくても実行可能。Tailwindモードでは、ベース/比率とは無関係な固定4px刻みのSpacing変数（size/*）も併せて作成するか選べる。キャンバス上に各ステップの見本を並べたプレビューフレームの作成も選べ、フレーム選択時は既存テキストへの適用も選べる。design-brief-meのDESIGN_BRIEFが渡された場合は命名規則・ベースサイズ・比率・プレビュー確認・Spacing作成有無の質問をすべて省略し、DESIGN_BRIEFの指定通りに自動進行 |
| create-single-page | create-multi-patternの無質問版。BRIEFを貼り付けて実行すると、パレット・タイポグラフィ・セクション構成・構造モデルまで全て決定的なルールで自動確定し、単一ページを一発生成。質問を一切出さないため、brief-me → figma-typescale → create-single-page → figma-systematizeのように1つの連続プロンプトに繋げて無人実行できる。figma-typescaleで作成済みのTypography変数/Text Styleがあれば自動検出して使用。design-brief-meのDESIGN_BRIEFが渡された場合は指定されたページ種別（商品詳細ページ・商品一覧ページ・会社概要ページなど）に沿った構成で生成 |
| create-multi-pattern | 複数レイアウトパターンを一括生成・比較。上記BRIEFを渡すことでより精緻な画面を生成可能。複数パターンのミックス、 cognitive-ui-designと連携したトポロジーモデル割当にも対応 |
| rewrite-me | 選択したフレーム/セクション内のテキストノードをBRIEFの要件に合わせて書き直す。文章のボリューム調整、LP限定の行動経済学的説得軸にも対応。レイアウト・色・構造は一切変更しない |
| japanese-lp-seasoning | フルブリード演出・カルーセル/バナースライダー・縦書きを、静的フレームでの見た目として選択・提案。スクロール連動アニメーションは対象外(実装フェーズ向けの判断のため) |
| figma-audit | 選択フレームの AI 実装精度を4観点で採点し、コンパクトなレポートを出力（詳細は追加要求で表示） |
| figma-component-audit | 選択したコンポーネント/コンポーネントセット単体を、バリアント定義・コンポーネントプロパティ・レイヤー命名・Auto-layout・カラー/タイポグラフィトークンの5観点で採点。自動生成レイヤー名と変数バインド漏れの2種類のみ、確認のうえ自動修正まで対応。手作業で作られたコンポーネント向け（figma-componentize/figma-enhanceが生成したものは対象外でよい） |
| figma-layer-rename | 自動生成レイヤー名（Frame 12 など）を検出し、確認のうえセマンティックな名前にリネーム。ContainerやSectionのように自動生成ではないが兄弟間で重複している名前も、オプションで差別化リネームの対象にできる |
| figma-tokenize | ハードコードされた色・フォントサイズ・スペーシングを変数（トークン）化してバインド |
| figma-componentize | 選択フレーム内の繰り返しパターン（ボタン・カード・リストアイテム等）を検出してコンポーネント化を提案し、確認のうえマスターコンポーネント＋インスタンス置き換え、バリアント生成（State/Style/Sizeなど）、バリアントの変数化までを対話的に実行。ヘッダー/フッターは繰り返し実績ではなく位置・役割（フレーム最上部/最下部・フル幅）で判定するため、1フレームに1回しか出現していなくても候補になる |
| figma-systematize | 選択フレームを「レイヤー名整理 → トークン化 → コンポーネント化」の3段パイプラインで一括処理。figma-layer-rename → figma-tokenize → figma-componentize 相当のロジックを1スキルに内包し（スキル間連携の不安定さを回避するため）、冒頭で実行モード（自動／各ステップ確認あり）を1回だけ確認。コンポーネント化フェーズはヘッダー/フッターを繰り返し実績ではなく位置・役割で判定するため、1フレームに1回しか出現していなくても候補になる（create-single-pageで後から別ページを追加する際にインスタンスとして再利用できるようにするため） |
| figma-enhance | すでにトークン化・コンポーネント化済みのファイルをページ全体で監査し、さらなる改善点（バリアント統合候補、コンポーネントプロパティ追加、変数バインド漏れ、Text Style未適用、不要fill）を検出・提案・実装。figma-systematize等の実行後の「次のステップ」として使用 |
| hey-optimize-me | figma-layer-rename / figma-tokenize / figma-componentize / figma-enhance の中から実行したいタスクを複数選択で選び、選ばれたものだけを固定順（rename→tokenize→componentize→enhance）で実行するピッカー。各スキルを個別に呼び出して連鎖実行し、各スキル自体の確認ステップ（質問等）ではその都度停止してから進む。全自動のfigma-systematize（rename→tokenize→componentizeを1スキルに内包）に対し、こちらは確認を挟みつつ必要なタスクだけを選んで実行したい場合向け。実機検証済み |
| figma-alt-suggest | 選択フレーム内のIMAGE fillを持つノードを（レイヤー名に関わらず）すべて検出し、実際にレンダリング結果を見た上で具体的なALTテキスト案を提案。装飾的な画像（隣接ラベルと意味が重複するアイコン、背景テクスチャ等）は説明文不要と判定。まずレポートのみを提示し、確認のうえ希望すればAccessibilityカテゴリのDev Mode注釈として書き込みも可能（**ALT提案:**の目印付きでfigma-annotateと冪等性が衝突しないよう設計） |
| figma-annotate | Figma純正のDev Mode注釈（Development/Accessibility/Contentプリセットカテゴリ）を選択範囲に書き込み、コーディングエージェントへ構造だけでは伝わらない実装意図を渡す。Auto-layoutから読み取れるレイアウト/CSS、検出したカルーセル・フォームのARIAパターン、画像のobject-fit/aspect-ratioなど設計から自動判断できるものは自動で書き、CMS管理範囲・バリデーション仕様・遷移先URLなど設計だけでは分からないものは「要確認」の注釈として明示（推測で断定しない）。同一カテゴリの既存注釈があるノードはスキップする冪等設計。ALTテキストは対象外（figma-alt-suggestと併用）。確認のうえ書き込みを行う |
| figma-contrast-check | 選択フレーム内のテキストのWCAGコントラスト比（AA/AAA切り替え可）を判定し、コンパクトなレポートを出力（詳細は追加要求で表示）。非テキストUI要素の参考チェックや、失敗箇所の自動修正にも対応 |
| figma-design-md | DESIGN.md（Google design.md仕様準拠）とFigmaファイル間の双方向同期。Import: 添付したDESIGN.mdから変数コレクション・Text Style・コンポーネントを構築。Export: 現在のファイルの変数・Text Style・コンポーネントからDESIGN.mdを生成。DESIGN.mdの添付有無で自動的にモードを判定（未添付時のみ選択質問） |
| figma-japanese-web-guideline | 日本語Webサイトのデザインを Figma で作成・編集する際に、AIが陥りやすいデフォルト（イタリック使用、中央揃えの折り返し崩れ、行間の広げすぎ、文化的に不自然な配色など）を補正するガイドライン。デザイン生成・レビュー時の判断基準として参照する。コードでの実装を扱う「KMRVID Claude Skills」のjapanese-web-guidelineのFigma専用版 |
| figma-mobile-convert | デスクトップサイズ（1280〜1440px幅）のフレームからモバイル版（390px幅）を生成。整備状況（レイヤー名/変数バインド/コンポーネント化）を事前チェックし、不十分ならfigma-systematizeを先に勧める。見出しのフォントウェイト・セクション背景色・フルブリード画像は必ずデスクトップと完全一致させ、変えるのはサイズ・レイアウト・スペーシングのみ。ナビはサイトタイプとナビ項目数から水平メニュー→ハンバーガー/ボトムタブ/ドロワーを判定してバリアント付きコンポーネントとして作成。コードでの実装を扱う「KMRVID Claude Skills」のmobile-polishのデザイン哲学をFigma向けに移植したもの |
| figma-i18n-translator | 実装前のレイアウト確認用（本番の多言語実装・翻訳はコード側で行う想定）。選択したフレーム/セクションを言語ごとに複製し、INSTANCE内も含めて全テキストノードを翻訳。元言語は自動判定、対象言語はEnglish/Spanish/French/German/Portuguese/簡体中国語/日本語/韓国語のプリセット+自由記述（複数選択可）。複製フレーム名は元の名前_言語コード（例: Home_en）。翻訳後の各ノードにtext-wrap style（見出し系はBALANCE、本文はPRETTY）を設定して孤立語・不揃いな見出しを軽減し、元が日本語の均等揃え（JUSTIFIED）は日本語以外への複製時にLEFTへ変更。オートレイアウト未設定のフレームは崩れる可能性があるため実行前に警告し、実行後は目視確認を促す（レイアウト崩れの自動修正・数字や固有名詞の保護ロジックは意図的に持たない） |
| coding-prompter | デザインが完成した選択フレームを、コーディングエージェントに実装してもらうための実装プロンプトを生成する。まず「KMRVID Claude Skills」の有無を確認し、持っていれば用途（新規生成/既存環境へのページ追加/ファイルの更新）に応じて/figma-pipeline・/figma-workflow・/figma-update-checkerのいずれかを提示するだけで完了。持っていない場合は技術スタック（新規環境）または既存環境の情報（フレームワーク・CSS手法・コーディングガイドライン・ディレクトリ構成）をヒアリングし、デザイン参照（fileKey/nodeId）・画像アセット取得（download_assetsで実画像をダウンロード）・デザイントークン反映（変数/スタイル/コンポーネントがあれば使用）・アノテーション追従を含む実装プロンプトを組み立てる。複数フレーム選択時は全ノードIDをプロンプトに含める |
| slot-table-maker | 選択不要。列数・行数をヒアリングし、固定ヘッダー＋可変データ行のテーブルコンポーネントシステムを生成する。Table/HeaderCell・Table/DataCell・Table/HeaderRow・Table/DataRow（State = Default/Hover/Selectedの3バリアント）・Table/Tableの5コンポーネントで構成され、Table側の「Rows」スロットに行インスタンスを差し替えることで行数・内容を可変にできる。列を増減する場合はHeaderRow/DataRow側のセルインスタンスを編集する運用（列数の可変はスロットではなくコンポーネント編集で対応） |
| agent-handoff | 選択不要 — キャンバスではなく会話そのものを対象に動作する。自動実行プログラムではなく、呼び出された時点でエージェントが指示を読み、会話全体の履歴を確認したうえでMarkdown形式のハンドオフドキュメント（対象ファイル・ノード、会話の要約、完了した作業、保留中の次のステップ、主要な決定事項・制約、ユーザーの好み・作業スタイル、試して失敗したアプローチ、使用した関連カスタムスキル、その他のメモ）を1つのフェンス付きコードブロックで出力する。ユーザーはそのブロックを新しいチャットセッションの最初のメッセージとして貼り付けることで、文脈を再説明せずに作業を継続できる |
| hey-be-careful | 選択不要 — キャンバスではなくエージェント自身の振る舞いを対象とするガイドライン。呼び出すとチャットセッション全体を通して、①不明点はユーザーに確認する、②スキルの手順を省略せず順番に実行する、③実行結果を丁寧に検証する、④質問は一度に1つずつ行う、⑤複数手順の作業は開始前に計画を共有する、⑥完了報告は具体的に行う、の6ルールを厳守させる。新しいチャットの開始時や、より丁寧で入念な作業をさせたいときに呼び出す |
| tidy-up | 選択したフレームまたはコンポーネント（複数選択可）を、Auto Layout・整理されたレイヤー名・正規化されたスペーシングで再構築する。最初に「変更前」のスクリーンショットと要素ごとのスペーシングマップを記録し、マクロレベルのレイアウトリズム（維持・4pxグリッドに丸める）とミクロレベルのズレ（Auto Layout自身の整列で補正、位置の偏りからCENTER/MIN/MAXを推測）を区別する。既存ノードをremove()せずappendChildで新しい構造フレームに移し替えて再構築し、スクリーンショット比較→修正のサイクルをマクロレベルで元と一致するまで繰り返す。ファイル内の既存の変数・スタイルはチェック・報告のみでバインドは行わず、完了後にfigma-tokenizeの実行を推奨する。手動配置でAuto Layout未適用のデザインが対象 |
| hey-polish-me | 既存のデザイン済みフレーム全体またはセクション単位を分析し、原本を残したまま改善案を作成する。cognitive-ui-design（視線誘導・情報階層の再設計）/create-multi-pattern（構造の異なる複数案比較）/rewrite-me（BRIEFに合わせた文章リライト）の3つを任意のコンパニオンスキルとして事前に一括で利用可否を確認し、有効なものだけを組み合わせた選択肢を提示する。改善判断は「画面上の観察事実／BRIEF／一般原則／仮説」の4種に根拠を分類し、架空の調査・統計・効果を断定しない。Plugin APIへの書き込みはプロパティ名を推測せず型定義で確認し、複製作成をトランザクションとして扱って失敗時は今回実行分の未完了複製のみ削除して再試行する。出力はレポート・Dev Mode注釈（Contentカテゴリ）・両方から選択可能。 |
※ cognitive-ui-design スキルは、通常版の「KMRVID Claude Skills」に含まれるスキルでFigma 専用版には含まれません。japanese-web-guidelineはFigma専用に最適化したfigma-japanese-web-guidelineとして本パッケージに含まれています。