2025年、AIエージェントを使って開発するのが一般的になりました。
私はもっぱら Web の画面を作っているのですが、AI の進化に驚く一方で「そこじゃないんだよ...」というストレスを感じる場面も多々あります。
そんな中で、少しでもストレスを緩和するためにツールを作った、という話をさせてください。
モチベーション
新規開発であれば、
- Figma でデザイン
- Figma MCP で AIエージェントと連携し、コンポーネントを整備
- コンポーネントのStorybookを整備
- Figma MCP、 Storybook MCP、 AIエージェントを連携して画面を実装
という流れが、現時点のAIを活用した開発の正攻法だと思っています。
Storybook MCP
Storybook 10.1.0以降で利用できる、Storybook MCPのDocs Tool が個人的にはおすすめです（現時点では Experimental）。このMCPでは以下を提供します。
List All Components（list-all-components）
- コンポーネントライブラリ内で利用可能なすべての UI コンポーネント一覧を返す
- AIが、どのようなコンポーネントが存在するか把握するために利用
Get Component Documentation（get-component-documentation）
- 指定した 特定のコンポーネントに関する詳細ドキュメントを返す
- コンポーネントの説明（役割・仕様）
- 使用例（Usage examples）
- AIが、コンポーネントをどのように利用するか把握するために利用
参考：https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#docs-tools-experimental
一方で、既存システムのリプレースや改修の場合、そもそもFigma が存在しない というケースも少なくありません。そういう場合手元にあるのは、
- 既存画面のスクリーンショット
- なんとなくの仕様理解
だけ、ということも多いのではないでしょうか。
画像だけ渡して「よろしく」はまだ難しい
マルチモーダル AI の進化で、画像を理解してくれるようにはなってきました。
とはいえ、
この画面を React で作ってください
とスクショだけ投げても、なかなか思った通りにはいかない のが正直なところです。
一方で、
- 「ここはボタン」
- 「押すとモーダルが開く」
- 「これは既存の〇〇コンポーネント」
みたいなちょっとした補足をプロンプトに加えるだけで、生成精度がかなり上がるという経験をした人も多いと思います。
そもそも人間が画面を作るときも、振る舞い、意図、制約みたいなものを、何らかの形でドキュメントに残しますもんね。
.md を書くのも辛い
とはいえ、
- スクショを横に置いて
- md を書いて
- どこがどこか説明して
というのは、なかなか面倒です。
できれば、
- スクリーンショットを見ながら
- 直接その上に説明を書いて
- そのまま AI に渡せる
そんなことができると楽だなと思いました。
そう、それが UI Annotator です。
UI Annotator
発想としてはかなりシンプルで、
- 画像を読み込んで
- Figma ライクな UI で人がアノテーションをつけて
- その情報をプロンプトやJSONに吐き出せる
それだけです。
ユーザがD&Dで範囲指定 → アノテーションを入力！
エクスポートしたプロンプトをスクショと一緒にAIへ指示！
StorybookのJSONをインポートすれば、コンポーネントが選べる！
＊デジタル庁デザインシステム コードスニペット（React版）のstorybookを読み込んだ例
できること
- 画像を見ながら、人がアノテーションを付与できる
- ラベル（ここは何か）
- コンポーネント（何の UI コンポーネントか）
- ノート（補足・振る舞い、バリアントなど）
- エクスポートすると以下を出力/クリップボードにコピペできる
- AI 向けプロンプト
- 構造化された JSON
- コンポーネントは以下から定義をインポート可能
- Storybook の
index.json components.json
- Storybook の
Storybook MCP と組み合わせる
スクリーンショットとこのツールで付与した
- コンポーネント
- 位置
- 付加情報（レイアウト・バリアントなど）
をAIに与え、さらに先ほどのStorybook MCPからコンポーネント選ばせるようにすると、「イライラ」が「イラッ」もしくは「んーちょと惜しい！」くらいまで改善します。
（もちろん作る画面と揃っているUIコンポーネントの質に依存します）
おわりに
冒頭述べたように、「スクショ起点の AI ネイティブ開発」をもう少し楽にしたかったというのもありますが、実際のところ
- 普段作らないものを何か作ってみたかった
- 込み入った UI を AI とならどれだけ楽に作れるのかを試してみたかった
というのが一番のモチベーションだったりします。
今回の開発ではClaude Code を使い、いわゆる Vibe Coding 的なスタイルで作っていきました。利用技術や実装の雰囲気に興味があれば、GitHub も覗いてみてください。
まだまだ荒い部分もありますが、「AI ネイティブな UI 開発」の補助ツールとしては、それなりに使いどころがあるんじゃないかなと思っています。よかったら、試しに一度触ってみてください。