KMRVIDFigma Skills
値上げ前 最終ご案内(〜8月9日 23:59)

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」を追加。既存スキルの調整

MacBookの画面に表示されたワイヤーフレームデザイン

通常版と何が違うのか

「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ステップで動かせる

  1. 01

    SKILL.mdを登録

    Figma のカスタムスキル登録機能で、使いたいスキルの SKILL.md を登録します。

  2. 02

    対象を選択

    キャンバス上で対象のフレームまたはセクションを選択します(スキルによって対象が異なります)。

  3. 03

    チャットから実行

    チャットからスキル名を呼び出すだけで実行されます。確認・質問・レポートはすべて日本語で表示されます。

`brief-me` → `create-multi-pattern` または `rewrite-me` の順で実行すると、ヒアリングした BRIEF をそのまま貼り付けて要件として引き継げます。既存のページに対して文章の書き直しを行う場合は、BRIEF を渡して `rewrite-me` 単体でも動作します。

`figma-componentize`はコンポーネント化候補の色が変数にバインドされていない場合、`figma-tokenize`を先に実行するか確認してきます。バリアント生成後にも色の変数化を提案するため、経由しなくても最終的には変数化された状態に持っていけます。

Combination

こういう時は
このスキルを使おう

スキルは単体でも呼び出せますが、目的によっては複数のスキルを順番につなげることで、より効果的に問題を解決できます。代表的な組み合わせ例です。

色付きのカードは、通常版「KMRVID Claude Skills」限定スキルとの組み合わせ例です

新しいページを一から作りたい

brief-mecreate-multi-pattern

要件をヒアリングしてBRIEFを作成後、それを引き継いで複数レイアウト案を一括生成。1案でよければ`create-single-page`(無質問・一発生成)に差し替え可能です。

色や数値を変数化、コンポーネント化まで進めたい

figma-tokenizefigma-componentize

ハードコードされた色をまず変数化し、繰り返しパターンをコンポーネント化候補として提案。この2段階を一括で行いたい場合は`figma-systematize`が便利です。

ページ全体を整理して仕上げまで持っていきたい

figma-systematizefigma-enhance

レイヤー名整理・トークン化・コンポーネント化を3段パイプラインで一括処理したうえで、さらなる改善点をページ全体から検出・提案・実装します。

要件に沿ってコピーを書き直したい

brief-merewrite-me

ヒアリングしたBRIEFをそのまま引き継いで、選択したフレーム内のテキストを要件に合わせて書き直します。レイアウトや構造は変更しません。

実装前にAIが読み取りやすい構造か確認したい

figma-systematizefigma-audit

レイヤー名整理・トークン化・コンポーネント化を`figma-systematize`で一括処理してから、実装精度を4観点で採点。コンポーネント単体を見たい場合は`figma-component-audit`に差し替えます。

色のアクセシビリティを確認・修正したい

figma-contrast-check

選択フレーム内テキストのWCAGコントラスト比をAA/AAAで判定し、コンパクトなレポートを出力。そのまま自動修正まで依頼することもできます。

人間の特性を考慮したページデザインにしたい

create-multi-patterncognitive-ui-design

視線誘導パターン(Z型・F型・バナーブラインドネス回避など)や認知バイアスを踏まえたレイアウト設計は、通常版限定の`cognitive-ui-design`が担当。Figma版の`create-multi-pattern`と併用すると、コンパニオンスキルとして裏で呼び出され、生成する複数パターンの質をさらに引き上げられます。

Claude版の詳細を見る

日本語の処理を改善したい

rewrite-mejapanese-web-guideline

禁則処理・斜体回避・見出しの整列など日本語特有の実装ガイドラインは、通常版限定の`japanese-web-guideline`が担当。Figma版の`rewrite-me`と併用することで、整えた文言を実装時にさらに日本語表示へ最適化できます。

Claude版の詳細を見る

発売記念価格

KMRVID
Figma Skills

単体パッケージとして、16個のFigma専用スキルを買い切りで利用できます。発売記念価格3,300円(税込)でご案内できるのは2026年8月10日(月)0:00まで。それ以降は定価9,900円(税込)に切り替わります。

残り時間を計算しています…

8月10日以降の定価 9,900円(税込)

3,300

税込・買い切り

3,300円で申し込む
  • 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スキル)はこちら