Electron製AIブラウザに「Design Harvester」機能の実装：デザイン資産の抽出・再構築プロセスを解説
本記事は、Electronフレームワークを用いて開発されたAIブラウザに「Design Harvester」という革新的な機能を組み込んだ経緯と技術的な詳細を解説しています。この機能の目的は、単なるWebページのスクリーンショット保存に留まらず、ブラウザ上のWebページからデザインの構造（HTML/CSS）を抽出し、AI（Gemini）を用いて「デザイン言語」として学習させ、元のサイトをコピーしない別デザインとして再構築し、デザイン資産として保存・アップロードすることにあります。
具体的なプロセスとして、ユーザーが明示的に「デザイン素材として処理する」を選択した際に、Design Harvesterが「Design mode」で動作します。このモードでは、WebViewからJavaScriptを実行し、指定されたセレクタまたはbody全体からHTMLとCSSルールを収集します。収集したデータは、そのまま保存するのではなく、AIに再構築を依頼するための「材料」として扱われます。
AIへの再構築プロセスでは、プロンプトを通じて「元のサイトをコピーしない」「元のブランド名を使わない」「架空の会社として作り直す」といった強い制約をかけ、デザインの雰囲気や階層といった「デザイン言語」のみを抽出・学習させることを目指しています。AIの出力は、機械的に処理しやすいよう、HTMLコードブロックとCSSコードブロックの2つの形式に固定されます。
さらに、生成されたデザイン資産はローカルフォルダに「index.html」「style.css」として保存されるほか、参照元URLやカテゴリを記録した「source.txt」が添付されます。効率的なデザイン収集のため、Google Apps Script（GAS）とスプレッドシートをキューとして利用し、一括処理の仕組みも構築されています。最終的に、生成されたデザインはVibeUIというプラットフォームへアップロードされ、検索API用のデータとして活用される一連の流れが実現されています。また、記事後半では、AIブラウザの設計思想として、Main/Preload/Rendererの役割分担や、AIの操作をアクションタグで制御し、危険な操作には確認を挟むなど、「AIに何をさせるか」よりも「AIが勝手に何をできないようにするか」という境界設計の重要性が強調されています。
背景
WebブラウザにAI機能を組み込む際、単なる情報表示に留まらず、ユーザーが参照したデザインや情報を「資産」として抽出・再利用する仕組みが求められています。本記事は、その課題に対し、デザインの構造を抽出・再構築し、デザインアセットとして管理する具体的な技術的アプローチを提示しています。
重要用語解説
- Design Harvester: Webページからデザインの構造（HTML/CSS）を抽出し、AIを用いて別デザインとして再構築する機能。単なるコピーではなく、デザイン言語の抽出を目的としています。
- Electron: デスクトップアプリケーションをWeb技術（HTML/CSS/JavaScript）で構築するためのフレームワーク。AIブラウザのような複雑なUIを持つアプリ開発に利用されています。
- WebView: Electronなどの環境内でWebコンテンツを表示するためのコンポーネント。本記事では、このWebViewからJavaScriptを実行し、ページの内容（HTML/CSS）を取得しています。
今後の影響
本技術は、デザイン業界やコンテンツ制作のワークフローに大きな影響を与えます。Web上のインスピレーションを単なる「参考」で終わらせず、構造化された「再利用可能な資産」として体系的に収集・管理できるため、デザインの効率的な開発サイクルを確立する可能性を秘めています。今後のAIエージェントの進化に不可欠な「入力データ収集の入口」となるでしょう。