AI との連携

概要

Fivia MCP を設定すると、Claude はあなたのアートボードの画像を直接参照できます。デザインの雰囲気・スタイル・ブランドトーンを言葉で説明する代わりに、視覚的な参考画像を AI に渡せます。

まだ MCP を設定していない場合は MCP 設定をご覧ください。

Claude に自然な言葉でアートボードを参照するよう伝えます。

「モダン UI 参考」アートボードの画像を見て、
同じ雰囲気でランディングページの構成を提案して

Fivia の「ブランドカラー参考」アートボードを確認して、
このバナーのカラースキームを決めてください

「競合サイト調査」アートボードを見て、共通するレイアウトパターンを
分析して、うちのサービスに活かせる点をまとめて

「参考デザイン」アートボードの画像スタイルに合わせて、
以下のコンポーネントの CSS を書いてください：
[コンポーネントの説明]

「UI スタイル参考」アートボードのカラーパレットを分析して、
Tailwind CSS の設定ファイルに追加するカスタムカラーを提案して

「タイポグラフィ参考」アートボードのフォントスタイルを見て、
同じ雰囲気を再現する Google Fonts の組み合わせを教えて

「ブランドガイドライン」アートボードを確認してから、
以下の新しいデザイン案がブランドの世界観と合っているか評価して：
[デザインの説明またはコード]

「競合スクリーンショット」アートボードの画像を分析して、
各サービスの UX の特徴と差別化ポイントをまとめて

アートボードに詳細な説明を書いておくと、Claude がより正確にコンテキストを理解します。

良い例

モダンなSaaSサービスのランディングページ参考。ダークモード、グラデーション使いのヒーローセクション、明確な料金プラン表示が特徴。技術的で洗練された印象。

あまり良くない例

参考サイト

1 つのアートボードには、一貫したテーマの画像を集めましょう。「全部まとめ」よりも「ミニマル UI だけ」「E コマースのカートUI だけ」のように絞った方が、Claude が意図を正確に把握します。

「レイアウト参考」と「カラー参考」の両方のアートボードを見て、
2 つのスタイルを組み合わせたデザイン案を提案して

Claude は会話のコンテキストに応じて、関連するアートボードを自動的に参照することがあります。アートボード名と説明を適切に設定しておくと、Claude がより適切なタイミングで参照します。