はじめに

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）を進めています。興味があればぜひ試してみてください。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。