Design Mode

概要

Design Mode は、ライブサイトをデザイン空間に変える Chrome 拡張機能です。視覚的編集でレイアウト・色・間隔・構造を変更し、その差分を MCP 経由で AI コードエージェントへ実コードとして送信します。

特長

• localhost/ステージング/本番を含む任意サイトの編集
• 実差分としてエージェントへ送信、モック不要
• MITライセンスのオープンソース。拡張機能・MCPサーバ・ウェブサイトを GitHub で公開
• Local/Cloud/Self-hosted の3つの MCP 接続モード

活用のヒント

• 実行中のアプリをデザインツール化して、開発サイクルを短縮
• MCP によりエージェントが編集を直接確認できる