またまたこもりです。夏休み、暇してませんか？
昨日、Figma版スキルに以下の「figma-alt-suggest」なるフレーム内の画像を抽出し、自動的に写真の中身を見て「alt属性」の提案をしてくれるお助けスキルを公開したばかりですが、また新しいスキル「figma-annotate」を追加しました。それに伴い、figma-alt-suggest も機能追加です。
Webアクセシビリティ的なところでのサポートスキルが新登場です。Claude版には「a11y-review」、Figma版には「figma-alt-suggest」を追加しました。双方、画像のalt属性に何を入れて良いかわからない問題の解決をお手伝いします。
<今回の主なアップデート内容サマリー>
- Figma版に新スキル「figma-annotate」を追加しました
- 「figma-alt-suggest」にアノテーション書き込みオプションを追加しました
各スキルの詳細はページ下の概要をご覧ください。
新スキル「figma-annotate」は、上図のように選択したフレームの内部をチェックして、Figma純正のDevモード側のアノテーションを書き込み、コーディングエージェントへ構造だけでは伝わらない実装意図を渡します。フレームの構造がきちんとしていれば、AIエージェントがコーディングする際もある程度はうまくいくと思いますが、さらにその精度を高めるためにアノテーションを自動で付与できるようにしました。
このスキルの追加に伴い、昨日公開した「figma-alt-suggest」も画像をスキャン後、alt属性の値を提案するレポート機能だけだったものに、オプションでアノテーション（アクセシビリティカテゴリ）を使ってalt属性の提案内容を書き込めるようにしました。
これら2つのスキルの追加・更新によって、AIコーディングの精度を高めるだけでなく、エンジニアさんがFigmaから情報を取得して展開する際にも扱いやすくなるのではないかと考えております。是非ご利用ください。
講座内のスキルは最新版に更新済。
双方の講座の更新情報、スキル一覧や使い方などは、以下の公開中のREADME.mdでご確認ください。
- https://kmrvid-claude-skills.gaspanik.workers.dev/
- https://kmrvid-claude-skills.gaspanik.workers.dev/figma
新規スキル
figma-annotate（Figma版）
Figma純正のDev Mode注釈機能（プリセットカテゴリ）を使い、選択範囲にコーディングエージェント向けの実装意図を書き込むスキルです（＝エンジニアさんにもわかりやすい）。
フレームの構造だけでは伝わらない情報——Auto-layoutプロパティから読み取れるレイアウト/CSS、検出したカルーセルやフォームのARIAパターン、画像の `object-fit / aspect-ratio / lazy-loading` など——は、設計から自動判断できるものとして自動で注釈化します。一方、CMS管理範囲・フォームバリデーション仕様・状態バリエーション・遷移先URLなど、静的なデザインだけでは分からないものは「要確認」の注釈として明示し、推測で断定しません。
同一カテゴリの既存注釈があるノードはスキップする冪等設計なので、同じフレームに複数回実行しても注釈が重複しません。ALTテキストは対象外としており、画像が含まれる場合は figma-alt-suggest との併用を案内します。
書き込み前には必ず候補を一覧で提示し、確認を取ってから注釈を追加します。
更新スキル
figma-alt-suggest（Figma版）
これまで読み取り専用でレポートのみを提示していましたが、レポート後に確認を挟んだうえで、ALT提案をFigma純正のDev Mode注釈（Accessibilityカテゴリ）として書き込めるオプションを追加しました。read-onlyの原則は変わらず、あくまで確認したうえでの任意の書き込みです。
figma-annotate も同じAccessibilityカテゴリに注釈を書き込むため、書き込んだ注釈には 「ALT提案:」 という目印を付けています。これにより、どちらのスキルを先に・後に実行しても、片方が付けた注釈をもう片方が「対応済み」と誤認して重複書き込みやスキップを誤ることがないようにしています。
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新されたフォルダを ~/.claude/skills/ に上書きコピーしてください。（Figma版をお使いの方は、Figmaエージェント側に登録し最新化してご利用ください）。
KMRVID Figma Skills 単体パッケージをお持ちの方は、kmrvid-skills-figma 圧縮ファイルの最新版を再ダウンロードしてFigmaエージェント側に登録し最新化してご利用ください（新規スキルの追加もこちらの手順で反映されます）。
それでは、よい一日を。