あれ?、このスキルもFigma用に移植できるかも?、こもりです。たびたび失礼します。
既存のスキルを使いながら出てくる「これにこういうのも追加した方が便利じゃ?」「このエージェントが気まぐれになる挙動を改善できたら…」とかしていると、新作スキルを思いついちゃったりして、スキル絡みで毎日が慌ただしいです。
8月2日の日曜日、Xにこんな記事を投稿したばかりだと言うのに、もうこの中の話も今は昔。
Figma版スキル集「KMRVID Figma Skills」は登録スキルが遂に10個の大台に乗りました。リリース当初が6個だったので、発売開始から2〜3日で4つの新しいスキルが登録されたことに…(Claude版の移植がほとんどですが)。Figmaから離れずにあれもこれもできるようさらに便利になりました。

「create-multi-pattern」スキルは、これまで新規ファイルで真っ新な画面での複数レイアウト生成を前提としていましたが、今回既存資産を活かしたうえでの新規ページ作成にも対応しました。
新規登録スキル以外は、気が向いたときにまるっとスキルをアップデートしていただければ「あれ?使いやすくなったかも??」みたいな修正ばかりですので、既にお使いの皆さんにおかれましては、のんびりと更新していただいても大丈夫です。
現在、週末限定ディスカウントはやってはいませんが(Figma版はまだ発売記念価格です)、ランディングページも新しくなりました。また価格改定の足音が近づいています…。
- https://kmrvid-claude-skills.gaspanik.workers.dev/
- https://kmrvid-claude-skills.gaspanik.workers.dev/figma
というわけで、今回のアップデートサマリーです。
- figma-typescale(Figma版):新スキル追加。ベースサイズと比率からタイプスケールを生成。命名規則を「オリジナル」(8段階、figma-tokenizeと統一)と「Tailwind」(13段階、figma-to-tailwind/tailwind-to-figmaと統一)から選択可能
- figma-contrast-check(Figma版):新スキル追加。テキストのWCAGコントラストを判定し、コンパクトなレポートと自動修正に対応。実フレームでの丹念な実機テストを経て、Figmaエージェント環境特有の複数の不具合を修正済み
-
create-multi-pattern(Figma版):既存のFigmaデザイン(フレーム・変数・スタイル)を検出し、既存をベースにパターン生成するか選べる新ステップを追加。あわせて連携スキルの呼び出しタイミングも見直し
- figma-tokenize(Figma版) / figma-contrast-check(Figma版):連携スキルの案内・確認まわりを全面的に見直し。確認質問がUIで見落とされたり重複表示されたりする不具合を修正し、連携スキルの参照方法も正式な表記に統一
- brief-me(Figma版):質問がまとめて崩れる不具合を修正
双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
新規スキル
figma-typescale(Figma版)
ベースサイズと比率(Perfect Fourth / Major Third / Golden Ratio / Minor Third など)を選ぶだけで、タイプスケールを自動計算するスキルです。
- 最初に命名規則を選べます。「オリジナル」はH1〜H5・本文・sm・xsの8段階で、変数は
text/<px>、Text StyleはHeading/H1〜H5・Body/Regular・Body/Small・Body/Captionとfigma-tokenizeと同じ命名規則で作成(相互運用可能)。「Tailwind」はfont/size/xs〜font/size/9xlの13段階で、Claude版 figma-to-tailwind / tailwind-to-figmaが読み書きする変数名とそのまま一致するため、CSSの@themeブロックへノーコンバートで持っていけます - Tailwindモードでは、サイズとウェイトをTailwind同様に独立したものとして扱うため、Text Styleは作成せず変数のみ作成します
- 書体は質問せず、既存デザインで使われているフォントがあればそれを自動採用、なければFigma標準のInterにフォールバック(後から差し替え可能)
- キャンバス選択は不要。選択中のフレームがある場合のみ、生成したスケールをその中の既存テキストに適用するか追加で選べます(±2px以内で一致するステップがない場合は無理に適用せず、対象テキストを明示してスキップ)
- 生成後、各ステップのサイズ・行間を実際にレンダリングして確認できるプレビューフレームをキャンバス上に配置するオプションつき
- 既にTypography変数・Text Styleが存在するファイルでは、上書き拡張するかキャンセルするか確認してから進みます(オリジナル/Tailwind両方の変数が同一ファイル内で共存可能)
- 新規ファイル・既存トークン化済みファイルの両方、オリジナル/Tailwind両モードで実機テスト済み、不具合なし
figma-contrast-check(Figma版)
Claude Code版の同名スキルのFigma版です。選択したフレーム/セクション/コンポーネント内のテキストについて、WCAG 2.x のコントラスト比(AA/AAA切り替え可)を判定するスキルです。
- 前景色・背景色は、兄弟要素や親要素の塗り重ね・不透明度まで考慮して実際に画面に表示される色を解決してから判定(単純に親のfillだけを見ない)
- レポートはまずサマリー表と優先修正ポイント(上位3件)のみのコンパクト表示、「詳細を見せて」と伝えると全件テーブルを表示
- ボタン枠線やアイコンなど非テキストUI要素のコントラストも、参考情報として任意でチェック可能
- コントラスト不足の箇所は、色相を保ったまま明度のみ調整する自動修正にも対応(適用前に必ず選択式の確認が入ります)
- 変数(トークン)にバインド済みの色が失敗している場合は、その変数が他の箇所でも使われていないか確認したうえで、専用なら変数側の値を、共有されている場合は影響範囲を明示してから修正します
更新スキル
figma-tokenize(Figma版)
スキルの連携まわりを全面的に見直しました。
- figma-layer-renameとの連携(レイヤー名整理の提案)について、スキルからスキルを自動で呼び出す方式が環境側の制約で不安定なことが判明したため、アナウンス表示のみに変更。あわせて、アナウンス直後に次の質問に進むとFigma側のUIで折りたたまれ見落とされる問題があったため、確認の質問を一度挟んで止めるよう修正
- 連携スキルの案内は、正式な
/custom-skills:figma-layer-renameという表記で参照するよう統一(Figmaのビルトインスキルと名前空間で区別されているため)。ただし、AI側からスキルを自動で連鎖呼び出しすること自体は名前空間を正しくしても不安定なため、引き続き行わず、ユーザーに手動での実行をお願いする方式のままです - 同様の修正をfigma-contrast-checkにも適用しています
create-multi-pattern(Figma版)
※本スキルは KMRVID Figma Skills 限定です
新しいページの追加時に既存デザインの有無をチェックし、既存デザイン資産を活かしながらの新ページ生成に対応。また、連携スキル(cognitive-ui-design / japanese-web-guideline)の呼び出しタイミング、生成後の日本語テキスト調整パスを見直しました。
- 対象のFigma URL/ページに既存フレーム・変数・スタイルがある場合、それを検出したうえで「既存をベースにするか/無視して新規に進めるか」を確認する新ステップ(Step 0)を追加。既存ベースを選んだ場合は、色パレットの新規提案をスキップして既存の変数をそのまま使い、既存フレームの構造も1パターンの参考点として活かします。既存が何もない真っ新なページでは、このステップは何も聞かずスキップされます
- 実機テストで、既存フレームがButtonやCategory Itemなどのコンポーネントインスタンスを含む場合、そのフレームをそのまま生成の参照ノードとして渡すとデザインエージェントがインスタンスのロックされたプロパティを操作しようとしてエラーになり、リトライのたびに未完成フレームが残ってしまう不具合を発見。インスタンスを含む既存フレームは直接参照させず、構造をテキストで説明してから生成する方式に修正
- japanese-web-guideline は、生成前(見出しウェイト・配色などトーン面)と生成後(均等揃え・孤立文字・行間などの機械的なチェック)の両方で呼び出す構成に変更。どちらか一方だけでは効果が偏ることが検証で判明したため
- 生成後の調整ステップ(Step 7.5)は「チェックリストをレビューする」という曖昧な指示から、「該当ノードを一つずつ列挙して確認・修正する」という明示的な手順に書き換え。レビュー任せだと実際には見逃しが起きることを実機テストで確認したため
brief-me(Figma版)
要件ヒアリングの質問方法を修正しました。
- これまでは複数の質問を1回でまとめて聞く指示だったが、Figmaエージェント環境ではそれが選択肢のないただの地の文の質問に潰れてしまうことを確認。質問は1問ずつ順番に聞く形に変更
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新されたフォルダを ~/.claude/skills/ に上書きコピーしてください。(Figma版をお使いの方は、Figmaエージェント側に登録し最新化してご利用ください)。
KMRVID Figma Skills 単体パッケージをお持ちの方は、kmrvid-skills-figma 圧縮ファイルの最新版を再ダウンロードしてFigmaエージェント側に登録し最新化してご利用ください(新規スキルの追加もこちらの手順で反映されます)。
それでは、よい一日を。