KMRVID Figma Skills 販売開始（とスキル更新のお知らせ）

毎日暑い日が続きますね…、こもりです。

さて、お待たせしました？かどうかはわかりませんが、好評販売中のオリジナル Claude Code スキル講座である「KMRVID Claude Skills」からFigmaに関係するスキルをいくつか取り出したスピンオフ作品みたいな「KMRVID Figma Skills」を販売開始しました。

※こちらの「KMRVID Figma Skills」は、オリジナルのClaude Codeスキル講座「KMRVID Claude Skills」に含まれています。重複購入にはご注意ください。


なぜこのパッケージが生まれたのか

Figma さんは少し前から「Figma Design Agent」という新しい機能をβ版として提供してくれています（Figma makeみたいにプロンプトでAIエージェントに指示を出して画面などを生成できるもの）。こちらの機能にあまり用事がなかったのですが、たまたま使っていて気付きました。「あれ？、カスタムスキル使えるじゃん」と。

エージェントとのやりとりをしたり生成されてくるものを見てると、「どうもClaudeっぽい」気もしていて、「もしかして手元のClaude Code用のスキルが動くんじゃね？」と思って登録してみたら動いたわけです。もちろん、外部のツールに依存するようなものは動きませんが、幸い手元にはFigmaのデータをClaudeから操作するスキルが揃っています。

もともとFigma MCPを経由して操作していたようなことは、Figma側でやった方が良い気もするし、何よりいくら私が公開しているスキルが便利でいくら作業効率化が図れたとしても、「Claude Codeわかりません」「AIエージェントどれにするか迷ってます」という皆さんには使ってもらえないわけです。そもそもデザイナーさんはFigmaから操作できた方が良いでしょうしね。

だったら、これまで作ってきたスキルの中からFigma Design側でも使えそうなものをピックアップし、「Figma Design Agent 用に最適化されたカスタムスキル」を作ってやろうじゃないか！ってな流れでこのパッケージが誕生したというわけです。


KMRVID Figma Skillsについて

コードエディタもMCPも不要。Figma の Design Agent のカスタムスキル登録機能に貼るだけで、レイヤー整理・トークン化・複数レイアウトパターン生成・コピーライティングまでAIにまかせられます。

 

こちらは、Figma の Design Agent（カスタムスキル登録機能）で使うために最適化したスキル集で、「KMRVID Claude Skills」に含まれる同名スキルの Figma Design 専用版 ですが、次の点が異なります。

  • 入力はキャンバス上の選択ノード — Figma URL の貼り付けは不要（figma-layer-rename / figma-audit / figma-tokenize / rewrite-me が対象。brief-me と create-multi-pattern は選択不要です）
  • Plugin API 直接実行前提 — Figma 側のスクリプト実行ツールだけで完結し、外部の MCP ツールを参照しません
  • 1ファイル自己完結 — 参照ファイルなしで SKILL.md 単体を登録すれば動きます
  • 出力は日本語 — スキルの指示本文は英語ですが、確認テーブル・質問・レポートはすべて日本語で表示されます


定価: 4,400円（税込）
発売記念価格: 3,300円（税込）

※本講座購入後、別途「KMRVID Claude Skills」をご購入いただく際は、本講座の定価を引いた差額分がチェックアウト時に反映されます（＋さらに自動で10%割引対象）
※本講座決済時のアカウントでログインしていることをご確認ください

講座の無料プレビューあります（ほぼ全編公開中）
（アカウント作成、ログイン不要）

 

こんな人におすすめ

  • Figmaで手を動かす時間が多く、コードエディタに切り替えたくない人
  • デザイナー1人〜少人数チームで、レビュー前の下ごしらえを高速化したい人
  • ラフを作る段階でコンテンツにあわせた本文テキストを自動生成したい人
  • Design Agent に単なる色違いのレイアウトを提案されてしょんぼりした人
  • 「とりあえず作ってみる」前に、複数案を並べて比較検討したい人
  • レイヤー命名やトークン化など、地味だが積み重なる作業を自動化したい人


収録スキル

  • figma-layer-rename
    自動生成レイヤー名（Frame 12 など）を検出し、確認のうえセマンティックな名前にリネーム。ContainerやSectionのように自動生成ではないが兄弟間で重複している名前も、オプションで差別化リネームの対象にできる
  • figma-audit
    選択フレームのAI実装しやすさを4観点でスコアリング。改善優先度トップ3も提示。コンパクトなレポートを出力（詳細は追加要求で表示）
  • figma-tokenize
    ハードコードされた色・フォントサイズ・スペーシングを変数（デザイントークン）化
  • brief-me
    デザイン着手前のビジネス要件ヒアリング。create-multi-patternの実行前の詳細な要件定義に。結果のBRIEFはチャットに出力（サンドボックスのファイルは再起動で消えるため）
  • create-multi-pattern（*1）
    複数レイアウトパターンを一括生成・比較。上記BRIEFを渡すことでより精緻な画面を生成可能。複数パターンのミックス、 cognitive-ui-design（*2）と連携したトポロジーモデル割当にも対応
  • rewrite-me
    選択したフレーム/セクション内のテキストノードをBRIEFの要件に合わせて書き直す。文章のボリューム調整、LP限定の行動経済学的説得軸にも対応。レイアウト・色・構造は一切変更しない

Desgin Agentへの登録方法や使い方などは付属のREADME、動画解説をご覧ください。

8月2日更新分の新規追加スキルの情報はこちらに

*1: Claude Code スキル「create-multi-mockup」のFigma版
*2: cognitive-ui-design と japanese-web-guideline スキルは、通常版の「KMRVID Claude Skills」に含まれるスキルでFigma 専用版には含まれません


解説動画（8本: 約50分）

  1. カスタムスキルの登録方法（3:56）
  2. figma-audit（6:45）
  3. figma-layer-rename（6:00）
  4. figma-tokenize（5:55）
  5. brief-me（7:26）
  6. create-multi-pattern（9:50）
  7. rewrite-me（7:56）
  8. カスタムスキルの作り方（2:31）

2026年7月30日現在（動画本数: 8本／約50分）

---

現在、発売記念価格ということで定価4,400円（税込）→3,300円（税込）で提供中ですが、例によって早く買えば買うほどお得なこもりの講座です。今後は本体の「KMRVID Figma Skills」ほどにはなりませんが、スキルの個数が増えるにつれ定価は上がっていくことが予想されます。お早めに


新規スキルの追加と更新

毎日のように既存スキルの更新があって申し訳ありません。

html-to-astro（新規追加）

既存のプレーンHTMLプロジェクト（典型的には setup-html のスキャフォールド）を、新規スキャフォールドした Astro v7 + Tailwind v4 プロジェクトへ移行するスキル。単なる拡張子のリネームではなく、共通のヘッダー/フッター/nav を Layout.astro とコンポーネントへ移行時点で抽出し、画像を <Image /> コンポーネントへ変換し、同一構造のページが複数あればコンテンツコレクション化まで提案します。

インタラクティブなJSは「書き直す（Astroネイティブ化）」「そのまま移植」を選択でき、Alpine.js のようなCDN読み込みの軽量フレームワークが使われている場合は自動検出してそのまま移植側を推奨します。フォントは移行元の設定を優先してスターター側の初期設定を置き換え、Tailwind が CDN 読み込みだった場合はランタイムのみ削除して設定（@theme トークン等）は引き継ぎます。移行元がまだ Tailwind を使っていない場合は、先に css-to-tailwind を実行するよう案内して停止します。

仕上げには astro-doctor の light レベル（コンポーネント抽出は移行時点で済んでいるため）を提案します。初期移行をスムーズに進めるための入り口であり、完全な移行を保証するものではありません — 特殊なJSや CLAUDE.md の実質的な食い違いなど曖昧なケースは手動レビュー対象としてフラグを立てるため、移行後は実際の動作確認をおすすめします。

Figma 専用スキル「rewrite-me」（新規追加）

選択したフレーム/セクション内のテキストノードをBRIEFの要件に合わせて書き直す。文章のボリューム調整、LP限定の行動経済学的説得軸にも対応。レイアウト・色・構造は一切変更しない

astro-doctor（更新）

非推奨の z / astro:schema import チェックを追加


入手・更新方法

kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、html-to-astro と astro-doctor フォルダを ~/.claude/skills/ に上書きコピーしてご利用ください。Figma Agent版の rewrite-me は、「kmrvid-skills-figma」内の rewite-me フォルダの中にある SKILL.md を直接Figmaのカスタムスキルに登録してご利用ください