暑くなったり涼しさを感じたりの毎日ですね。こもりです。
先週末の土曜日から「KMRVID Claude Skills」「KMRVID Figma Skills」の二つのスキル集を海外展開し始めました(パチパチパチ)。で、Product Huntにローンチのお知らせを掲載したところ、数多ある当日ローンチ組の中で当日の順位は42位でフィニッシュ。何名かの方からの Upvotes もいただいて好調な?滑り出しです(まず知ってもらうことが大事ですからね)。
https://www.producthunt.com/products/kmrvid-skills
さて、そんな海外展開の用意も落ち着いたので、日本語版のFigmaのスキルに新作スキルを2つ追加、それに合わせてそれを利用するスキルを更新しました。
これまでオプションスキル扱いにしていたClaude版の「japanese-web-guideline」スキルをFigmaに最適化し、「figma-japanese-web-guideline」としてFigma版に収録、これで日本語のページを作る時に日本語段落の行揃えの調整、要件に合わせた見出しのウェイト調整、配色など、いわゆるAIがやりがちなこと、画面全体の欧米っぽさを矯正することが可能になります。
また、create-single-page や create-multi-pattern を使う場合もプロンプトでの指示でも生成される画面は、ビジネス要件でモバイル中心にするなどの指示をしないと、基本デスクトップサイズの画面だけができます。エージェントに「モバイル版を作って」でも生成可能ですが、それだけだとAIさんは適当に作っちゃいます。デスクトップサイズと見出しの書体が違う、別の配色にしてしまうなど。
新登場の「figma-mobile-convert」はデスクトップの画面の情報をもとにしてモバイルサイズのフレームを生成、モバイルで視認性が落ちそうな文字サイズの修正、ボタンなどのタッチターゲットの高さ維持、ナビゲーションメニューのコンポーネントまで生成するスキルになっています。こちらも元ネタはClaude版の「mobile-polish」ですが、Figmaに最適化してモバイルサイズの画面生成をメインの機能として追加しました。


スキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
新規スキル
※本スキルは KMRVID Figma Skills 限定です
figma-japanese-web-guideline
日本語Webサイトのデザインを Figma で作成・編集する際に、AIが陥りやすいデフォルト設定(イタリック使用、中央揃えの折り返し崩れ、行間の広げすぎ、文化的に不自然な配色など)を補正するガイドラインスキルです。デザイン生成・レビュー時の判断基準として参照します。ガイドラインスキルですが単体での実行もできますし、他のスキルから参照されるスキルでもあります。
「KMRVID Claude Skills」に含まれるコード実装向けの japanese-web-guideline を、Figma Design Agent 上でコードなしに動作するよう最適化した版です。これまで Figma 側の作業に Claude 版 japanese-web-guideline をコンパニオンスキルとして併用していた運用は、本スキルで置き換えられます。
figma-mobile-convert
デスクトップサイズ(1280〜1440px幅)のFigmaフレームから、モバイル版(390px幅)のデザインを生成するスキルです。「KMRVID Claude Skills」の mobile-polish のデザイン哲学を、Figma Design Agent 向けに移植しました。
- 変換前に整備状況(レイヤー名の自動生成率・変数バインド率・コンポーネント化)をチェックし、不十分な場合は先に
figma-systematizeを実行するよう案内します - 見出しのフォントウェイト・レタースペーシング、各セクションの背景色、フルブリード画像の配置は、デスクトップと完全一致させるルールを徹底しています(変更してよいのはサイズ・レイアウト・スペーシングのみ)
- サイトタイプとナビ項目数から、ハンバーガーメニュー/ボトムタブバー/スライドアウトドロワーの推奨パターンを判定し、バリアント付きのローカルコンポーネントとして作成します
- 同一セクション内のカードの高さ統一、セクション間余白のスペーサーフレーム方式など、実装時にありがちなミスを踏まえたチェック項目を用意しています
更新スキル
japanese-lp-seasoning / create-multi-pattern / create-single-page
いずれもコンパニオンスキル案内が、Figma専用版には含まれていなかった旧版の japanese-web-guideline を案内し続けていた古い記述だったため、新設の figma-japanese-web-guideline を案内するよう差し替えました。create-multi-pattern・create-single-page は連携スキル選択だけでなく、生成時のトーン適用ガイダンス・専用の日本語微調整パス・最終レポートの連携スキル欄まで一貫して参照箇所を更新しています。
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新された <スキル名> フォルダを ~/.claude/skills/ に上書きコピーしてください。
KMRVID Figma Skills 単体パッケージをお持ちの方は、kmrvid-skills-figma 圧縮ファイルの最新版を再ダウンロードして <スキル名> をFigmaエージェント側に登録し最新化してご利用ください(新規スキルの追加もこちらの手順で反映されます)。
それでは、よい一日を。