新作スキルの追加や既存スキルのアップデートが続きます。こもりです。
今回は先日発売を開始した「KMRVID Figma Skills」に早速2つのスキルを新規追加しました。ひとつめは Claude Code 版の「japasene-lp-seasoning」の Figma Agent 用に最適化、もうひとつはFigma Agent版のみのスキル「figma-componentize」です。詳細は下記にまかせるとして、 figma-componetize は直接画面を見ながらでないと使えそうにないのでFigma Agent 版のみの対応になっております。これでスキル総数は47個となりました。
また、更新スキルもあります。ひとつめは「figma-tokenize（Claude版／Figma版）」、もうひとつは「figma-tailwind」になります。 figma-tokenize は新たにフレーム内のテキストに設定された値を抽出してローカルスタイルとして登録するようにしました。こちらも詳細は下記に任せるとして、Figmaのデータの整理に加えて、よりコーディング精度を上げるための改善になります。それに伴い figma-to-tailwind も道連れ的に機能改善されました。
双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
新規スキル：
japanese-lp-seasoning（KMRVID Figma Skills）
Claude Code 版の同名スキルの Figma Agent 版となります。
日本の商業LP・企業サイトでよく使われる機能的あしらい（フルブリード演出、カルーセル、バナースライダー、縦書き表現）を、密度感・温度感の確認を挟んだうえで選択・提案するスキルです。
cognitive-ui-design がページ構造（視線誘導パターン）を扱うのに対して、こちらは構造とは別軸の装飾的・機能的な演出レイヤーを担当します。 create-multi-pattern で構造を固めたあと、仕上げの演出を検討する段階で使うイメージです。
Figma版はキャンバス上の静的フレームが対象のため、スクロール連動アニメーションは提案対象に含めていません（実装フェーズでの判断が必要なため）。
figma-componentize（KMRVID Figma Skills）
こちらは Figma Agent 専用のスキルです。キャンバス上での目視確認が必要であろうという判断から Claude Code 版は用意しておりません。
選択したフレーム内の繰り返しパターン（ボタン・カード・リストアイテムなど）を検出し、対話しながらコンポーネント化するスキルです。
- 候補の検出 → スクリーンショット付きで提示・選択
- 選択した候補ごとに、最も完成度が高いインスタンスをマスターコンポーネント化し、他の同一パターンをインスタンスに置き換え
- コンポーネントの種類に応じたバリアント（ボタンならState/Style/Size、カードならOrientation等）を提案・生成
- バリアント生成後、使われている色の変数化も提案
コンポーネント化候補の色が変数にバインドされていない場合は、先に figma-tokenize で変数化するかどうかを確認してくるので、既にお使いの方は連携して使えます。
Figmaのエージェントに直接作ってもらった、Figma専用スキルです（kmrvid-skills本体側には対応するスキルはありません）。
更新スキル：
figma-tokenize
FigmaのFRAME/SECTIONをトークン化するスキルに、テキストスタイル生成パスを追加しました。これまでは色（Color変数）・フォントサイズ（Typography変数）・スペーシングだけをトークン化していましたが、今回からは fontFamily + fontStyle + fontSize + lineHeight + letterSpacing のユニークな組み合わせを検出し、Heading/H2 のようなセマンティックな名前を提案したうえでFigmaのローカルText Styleとして作成・適用するところまで行います。
コーディング側のAIエージェントにとって、色やサイズがバラバラの数値ではなく「同じ名前のスタイル」としてまとまっているとTailwindのユーティリティクラスやCSS変数に1対1でマッピングしやすくなる、というのが狙いです。
このスキルは配布形態が2種類あるため、両方に反映しています。
-
Figma版（Figmaのエージェント環境内で動く
figma-tokenize）: すでにテキストスタイル生成パスを実装・実機確認済み -
Claude版（Claude Code + Figma MCPで動く
figma-tokenize）: 同じ機能をこちらにも移植。実機テストで見つかった「フォントサイズが1px違うだけの2つのスタイル（例: 13pxと14px）を誤って混同してしまう」バグを先に踏んで修正済みなので、Claude版はその修正を最初から含んだ状態でお届けします
figma-to-tailwind
FigmaのVariablesをTailwind CSS v4の@themeトークンに変換するスキルに、ローカルText Styleの読み込みステップを追加しました。
FigmaのVariables APIはCOLOR/FLOAT/STRING/BOOLEANのような単一値の型しか持てないため、フォントウェイト・行間・字間のような複合的なタイポグラフィプロパティは1つの変数にまとめられません。そのため、フォントサイズだけをFLOAT変数として定義し、ウェイト/行間/字間は別立ての「Text Style」側に置く、という構成のデザインシステムが少なくありません。これまでのスキルはVariablesしか読んでいなかったため、この情報が静かに欠落していました。
今回のアップデートでgetLocalTextStylesAsync()を追加取得し、スタイル名（例: Heading/Hero）ごとに--font-weight-*/--leading-*/--tracking-*のトークンを導出して@themeに反映するようにしました。すべてのフィールドに意味のある値が入っているとは限らない（lineHeightがAUTOのことが多い等）ため、値が存在する項目だけを拾う設計にしています。
実案件（Figma Design Agent生成→レイヤーリネーム・変数バインド・コンポーネント化済み、figma-auditスコア18/20のデータ）でこのスキルを使った際に、Typography変数がフォントサイズのみでfamily/weight/lineHeightがText Style側にしかなく気づきにくい、という実体験から改善しました。
入手・更新方法
kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新された figma-tokenize、figma-to-tailwind フォルダを ~/.claude/skills/ に上書きコピーしてください（Figma版の figma-tokenize をお使いの方は、Figmaエージェント側のスキルも合わせて最新化してください）。
kmrvid-skills-figma 単体パッケージをお持ちの方は、最新版を再ダウンロードして figma-tokenize（テキストスタイル生成パス追加）と新規の japanese-lp-seasoning・figma-componentize をあわせてご利用ください。