Airship Vibe 项目

Figma 风格可视化编辑器，让 AI 编程代理直接改真实代码

Airship 是一个本地运行的视觉编辑器，为 Claude Code、Codex、OpenCode 等主流 AI 编程代理提供类似 Figma 的可视化操作界面。开发者无需在设计工具和代码编辑器之间来回切换，直接在运行中的 App 上选取元素、描述修改，Airship 会将视觉操作转化为源文件中的真实代码变更。

传统 AI 编程代理在处理 UI 迭代时，往往需要开发者用文字描述"哪个组件的哪个样式要怎么改"，提示词稍有偏差，AI 就会改错文件或猜错选择器。Airship 解决了这个痛点：它通过反向代理在开发服务器前插入一块无限画布，点击屏幕上任意元素，它就能知道该元素对应源代码的哪个文件和哪一行，并将这个精确位置信息连同你的视觉修改意图一起发给 AI 编程代理。

技术实现上，Airship 不需要任何插件，不修改项目的依赖或配置文件，不向外部服务器发送任何代码。它通过读取开发构建时已有的源码映射信息来建立视觉元素与源代码行号之间的对应关系，支持 Tailwind、CSS Modules、styled-components 等各种样式系统，复用项目已有的设计令牌。编辑完成后可一键撤销（Claude Code 由 Airship 直接记录文件历史，Codex/OpenCode 则通过 Git 实现）。

多设备预览是另一个亮点：一次操作，桌面、平板、手机三个视口同时更新，实时观察响应式布局效果，无需手动缩放窗口。所有视口都是真实浏览器渲染，而非模拟帧。

使用方式非常简单：正常启动开发服务器（如 pnpm dev），运行 npx @airshiplabs/cli --target 3000 指向端口，在浏览器中打开 Airship 提供的画布，选元素、描述修改，AI 代理在后台更新源代码。

Airship 目前支持 Vite、Next.js、Remix、Rails 等所有通过 HTTP 提供 HTML 的框架。安全模式下（--safe 参数）可限制危险命令，只允许项目内的文件修改。MIT 许可证，TypeScript 开发。