たまには人の役に立ちたくて…、こもりです。
ふと「何か使えるスキル作れないかな？」と思いまして、FigmaのファイルのフレームURLをAIさんに渡して、そのフレーム構造がAI的に理解しやすいものになっているかをチェックして、改善点とかをレポートするClaude Codeのスキルを作ってみました。
https://github.com/gaspanik/figma-audit-skill
Figma MCP経由でコード化がうまくいかない人とか、このスキルを使ってチェックすれば、自分のFigmaファイルがAIに理解しやすいのかどうか、そうなってなければ改善点がどこかわかるかな、と。せっかく作ったので、世界に向けて公開します（笑）。READMEもスキル本体も英語にしてるけど、呼び出しは日本語で大丈夫です。
スキルはお好きなとこにおいて呼び出してください。どこでも使えるようにするには、自身のホームディレクトリの直下にある「.claude」の中の「skills」に「figma-audit」フォルダを置きましょう。呼び出し方は自然言語でもコマンド＋URLでも大丈夫です。
```
このFigmaのファイルのチェックして <URL>
```
```
/figma-audit <URL>
```
みたいな感じです。日本語でプロンプトに投げれば、日本語でレポートが返ってきます。コマンドで実行した場合は英語になると思いますが、それは「翻訳して」で日本語にできますので。以下参考までにキャプチャです。
こちらは、私の「Figma × AI」講座の中でサンプルとして提供しているFigmaファイル。そこそこ真面目に作ってあるので、まあまあ良い結果になっています。
一方のこちらは、AIさんに適当にコードを書いてもらったECのモックアップをFigma MCPの「Write to Canvas」なツールでFigmaにしてもらったものです。元のコードであったり、Figmaにするときに簡単に放り投げてるのもありますし、そもそもこのツール自体がまだβみたいなものだと思うので、こんな結果になっています。
といった感じで、「自分のFigmaをMCP経由でAIにコード作ってもらったけど何かうまくいかないんだよね…」という方はこのスキルでチェックしてみてください。改善点が見つかるかもしれません。AIに理解しやすい構造化されたデータが作れれば、AIもそれに応えて適切なコードを書いてくれると思います。
「どうすればいいの？」という方は、番外編としてClaude Codeの始め方を追加した「Figma × AI」講座でお勉強です。よろしくお願いいたします。
---
コンポーネント単位でのチェックも別スキルとして公開
FigmaでWebページなどを作ってページ全体のフレームURLを渡してチェックするだけでも十分かと思いましたが、コンポーネントだけを単独で取り出しての構造チェックもあったら便利そうなので、またClaudeさんにお願いして作ってもらいました。
https://github.com/gaspanik/figma-component-audit-skill
最近のFigmaは「スロット」の機能も追加されたので、スロット周りの設定もチェックするようにしています。デフォルトのコンテンツがあるか、レイヤーの命名に意味があるか、など、スロットも単独で使うわけではなくてひとつのコンポーネントに複数含まれる可能性もありますからね。
ということで、ページ全体のチェックは「figma-audit-skill」、コンポーネント単位でのチェックは「figma-component-audit-skill」でチェックしてみてください。自分のホームディレクトリの直下の「.claude」フォルダの中に入れるだけでどこからでも呼び出せます。
問題点をWrite to Canvasで…
どちらのスキルもチェックしてレポート生成後、表示された問題点をもとにMCPの「use_figma」ツールとか使って、プロンプトから指示を与えて自動的に修正をかけるということもできなくはないですが、ものによってできるできないが出てきます。
例えば、レイヤーのリネームとか変数の変更とかはできると思いますが、コンポーネントプロパティをどうこうしてとか複雑なものは無理なんじゃないかと。まぁ、リネームだけでも意味が通るようにしてくれるのは助かりますけどね。