毎日こもりです。たびたび失礼します。
今日もまた新しいスキルの追加と更新のお知らせです（今日の更新はClaude版もあります）。「KMRVID Figma Skills」は登録スキルが14個に増えました。
大ニュースとしては、Figmaでもいくつかのスキルを組み合わせたパイプライン実行が可能になりました（といっても、現状Figmaのエージェント内ではスキルからスキルの呼び出しが不安定なので、プロンプトでのスキルの連続呼び出しになります）。
;
先に要件を定義する必要こそありますが、その後は手放しで作りたいページを生成〜AIコーディング対応も申し分ないFigmaファイルへの最適化まで全自動で走らせることが可能になりました。こちらの使い方などの動画は近日中に公開しますので、少々お待ちください。
また、Figmaのフレームの最適化処理パートは、3種のスキルを統合したパイプラインスキルを用意しました。最適化処理別の個々のスキルはそれぞれの処理だけおこないたい時には有用ですが、いつも連続実行してる場合は一度に全部やってもらう方が楽ですので…。
新規登録スキル以外は、気が向いたときにまるっとスキルをアップデートしていただければ「あれ？使いやすくなったかも？？」みたいな修正ばかりですので、既にお使いの皆さんにおかれましては、のんびりと更新していただいても大丈夫です。
現在、週末限定ディスカウントはやってはいませんが（Figma版はまだ発売記念価格です）、ランディングページも新しくなりました。Figma版は想像以上の早さで収録スキルが増えまして、それらの価値と販売価格があまりに釣り合ってないので来週から価格を改定します。
- https://kmrvid-claude-skills.gaspanik.workers.dev/
- https://kmrvid-claude-skills.gaspanik.workers.dev/figma
というわけで、今回のアップデートサマリーです。
- 新スキル「figma-systematize（Figma版）」を追加
- 新スキル「figma-enhance（Figma版）」を追加
- 新スキル「create-single-page（Figma版）」を追加
- 新スキル「design-brief-me（Figma版）」を追加
- 「figma-tokenize（Claude版／Figma版）」を修正。フォントサイズ変数が正しく反映されない不具合を修正
- 「figma-typescale（Figma版）」を修正。DESIGN_BRIEFを渡すと質問なしで自動進行するように対応、Tailwind CSS v4の標準スケールをそのまま使う新モードを追加
- 「figma-componentize（Figma版）」を修正。ヘッダー/フッターをコンポーネント化候補として提案するように対応
- 「figma-to-tailwind（Claude版／GitHub版）」を修正。生成するトークン名がTailwindの予約された名前空間と衝突する場合に、値を比較してスキップ/リネームするように対応
- 「brief-me（Figma版）」を修正。指定カラーがある場合に実際のHEX値を聞くように対応
双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
新規スキル
figma-systematize（Figma版）
選択したフレーム／セクションを「レイヤー名整理 → トークン化 → コンポーネント化」の3段階で一括処理するパイプラインスキルです。figma-layer-rename・figma-tokenize・figma-componentize の3スキルを順番に手動実行する代わりに、これ1つで一気通貫に体系化できます。
- 実行冒頭で「自動（推奨・全ステップ推奨値で実行、確認は最終レポートのみ）」か「確認あり（各ステップ適用前に確認を挟む）」かを1回だけ確認します
- 内部的には3スキル分のロジックをこの1スキルに統合しています（Figma環境ではスキルから別スキルを呼び出す連携が不安定なため）
- コンポーネント化時の写真・レイアウトの保持、テキストサイズの変数連動まわりを実機テストで作り込んでいます
- コンポーネント化フェーズで、ヘッダー/フッターを「同一フレーム内での繰り返し回数」ではなく「フレーム最上部/最下部・フル幅」という位置と役割で判定するように変更しました。ボタンやカードと違い、ヘッダー/フッターは1ページに1回しか出てこないのが普通なので、従来の「2回以上出現したら候補」という基準では拾えなかったための対応です。これにより、
create-single-pageで後からページを追加する際、既存のヘッダー/フッターをインスタンスとして再利用できるようになります - Text Style生成後に、fontSize・lineHeightが意図通り反映されているかを1件ずつ再検証するステップを追加しました。実機テストで、Text Styleのサイズが意図せず最小ステップに崩れる不具合を検出・修正できています
- カラーバインド処理が、画像fillと共存するSOLID fill（写真に重ねた薄いトーン演出など）を無条件にバインド対象としてしまい、画像が塗りつぶされてしまう不具合を修正しました。以後はこのケースを個別確認に回します
figma-enhance（Figma版）
すでにトークン化・コンポーネント化済みのファイルをページ全体で監査し、さらなる改善余地（バリアント統合候補、コンポーネントプロパティ追加、変数バインド漏れ、Text Style未適用、不要fillの整理）を検出・提案するスキルです。figma-systematizeなどで一通り体系化した後の「仕上げ」として使えます。
- 検出結果を優先度付きの一覧で提示し、「全部実装」「選んで実装」「レポートだけでOK」から選べます
create-single-page（Figma版）
create-multi-patternの「無質問シングルページ特化版」です。BRIEF（brief-me／design-brief-me の出力）を貼り付けて実行すると、セクション構成・構造モデルまで全て決定的なルールで自動確定し、単一ページを一発生成します。質問を一切出さないため、「brief-me → design-brief-me → create-single-page → figma-systematize」のように1つの連続プロンプトに繋げて、ほぼ無人でページ生成〜整理まで完走できます。
-
figma-typescaleで作成済みのTypography変数/Text Styleがあれば自動検出して使用します -
design-brief-meの `DESIGN_BRIEF` を渡すと、指定したページ種別（商品詳細ページ・商品一覧ページ・会社概要ページなど）に沿った構成で生成します - 既にヘッダー/フッターがコンポーネント化されている場合は、新規生成せずインスタンスとして再利用します（他ページとの一貫性を保つため）
- 人間のレビューが挟まらない分、生成後にトークンバインド・パレット・構造モデルの反映を実際に再確認して不備があれば自動修正するセルフ検証パスを備えています
- BRIEFにHEX値の指定カラーがある場合は、パレットを自動生成せずそのまま採用するようにしました。また、BRIEFの留意点にトーン・雰囲気の指示（「シンプルに」など）がある場合、パレットと同様に生成時の明示的な制約として反映するようにしました
design-brief-me（Figma版）
デザイン着手前の設定ヒアリングスキルです。brief-meがビジネス要件（何のためのページか）を扱うのに対し、こちらはページ種別（トップページ/LP・商品一覧・商品詳細・会社概要・お問い合わせ・実績一覧・記事一覧）とタイプスケール設定（命名規則・ベースサイズ・比率）という「どう作るか」の部分を先に決めておくためのものです。
- 結果のDESIGN_BRIEFはチャットに出力されます。
brief-meのBRIEFと一緒に貼り付けて連続実行を依頼すると、figma-typescale・create-single-pageが持つ質問ステップをすべて省略でき、ほぼ質問ゼロで完走します - 冒頭で既存のTypography設定（変数・Text Style）を検出し、見つかれば引き継ぐか確認したうえで該当質問を省略します
- タイプスケールの命名規則が分からない・決めたくない方向けに「設定しない（お任せ）」選択肢を追加しました
- 命名規則に「Tailwind（デフォルト値）」を追加しました。従来の「Tailwind」はステップ名がTailwind風なだけで値はベース×比率で計算していましたが、新しい選択肢はTailwind CSS v4の実際の標準スケール（xs=12px〜9xl=128px）をそのまま使い、ベースサイズ・比率の質問自体が不要になりますので、Tailwindベースで見出しなどの大きさを改変しない場合はこちらをお選びください
更新スキル
figma-tokenize（Figma版）
フォントサイズのトークン化・Text Style生成まわりの不具合を修正しました。
- これまでは「フォントサイズの変数をノードに直接バインド」した後に「Text Styleを作成してノードへ適用」という2つの処理が独立して走っており、Text Styleを適用した時点でノード直接バインド分が上書きされて無効化される不具合がありました（見た目上は変数がバインドされているのに、変数の値を変えても反映されない）
- 変数はText Styleの
fontSizeプロパティ自体にバインドするよう修正し、「変数 → Text Style → ノード」の正しい連鎖になりました - Text Styleが適用されなかった一部のテキストのみ、従来通りノードへ直接バインドするフォールバック処理を用意しています
- 通常版（
~/.claude/skills）・Figma版（KMRVID Figma Skills）の両方に反映済みです
figma-typescale（Figma版）
design-brief-meのDESIGN_BRIEFを渡した場合、命名規則・ベースサイズ・比率・プレビュー確認の質問をすべて省略し、DESIGN_BRIEFの指定通りに自動進行するようにしました。
- 既存のTypography変数と衝突しそうな場合の確認も、DESIGN_BRIEFがある場合は自動で「拡張」を選ぶようになりました（
design-brief-me側で既に人間の判断が済んでいる前提のため） - 命名規則の選択肢に「Tailwind（デフォルト値）」を追加しました。Tailwind CSS v4の標準スケール（xs=12px〜9xl=128px、対応するline-heightも実値）をそのまま使い、ベースサイズ・比率を聞かずに進みます
brief-me（Figma版）
既存ブランド資産の質問で「指定カラーとも既にある」を選んだ場合の、実際のカラー値を聞くフォローアップを追加しました。
- 従来はこの選択肢が単なるフラグで、実際のHEX値までは聞いていませんでした。フォローアップで具体的なカラーコードを教えていただけるようになり、
create-single-page側でその指定色をそのままパレットとして使えるようになりました
figma-componentize（Figma版）
コンポーネント化候補の検出に、ヘッダー/フッター向けの例外ルールを追加しました。あわせて、マスターコンポーネントの配置位置が既存の他マスターと重なってしまう不具合も修正しました。
figma-to-tailwind（Claude版）
Figmaのスペーシング変数（例: spacing/120 = 120px）をそのままTailwindの--spacing-120として書き込むと、Tailwind自身が持つ標準スペーシングスケール（p-4やh-120などの計算式）を静かに上書きしてしまい、実際に480pxの要素が120pxに潰れる不具合が発生していました。同様の衝突はカラートークン（neutralやgrayなどTailwind標準パレットのファミリー名＋ステップ）でも起こり得ます。
- 書き込み前に、生成予定のトークン名がTailwindの予約された名前空間と衝突するかを判定するステップを追加しました
- スペーシングは、Tailwindのデフォルト計算値と実際の値を比較し、一致すればトークンを書き込まずスキップ（冗長な設定を避ける）、食い違う場合のみ衝突しない名前（
--spacing-fig-N）にリネームします - カラーは、Figmaの値とTailwindデフォルト（OKLCH）の厳密比較が非現実的なため、ファミリー＋ステップが一致した場合は常にリネームします（
--color-neutral-100→--color-neutral-fig-100）
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新されたフォルダを ~/.claude/skills/ に上書きコピーしてください。（Figma版をお使いの方は、Figmaエージェント側に登録し最新化してご利用ください）。
KMRVID Figma Skills 単体パッケージをお持ちの方は、kmrvid-skills-figma 圧縮ファイルの最新版を再ダウンロードしてFigmaエージェント側に登録し最新化してご利用ください（新規スキルの追加もこちらの手順で反映されます）。
それでは、よい一日を。