もう9月になってしまった…。うぅ…、こもりです。
Figmaのコミュニティに公開した「design-md」スキルの利用者が増えつつあってありがたい限りです。「もっともっと日々の作業が楽にならないかな…」と考えていたら、新しく5つのスキルができました。今回は、Claude版に2つ、Figma版に3つのスキルが新登場。
<今回の主なアップデート内容>
- 【Claude版】新スキル「figma-update-checker」を追加
- 【Claude版】新スキル「figma-update-patch」を追加
- 【Claude版】「figma-workflow」を更新
- 【Figma版】新スキル「hey-brief-me」を追加
- 【Figma版】新スキル「hey-optimize-me」を追加
- 【Figma版】新スキル「coding-prompter」を追加
といった感じになっておりまして…。
figma-update-checker / figma-update-patch
これまでClaude版のFigma系スキルはどちらかといえば、FigmaのURLを渡して新規でページを生成する、もしくはFigmaのファイルを最適化したり変数同期が主でした。修正の反映はURL渡してプロンプトで「ここの部分コーディングし直して」でやった方が速いし…と思っていたんですね。
でも考えてみたら、デザイナーさんとエンジニアさんの間では「どこどこを修正したから再度コーディングお願い」みたいなやりとりがあるでしょうし、だったら最初にコーディングした時点で記録を取っておいて、「更新があるかどうかをClaude側からチェックかけて、あったらその該当箇所を確認の上で自動で部分修正コーディングできたら良いんじゃない？」と思い直しました（笑）。エージェント専用というわけではありません。
まず「figma-update-checker」に対象となるFigmaのフレームURLを渡しましょう。初回起動時は今の状態と言うことで記録のみおこないます。その後、ファイル修正後に再度チェッカーを実行して、変更が確認されたら「figma-update-patch」を呼び出し、スクリーンショットとブラウザでの見た目を比較したうえで、視覚的に変更がある場合にのみ修正をする感じにしています。変数の変更やバインドとかスタイルの追加とかも編集された扱いにはなりますが、何か変更あるよということを伝える形にしています。
この2つの新スキルの追加に伴い、「figma-workflow」にパイプライン実行時の最後の処理として記録をするかしないかオプションを追加しています。
coding-prompter
Figmaのフレームを作ってコーディングエージェントにプロンプトで依頼するテキストを環境にあわせて生成するスキルです。「KMRVID Claude Skills」をお持ちであれば、その中のスキルで別にプロンプトにいろいろ書くこともないので…、「用途に合わせたスキルの呼び出し＋URLだけ」の出力が表示されます。コピーして貼り付けるだけです。
「KMRVID Claude Skills」がない場合は、「新規に環境を作るのか」「作業環境があるのか」などを質問して、作りたい技術スタックの確認やガイドラインの有無などを確認した上で、コーディングエージェント用のプロンプトを生成します。こちらも出力された内容をそのままプロンプトに貼り付けてもらえば良いだけです。念のため、「変数やコンポーネントなどはちゃんと使う」「アノテーションもちゃんと読む」「画像はFigmaからダウンロードする」など、何も指示しないと適当にやりそうな箇所には釘を刺してあります。
こちらはFigmaコミュニティでも公開しましたので、どなたでもお試しいただけます。
hey-*
Figma版のスキルに「hey-」で始まるスキルを2つ追加しました。詳細は下記をご覧いただきたいのですが、複数の似たようなスキルを個別に呼び出すのが面倒くさいので、実行したいスキルを指定して順番に呼び出せるようにしただけのスキルです。「hey-optimize-me」は、既にある「figma-systematize」と似ていますが、sysytematizeは全自動実行するもので、optimize-meは都度確認が入ります。呼び出しも面倒な方は前者、呼び出しは面倒だけど確認はしながらポチポチと質問に答えながらやりたい方は後者をお使いください。
双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
新規スキル
figma-update-checker（Claude版）
Figmaのフレーム/ノードURLを受け取り、プロジェクトが前回チェックした時点から実際に変更されたかどうかを検知するスキルです。デザイナーから「更新しました」と言われるのを待たず、エンジニア自身が実装前に確認できます。
get_design_context の内容をハッシュ化してプロジェクト直下の .figma-cache.json に記録・比較する仕組みで、Figma Personal Access Tokenは不要です。初回チェック時は figma-pipeline（環境未構築の場合）または figma-workflow（環境構築済みの場合）への導線を、変更検知時は figma-update-patch（部分修正）または figma-workflow（フル再実装）への導線を提示します。
figma-update-patch（Claude版）
figma-update-checker が変更を検知した後、ページ全体を作り直さず変更箇所だけをピンポイントで修正するスキルです。
Figma側のスクリーンショットと実装済みページのブラウザスクリーンショットを比較し、視覚的な差分候補をユーザーと一緒に確認したうえで、data-node-id 属性（またはテキスト内容・CSSトークン名によるフォールバック検索）で該当箇所を特定して編集します。色などの値が既存の @theme トークンに該当する場合は、グローバルに反映するかローカルのみにするかを確認します。レイヤーリネームや変数バインドのような見た目に影響しない変更の場合は「差分なし」を正しく報告し、記録だけを更新します（figma-update-checker のインストールが必須です）。
hey-brief-me（Figma版）
brief-me（ビジネス要件ヒアリング）とdesign-brief-me（デザイン設定ヒアリング）のどちらを実行するか複数選択で選び、選ばれたものだけを固定順で実行するピッカースキルです。各スキルの質問フロー・最終出力（BRIEF / DESIGN_BRIEFのマークダウン）はそのまま実行され、要約や省略はされません。実機検証済み — 実行後に BRIEF / DESIGN_BRIEF のマークダウンがチャットに正しく出力されることを確認しています。
hey-optimize-me（Figma版）
選択したフレームに対して、figma-layer-rename（レイヤー名整理） / figma-tokenize（トークン化） / figma-componentize（コンポーネント化） / figma-enhance（さらなる改善提案）の中から実行したいタスクを複数選択で選び、固定順（rename → tokenize → componentize → enhance）で実行するピッカースキルです。各スキルを個別に呼び出しつつ、各スキル自体の確認ステップ（質問等）ではその都度停止してから次に進みます。
既存の figma-systematize は「rename → tokenize → componentize」を1スキルに内包し全自動で実行する方式ですが、 hey-optimize-me は各ステップの確認を挟みながら、必要なタスクだけを選んで実行したい場合向けの構成です。実機検証済み — 各スキルが順番に実行され、確認ステップで正しく停止・再開することを確認しています。
coding-prompter（Figma版）
デザインが完成した選択フレームから、コーディングエージェントに実装してもらうための実装プロンプトを生成するスキルです。
まず「KMRVID Claude Skills」をお持ちかどうかを確認し、お持ちの場合は用途（新規生成/既存環境へのページ追加/ファイルの更新）に応じて /figma-pipeline・/figma-workflow・/figma-update-checker のいずれかの定型コマンドを提示するだけで完了します。
お持ちでない場合は、技術スタック（新規環境の場合）または既存環境の情報（フレームワーク・CSS手法・コーディングガイドライン・ディレクトリ構成）をヒアリングし、デザイン参照（fileKey/nodeId）・画像アセット取得（実画像をダウンロード）・デザイントークン反映（変数/スタイル/コンポーネントがあれば使用）・アノテーション追従を含む実装プロンプトを組み立てます。複数フレーム選択時は全ノードIDをプロンプトに含めます。
実機検証済み — フレーム選択時に fileKey / nodeId / frameName が自動で埋まり、最後までフローが流れることを確認しています。
更新スキル
figma-workflow（Claude版）
生成コードにFigmaのノードID（data-node-id）をそのまま保持するよう変更しました。これにより、後から figma-update-checker / figma-update-patch で変更箇所を正確に特定できるようになります。
また、実装完了後、figma-update-checker がインストールされていれば、今の状態をベースラインとして記録するかどうかを確認する導線を追加しました（figma-update-checker を経由せず直接 figma-workflow / figma-pipeline を実行した場合に、変更検知の起点となる記録が残らない問題への対応です）。