珍しく夜の時間のお知らせです。こんばんは、こもりです。
これまでFigmaのキャンバスの編集(MCPを使ったノードの編集)操作については、「さすがに視覚的に変化を見ながらやった方が安全だよな…」という考えからClaude版のスキルは用意せず、Figmaのエージェント専用のスキルのみを開発・公開していました。
しかし、コーディングに入る段階でエンジニアさんの手元に届いたファイルが必ずしも綺麗なデータ構造になってるとも限りませんし、デザイナーさんとエンジニアさんの関係が必ずしも良好というか、「ちょっと修正してよ」なんて言える間柄じゃないことも想像できます(外注さんとかね)。
そんなわけで、エンジニアサイドからでも「Figmaのデータを視覚的にまったく変えず、データ構造だけを最適化できたらやっぱり便利だよね…(コーディングエージェントに放り投げるとしても)」と思いまして、Figma版だけで用意していた最適化系のスキルを全部Claude版に移植しました(パチパチパチ)。
For English readers:
Update Info. in short.
https://x.com/cipher/status/2100490551699087771

というわけで、新規追加したスキルとそれに付随して更新されたスキルの概要は以下です。詳細はページ中段をご覧ください。
- 新スキル「figma-tidy-up」「figma-componentize」「figma-enhance」「figma-optimize」を追加しました。デザイナーから渡された未整理のFigmaフレームを、整理→トークン化→コンポーネント化→仕上げ監査まで、Claude Code側から一気通貫で進められるようになります。
- 既存スキル「figma-tokenize」「figma-layer-rename」を更新し、実行前のバックアップ推奨などを追加しました。
公開中のREADME.mdにも詳しいことは書いてあります(依存関係とか)。
以下、アップデートの詳細です。
新規スキル
figma-tidy-up(Claude版)
Figmaの FRAME または SECTION のURLを受け取り、オートレイアウトが一切当たっていない(絶対配置のままの)フレームなどを、意味のあるレイヤー名・4pxグリッドに正規化したスペーシング・適切なネスト構造を持つオートレイアウト階層に再構築するスキルです。見た目(配色・フォント・画像内容)は一切変えず、スクリーンショットを取得してから1セクションずつ「検査→再構築→前後比較検証」を繰り返します。ボタンのような小さな要素でも適当に作ったものを清書する目的でも使えます。
Figma版の「tidy-up」スキル(Figmaのエージェント環境で動作するもの)と同じロジックを、Claude Code の Figma MCP(use_figma)経由で再現したものです。デザイナーとエンジニアの連携がスムーズでない現場でも、エンジニア側の手元でフレームを整理できるようにする目的で作りました。
このスキルはFigmaファイルへの書き込みを行うため、対象ファイルの編集権限が必要です。 実行前に権限をご確認ください。
figma-componentize(Claude版)
Figmaの FRAME または SECTION のURLを受け取り、ボタン・カード・リストアイテムなど繰り返し出現する要素やUIパターンを検出し、ユーザーの確認を挟みながらコンポーネント化+バリアントセット生成まで行うスキルです。ヘッダー/フッターのようなページ共通のパーツは、出現回数に関わらず(位置と役割で)候補にします。色がまだ変数バインドされていない場合は、先に「figma-tokenize」の実行を提案します。
最も完成度の高いインスタンスをマスターとして選び、Figma標準のPlugin API(すべてファイル内で完結し、Team Libraryへの公開など特別な権限は不要です)でコンポーネント化・置換・検証を行い、Size / State / Styleなど適切なバリアント軸を提案してから統合します。
figma-enhance(Claude版)
すでに「figma-tokenize」「figma-componentize」で整理済みのファイルを、さらに改善できる点がないか監査するスキルです。似た名前のコンポーネントをバリアントとして統合できないか、コンポーネントに編集用のプロパティ(テキストなど)が設定されているか、色やフォントサイズが変数バインドされずに残っていないか、といった観点でチェックし、優先度付きのレポートを提示したうえで、承認いただいた内容のみを実装します。
「figma-tidy-up」→「figma-tokenize」→「figma-componentize」で整えた後の「仕上げ」の一手として使ってください。
figma-optimize(Claude版)
「figma-tidy-up」「figma-layer-rename」「figma-tokenize」「figma-componentize」「figma-enhance」の5つのタスクのうち、実行したいものを選択式で選ぶだけで、依存関係を守った正しい順序(整理→レイヤー名クリーンアップ→トークン化→コンポーネント化→仕上げ監査)で自動的に実行してくれるオーケストレータースキルです。
スキルを1つずつ呼び出してセットアップの質問に毎回答え直す手間がなくなり、実行前のバックアップ確認も最初に1回だけで済みます。「このフレームをまとめて最適化して」のように話しかけてください。
更新スキル
figma-tokenize / figma-layer-rename(Claude版)
実行前にファイルの複製やバージョン履歴へのアクセスを確認する「バックアップ推奨」の案内を追加しました。Claude Code経由でのスキルの実行は、Figmaのキャンバスをリアルタイムで見ながら進めるわけではないため、万一のミスに気づきにくいという特性を踏まえた対応です( figma-optimize から連続実行する場合は、この確認は1回に集約されます)。
あわせて、「figma-tokenize」「figma-componentize」では、別ファイルからコピー&ペーストして作られたファイルなどで発生する「ライブラリ由来(リモート)の変数やText Styleが検出できない」問題への対策を追加しています。
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、新規追加された figma-tidy-up figma-componentize figma-enhance figma-optimize フォルダと、更新された figma-tokenize figma-layer-rename フォルダを ~/.claude/skills/ にコピー(上書き)してください。
KMRVID Figma Skills 単体パッケージをお持ちの方は、本スキル群はClaude Code専用のため対象外です。
価格改定のお知らせ(確定)
たびたびの価格改定で申し訳ないのですが、Figma版スキル「KMRVID Figma Skills」リリース当初6個だったスキルは昨日の更新で30個、本日の更新でClaude版スキル「KMRVID Claude Skills」は46個になりました。次回の価格改定のタイミングでClaude版単体パッケージを用意する予定です。
そこで来週2026年9月21日(月)以降は、定価を9,900円(税込)から15,400円(税込)に改定させていただきます。新しく用意するClaude版単体版は定価19,800円(税込)、Claude版とFigma版が同梱されている「KMRVID Skills - All-in-One-Bundle」については、定価29,800円(税込)となります。
一気に5,000円以上の値上げになりますので、まだお手元にない方はどうぞお早めに…。