0xnyn/airship

解決的問題

Airship 是一個針對程式碼庫的視覺化編輯器，允許您透過瀏覽器為基礎的設計畫布直接修改 UI。它消除了在獨立設計工具與程式碼編輯器之間切換的需要，讓您可以在執行中的應用程式中選擇元素，並使用 AI 代理透過描述來應用變更。

作法原理

Airship 作為一個代理，位於您現有的開發伺服器（支援 Vite、Next、Remix、Rails 等）前方。它提供一個視覺化介面，讓您可以選擇元素，Airship 隨後將這些元素對應到產生它們的精確檔案與程式碼行。接著，您可以使用內建的 AI 代理（Claude Code、Codex 或 OpenCode）根據您的描述對原始碼檔案進行編輯。

適用對象

希望快速迭代 UI 變更，而無需手動在程式碼中尋找相同元素，或在設計工具中重建 UI 的前端開發人員與設計師。

主要特色

• 零設定： 不需向專案套件或設定中新增任何外掛或相依性。
• 多裝置預覽： 在無限畫布上並排檢視與編輯多個即時畫面（例如桌面與 iPhone）。
• 整合 AI 代理： 支援 Claude、Codex 與 OpenCode，並提供沙盒執行選項（--safe 模式），以保護您的專案檔案。
• 本地優先： 所有運作皆在您的機器上執行，無需帳號、遙測或外部服務。
• 詳細檢視器： 包含 CSS 方塊模型檢視器、DOM 樹狀導覽器與版面控制。