Domscribe
Domscribeは、AIコーディングエージェントがフロントエンド要素を直接見て変更できるようにすることで、実行中のWebアプリケーションとそのソースコード間のギャップを埋めるオープンソースのピクセルツーコード開発ツールです。
https://domscribe.com/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年03月31日
Domscribeとは
Domscribeは、AIコーディングエージェントがリアルタイムでフロントエンド要素と対話できるようにすることで、コードとUIの間の断絶を解決する開発ツールです。これは、実行中のWebアプリケーションとそのソースコード間のブリッジとして機能し、ビルド時に安定したID、深いランタイムコンテキストキャプチャ、およびフレームワークに依存しない実装を備えています。MITライセンスの下で、DomscribeはMCP互換のエージェントと統合され、React、Vue、Next.js、Nuxtなどの主要なフレームワークをサポートします。
Domscribeの主な機能
Domscribeは、フロントエンドUIとAIコーディングエージェント間のギャップを埋めるオープンソースツールです。DOM要素とソースコード間の双方向通信を提供します。ビルド時に安定したIDを注入し、ランタイムコンテキスト（props、state、DOM）をキャプチャし、エージェントがライブUIの状態をクエリし、正確なソースロケーションマッピングでUIの変更を実装できるようにします。フレームワークに依存せず、本番環境への影響はゼロです。
ビルド時の安定したID: AST解析を介して決定論的なdata-ds属性を注入し、ランタイムヒューリスティックなしでホットモジュールリロードと高速リフレッシュ全体で安定性を確保します
ディープランタイムコンテキストキャプチャ: ReactファイバーウォーキングとVue VNodeインスペクションを通じてライブprops、state、DOMスナップショットを抽出し、完全なコンポーネントコンテキストを提供します
双方向UI-コードマッピング: UI要素をクリックしてソースコードを見つけたり、ソースの場所をクエリしてライブUIレンダリングを表示したりできます
フレームワークに依存しない統合: 複数のフレームワーク（React、Vue、Next.js、Nuxt）およびバンドラー（Vite、Webpack、Turbopack）で動作し、MCP互換性を維持します
Domscribeのユースケース
AI支援UI開発: AIエージェントがコードベース内の要素の正確なコンテキストと場所を理解することにより、正確なUI変更を行うことを可能にします
自動バグ修正: エージェントが視覚的な問題をソースコードの場所に直接マッピングすることにより、UIの問題を迅速に特定して修正できるようにします
開発ワークフローの最適化: UIとコード間の手動検索とコンテキストスイッチングを排除することにより、開発プロセスを合理化します
メリット
本番ビルドでデバッグ機能がすべて削除されているため、本番環境への影響はゼロです
包括的なフレームワークサポートとバンドラー互換性
組み込みのPII編集による強力なセキュリティ
デメリット
現在アルファ版であり、いくつかのテストが失敗しています
機能するには開発サーバーが実行されている必要があります
各プロジェクトに追加のセットアップと構成が必要です
Domscribeの使い方
Domscribeをインストール: プロジェクトディレクトリで「npx domscribe init」を実行します。これにより、フレームワークが自動的に検出され、必要な構成が設定されます。
ブラウザオーバーレイを有効にする: インストール後、Domscribeは実行中のWebアプリケーションにオーバーレイを追加し、DOM要素と対話できるようにします。
要素をクリックして変更を加える: ブラウザオーバーレイを介して実行中のアプリ内の任意の要素をクリックします。要素が強調表示され、変更のために選択されます。
必要な変更を説明する: 選択した要素にどのような変更を加えたいかを平易な英語で入力します（例：「ボタンを青色にする」）。指示を送信します。
エージェントの変更を確認する: Domscribeは、要素のソースの場所とコンテキストをキャプチャし、コーディングエージェントに中継します。エージェントは、正しいソースファイルと行に変更を実装します。
変更を確認する: 変更は、WebSocketリレーを介してリアルタイムで反映されます。UIとソースコードの両方で変更が正しく行われたことを確認できます。
アノテーションにアクセスする: すべてのアノテーションは、プロジェクトの.domscribe/annotations/ディレクトリにJSONファイルとして保存され、REST APIを介してアクセスできます。
本番環境へのデプロイ: 本番ビルドの場合、Domscribeはすべてのdata-ds属性、オーバーレイスクリプト、およびリレー接続を自動的に削除し、本番環境への影響をゼロにします。
Domscribeのよくある質問
Domscribeは、AIコーディングエージェントとフロントエンド開発の間のギャップを埋めるオープンソースツールです。ビルド時の安定したID、詳細なランタイムコンテキストのキャプチャ、ソースコードとDOM要素間の双方向クエリを提供することにより、エージェントがフロントエンドを見て操作できるようにします。
Domscribeに類似した最新のAIツール
Gait
Gaitは、AI支援コード生成とバージョン管理を統合するコラボレーションツールであり、チームがAI生成コードのコンテキストを効率的に追跡、理解、共有できるようにします
invoices.dev
invoices.devは、開発者のGitコミットから直接請求書を生成する自動請求プラットフォームで、GitHub、Slack、Linear、Googleサービスとの統合機能を備えています。
EasyRFP
EasyRFPは、RFP（提案依頼）の応答を効率化し、深層学習技術を通じてリアルタイムのフィールド表現型を可能にするAI駆動のエッジコンピューティングツールキットです
Cart.ai
Cart.aiは、コーディング、顧客関係管理、ビデオ編集、eコマースの設定、カスタムAI開発を含む包括的なビジネス自動化ソリューションを提供するAI駆動のサービスプラットフォームで、24時間365日のサポートがあります
Domscribeに似た人気のAIツール
GitHub Copilot Chat
GitHub Copilot Chatは、自然言語の対話、リアルタイムのコード提案、そしてサポートされているIDEおよびGitHub.com内での文脈に応じた支援を提供するAI駆動のコーディングアシスタントです
CopilotForXcode
CopilotForXcodeは、Xcode内でAI駆動のコード提案、チャット支援、プロンプトからコードへの機能を提供するXcodeソースエディタ拡張機能です。
BrowserAI
BrowserAI is an open-source library that enables running local Large Language Models (LLMs) directly in web browsers with WebGPU acceleration, offering privacy-focused AI capabilities without requiring server infrastructure.
OpenAI Codex CLI
OpenAI Codex CLIは、ターミナルで実行される軽量なオープンソースのコーディングエージェントであり、開発者は自然言語をコード実行に変換し、コードを実行し、ファイルを操作し、バージョン管理下で反復処理できるChatGPTレベルの推論を提供します。