0xnyn/airship

Figma like visual editor built for Claude Code, Codex and OpenCode

何を解決するか

Airship は、コードベースのためのビジュアルエディタであり、実行中のアプリケーションで UI 要素を選択し、AI エージェントを使ってソースコードを直接編集できるようにします。デザインツールとコードエディタの間で切り替える必要がなくなります。

動作方法

Airship は、既存の開発サーバー(Vite、Next、Remix、Rails など)の前に配置されるプロキシです。ビジュアルインターフェースを提供し、選択した要素を、それらを生成した正確なファイルと行にマッピングします。その後、統合された AI エージェント(Claude Code、Codex、OpenCode)を使って、説明に基づいてソースファイルを編集できます。

対象ユーザー

UI の変更を手動でコード内を探したり、デザインツールで UI を再構築したりせずに、迅速に反復したいフロントエンド開発者やデザイナー。

特徴

  • ゼロ構成: プロジェクトのバンドルや構成にプラグインや依存関係を追加する必要がありません。
  • マルチデバイスプレビュー: 無限のキャンバス上で、デスクトップや iPhone などの複数のライブフレームを横並びで表示・編集できます。
  • 統合された AI エージェント: Claude、Codex、OpenCode をサポートし、プロジェクトファイルを保護するためのサンドボックス実行(--safe モード)オプションも提供。
  • ローカルファースト: アカウント、テレメトリ、外部サービスの必要なしに、すべてがマシン上で実行されます。
  • 詳細なインスペクタ: CSS ボックスモデルビューア、DOM ツリーナビゲータ、レイアウトコントロールを備えています。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト