はじめに
AI画像生成を使っていて、こんな経験はないでしょうか。
「いい感じのUI、作って」...「なんか違う」
「もっとシンプルに」...「そうじゃない」
「ミニマルで、余白を大切にして、和のテイストで…」...「うーん、惜しいけどなんか違う」
プロンプトをどれだけ丁寧に書いても、頭の中にあるビジュアルイメージはなかなか伝わりません。
ビジュアルの言語化が難しいのに、AIはテキストしか受け取れない。
この問題を解決しようとして作ったのが Fivia です。
Fiviaとは？
Fivia（フィビア）は、AIに渡すビジュアルコンテキストを管理するツールです。
名前は Figment（想像・イメージの断片）と via（経由して渡す）を組み合わせた造語。集めたビジュアルの断片を整理して、AIに渡す、というコンセプトです。
① Chrome拡張でアートボードに画像をストック
Webブラウジング中に「このトーン、好きだな」と思った画像を、右クリック一発でアートボードに保存できます。
「wabi-sabi」「techno-minimal」「dark UI」などテーマごとにアートボードを分けておくことで、自分だけのビジュアルリファレンスライブラリが育っていきます。Pinterestに近い感覚ですが、AIに渡すことを前提に設計されています。
② MCPでAIにビジュアルコンテキストを渡す
Fiviaの本体はここです。
@fivia/mcp というMCPサーバーを提供しており、Claude Codeなどに接続することでAIがアートボードを参照できるようになります。
// ~/.claude/mcp.json
{
"mcpServers": {
"fivia": {
"command": "npx",
"args": ["-y", "@fivia/mcp"]
}
}
}
MCPツールは2つだけシンプルに：
-
list_artboards— 自分のアートボード一覧を取得 -
get_artboard— 指定したアートボードの画像（base64含む）とメタ情報を取得
AIに画像コンテキストをどう渡すか
「画像URLをそのままプロンプトに貼ればいいのでは？」と思うかもしれません。
ところが実際には、
- AIサービスによってはURLからの画像取得に対応していない（base64入力のみのAPIがある）
- 画像が削除・移動されると取得できなくなる
- 「なぜその画像を参考にしたいのか」という意図が伝わらない
Fiviaの get_artboard はこれに対応して、画像URLとbase64の両方を返します。あわせてアートボード名・説明文・出典情報をメタデータとして付与します。
{
"name": "Wabi-sabi",
"description": "不完全さ、余白、自然素材の質感。過剰な装飾を避ける",
"images": [
{
"url": "https://...",
"base64": "data:image/jpeg;base64,...",
"source_url": "https://example.com/page",
"status": "ok"
}
]
}
アートボードの description（説明文）が重要で、「何を参考にしてほしいか」をここに書いておくことで、画像だけでは伝わらないコンテキストを補完します。
まとめ
Fiviaが解決しようとしたことをまとめると
| 問題 | Fiviaのアプローチ |
|---|---|
| プロンプトだけではスタイルが伝わらない | 画像（base64）+メタデータをMCPで渡す |
| 画像URLが壊れる・使えないAPIがある | base64変換して返す、failed画像はメタデータに記録 |
| インスピレーション収集が散らばる | Chrome拡張でアートボードに集約 |
テキストプロンプトの限界をビジュアルで補う、というシンプルなアイデアを、Chrome拡張・WebApp・MCPサーバーの3点セットで実装しました。
まだMVPですが、Chrome Web StoreへのリリースとMCPサーバーのnpm公開（@fivia/mcp）を進めています。興味があればぜひ試してみてください。