Figma Design Agent 専用カスタムスキル集
Figmaを開いたまま、
実装精度を上げていく
「KMRVID Claude Skills」に含まれるスキルを、FigmaのDesign Agent(カスタムスキル登録機能)でそのまま動くように移植した専用パッケージです。URLの貼り付けもチャットの往復も最小限に、新規のページ生成だけでなく、キャンバス上の選択だけでレイヤー整理・トークン化・コンポーネント化まで、ほぼ全自動で完結できます。収録スキルの解説動画付き(8本/2026年8月3日現在)。
16個
収録スキル数
16個
Figma実機動作確認済み(2026/8/7時点)
2026/8/7 更新 — 新スキル「figma-design-md」を追加。既存スキルの調整
2026/8/6 更新 — 新スキル「figma-component-audit」を追加。既存スキルの調整
2026/8/5 更新 — 新スキル「design-brief-me」「create-single-page」「figma-systematize」「figma-enhance」を追加。既存スキルの調整

通常版と何が違うのか
「KMRVID Claude Skills」に含まれる同名スキルのFigma専用版。中身のロジックは同じでも、Figma上で問題なく動くように前提から作り直し最適化しています。
キャンバス上で選択したノードが対象
Figma URL の貼り付けは不要。フレームやセクションを選択してチャットで呼び出すだけで動きます。
Plugin API 直接実行で完結
Figma 側のスクリプト実行ツールだけで完結し、外部のMCPツールを参照しません。
カスタムスキル登録は1ファイルで完結
SKILL.md 単体を登録すれば動作します。Figma のカスタムスキル登録機能にそのまま貼り付け可能。
質問も出力もすべて日本語
スキルの指示本文は英語ですが、確認テーブル・質問・レポートはすべて日本語で表示されます。
ライセンスは全スキル共通でkmrvid.com講座参加者限定の利用規約です(各フォルダのLICENSEを参照)。
`cognitive-ui-design`と`japanese-web-guideline`スキルは、通常版の「KMRVID Claude Skills」に含まれるスキルで、Figma専用版には含まれません。レイアウトの定石崩しや日本語Web実装の補正などのガイドラインは、その内容が重要であるため通常版のみでの提供です。
収録16スキル
Figmaのキャンバス上で選択して呼び出すだけで動く、16個のカスタムスキルです。
figma-layer-rename
自動生成レイヤー名を検出し、確認のうえセマンティックな名前にリネーム。レイヤーの兄弟間で重複している名前も、オプションで差別化リネームの対象に
無料の機能限定版で先に動作を試すfigma-audit
選択フレームのAI実装精度を4観点で採点し、コンパクトなレポートを出力(詳細は追加要求で表示)
figma-component-audit
選択したコンポーネント/コンポーネントセット単体を、バリアント定義・コンポーネントプロパティ・レイヤー命名・Auto-layout・カラー/タイポグラフィトークンの5観点で採点
brief-me
デザイン着手前のビジネス要件ヒアリング。create-multi-pattern の実行前の詳細な要件定義に。結果の BRIEF はチャットに出力
design-brief-me
デザイン着手前の設定ヒアリング。結果のDESIGN_BRIEFを`brief-me`のBRIEFと一緒に貼り付けると、後続スキルの質問がすべて省略され完全無人実行が可能に
rewrite-me
選択したフレーム/セクション内のテキストを要件に合わせて書き直す。文章のボリューム調整、LP限定の行動経済学的説得軸にも対応。レイアウト・色・構造は一切変更しない
create-multi-pattern
複数レイアウトパターンを一括生成・比較。BRIEF を渡すことでより精緻な画面を生成可能。cognitive-ui-design と連携したトポロジーモデル割当にも対応
create-single-page
`create-multi-pattern`の無質問版。全て決定的なルールで自動確定し、単一ページを一発生成。質問を一切出さないため、連続プロンプトに繋げて無人実行できる
japanese-lp-seasoning
フルブリード演出・カルーセル/バナースライダー・縦書きを、静的フレームでの見た目として選択・提案(スクロール連動アニメーションは対象外)、簡易実装処理まで
figma-typescale
ベースサイズと比率を聞き、タイプスケールを生成。命名規則を「オリジナル」と「Tailwind」から選択可能。オリジナルはText Styleも作成、Tailwindは変数のみ
figma-tokenize
変数を使わずに値を直接ハードコードしている色・フォントサイズ・スペーシングを変数(トークン)化してバインド。テキストのスタイル化にも対応
figma-componentize
選択フレーム内の繰り返しパターン(ボタン・カード等)を検出してコンポーネント化を提案。バリアント生成、バリアントの変数化までを対話的に実行
figma-systematize
選択フレームを「レイヤー名整理 → トークン化 → コンポーネント化」の3段パイプラインで一括処理。冒頭で実行モード(自動/各ステップ確認あり)を1回だけ確認
figma-enhance
すでにトークン化・コンポーネント化済みのファイルをページ全体で監査し、さらなる改善点を検出・提案・実装まで自動で実行
figma-contrast-check
選択フレーム内のテキストのWCAGコントラスト比(AA/AAA)を判定し、コンパクトなレポートを出力(詳細表示可)。自動修正にも対応
figma-design-md
DESIGN.mdとFigmaの変数・Text Style・コンポーネントを双方向に同期するスキル。Import/Exportどちらのモードでもプレビューページをオプションで生成
2026/8/7時点で、16スキルすべてFigma上での実機動作を確認済みです。利用環境やツールのバージョンによっては、正常に動作しない場合があります。
3ステップで動かせる
01
SKILL.mdを登録
Figma のカスタムスキル登録機能で、使いたいスキルの SKILL.md を登録します。
02
対象を選択
キャンバス上で対象のフレームまたはセクションを選択します(スキルによって対象が異なります)。
03
チャットから実行
チャットからスキル名を呼び出すだけで実行されます。確認・質問・レポートはすべて日本語で表示されます。
`brief-me` → `create-multi-pattern` または `rewrite-me` の順で実行すると、ヒアリングした BRIEF をそのまま貼り付けて要件として引き継げます。既存のページに対して文章の書き直しを行う場合は、BRIEF を渡して `rewrite-me` 単体でも動作します。
`figma-componentize`はコンポーネント化候補の色が変数にバインドされていない場合、`figma-tokenize`を先に実行するか確認してきます。バリアント生成後にも色の変数化を提案するため、経由しなくても最終的には変数化された状態に持っていけます。
こういう時は
このスキルを使おう
スキルは単体でも呼び出せますが、目的によっては複数のスキルを順番につなげることで、より効果的に問題を解決できます。代表的な組み合わせ例です。
色付きのカードは、通常版「KMRVID Claude Skills」限定スキルとの組み合わせ例です
新しいページを一から作りたい
要件をヒアリングしてBRIEFを作成後、それを引き継いで複数レイアウト案を一括生成。1案でよければ`create-single-page`(無質問・一発生成)に差し替え可能です。
色や数値を変数化、コンポーネント化まで進めたい
ハードコードされた色をまず変数化し、繰り返しパターンをコンポーネント化候補として提案。この2段階を一括で行いたい場合は`figma-systematize`が便利です。
ページ全体を整理して仕上げまで持っていきたい
レイヤー名整理・トークン化・コンポーネント化を3段パイプラインで一括処理したうえで、さらなる改善点をページ全体から検出・提案・実装します。
要件に沿ってコピーを書き直したい
ヒアリングしたBRIEFをそのまま引き継いで、選択したフレーム内のテキストを要件に合わせて書き直します。レイアウトや構造は変更しません。
実装前にAIが読み取りやすい構造か確認したい
レイヤー名整理・トークン化・コンポーネント化を`figma-systematize`で一括処理してから、実装精度を4観点で採点。コンポーネント単体を見たい場合は`figma-component-audit`に差し替えます。
色のアクセシビリティを確認・修正したい
選択フレーム内テキストのWCAGコントラスト比をAA/AAAで判定し、コンパクトなレポートを出力。そのまま自動修正まで依頼することもできます。
人間の特性を考慮したページデザインにしたい
視線誘導パターン(Z型・F型・バナーブラインドネス回避など)や認知バイアスを踏まえたレイアウト設計は、通常版限定の`cognitive-ui-design`が担当。Figma版の`create-multi-pattern`と併用すると、コンパニオンスキルとして裏で呼び出され、生成する複数パターンの質をさらに引き上げられます。
Claude版の詳細を見る日本語の処理を改善したい
禁則処理・斜体回避・見出しの整列など日本語特有の実装ガイドラインは、通常版限定の`japanese-web-guideline`が担当。Figma版の`rewrite-me`と併用することで、整えた文言を実装時にさらに日本語表示へ最適化できます。
Claude版の詳細を見る発売記念価格
KMRVID
Figma Skills
単体パッケージとして、16個のFigma専用スキルを買い切りで利用できます。発売記念価格3,300円(税込)でご案内できるのは2026年8月10日(月)0:00まで。それ以降は定価9,900円(税込)に切り替わります。
残り時間を計算しています…
- Figma専用カスタムスキル16個
- 1ファイル完結・SKILL.md登録のみ
- 確認・質問・レポートはすべて日本語
- 買い切り・視聴期限なし
本パッケージに付属するオリジナルスキルは、利用環境やツールのバージョンによって正常に動作しない場合があります。個別のスキル修正・動作サポート対応は行っておりません。
Figma専用スキルだけでは物足りない方へ
全55スキルの「KMRVID Claude Skills」
セットアップからモックアップ作成、Tailwindの整理、仕上げの品質チェックまで、Web制作の一連のワークフローを自動化する本講座には、今回のFigma専用スキル16個もすべて同梱されています。使い方だけでなく、スキルの作り方まで解説する動画48本付きです。
KMRVID Claude Skills の詳細を見る
9,900円になる前に
3,300円で始める
発売記念価格3,300円(税込)でご案内できるのは2026年8月10日(月)0:00まで。16個のカスタムスキルを、キャンバス上の選択だけで動かせます。それ以降は定価9,900円(税込)に切り替わります。
3,300円で申し込むKMRVID Claude Skills(全55スキル)はこちら