Airship 是一个面向本地开发环境的可视化代码编辑器 CLI，可理解为“给真实运行中的 Web 应用加上一层 Figma 式画布”。开发者启动自己的 dev server 后，用 Airship 代理到该端口，即可在浏览器中点击页面元素、查看 DOM/CSS/布局信息，并通过 Claude Code、Codex 或 OpenCode 等 AI 编程代理直接修改源码、查看 diff、撤销变更。它不需要安装项目插件，也不会把依赖加入业务项目，主打本地运行、无账号、无遥测、低侵入式的 AI 辅助前端编辑体验。
适用领域
前端开发工具 / AI 编程助手 / 可视化编辑器 / Web UI 调试 / 低代码/可视化开发 / 开发者效率工具 / 设计到代码 / 本地开发代理
配置难度
中等。基础使用只需启动 dev server 并运行 npx @airshiplabs/cli --target 端口，门槛较低；但要稳定使用 AI agent、配置认证、理解 sandbox 安全差异、处理 diff/undo 和团队工作流，则需要一定前端工程和 AI 编程工具经验。
商业价值
对前端团队和产品型开发者有较高效率价值，尤其适合频繁调整 UI、响应式布局和视觉细节的场景。它把真实页面检查、设计画布和 AI 代码修改整合在一起，可减少在浏览器 DevTools、设计工具和代码编辑器之间来回切换的成本。对于中国开发团队，价值主要体现在提升原型迭代、样式调整和 AI 辅助开发效率；但落地时需重点评估外部模型/API 可用性、安全权限、代码审查流程和企业合规要求。
01
技术亮点
- 低侵入：不需要插件、不修改业务依赖、不改变构建配置，也不会把代码加入 bundle。
- 真实页面编辑：每个 frame 都是真实浏览器窗口，不是设计稿或模拟 UI。
- AI 直接改源码：点击元素后可让 Claude Code、Codex 或 OpenCode 根据上下文修改源文件。
- 支持多设备画布：桌面和手机画面可并排展示，适合响应式布局调整。
- 支持 canvas 与 inline 两种模式，可在无限画布和页面内浮层之间切换。
- 内置 Inspector：支持查看 Edit、CSS、DOM 等信息，帮助定位布局、样式和元素结构。
- 本地优先：README 声称无账号、无遥测、无云服务，变更过程不离开本机。
- 支持 diff 和 undo：AI 修改后可查看差异，不满意可以撤销。
- 支持 --exec 自动启动和停止 dev server，简化日常开发命令。
- MIT 许可证，商业和个人项目使用门槛较低。
02
目标用户
- 前端工程师
- 全栈工程师
- 使用 Claude Code、Codex 或 OpenCode 的 AI 编程用户
- 需要快速调整 UI 的产品型开发者
- 设计师与工程师协作团队
- 维护 React、Vue、Next.js、Vite、Remix、Rails 等 Web 项目的开发团队
- 希望在真实页面上直接修改样式和布局的独立开发者
03
配置要求
- 需要 Node.js 环境。
- 需要一个可通过 HTTP 访问的本地开发服务器，例如 Vite、Next.js、Remix、Rails 或其他能输出 HTML 的服务。
- 默认通过 --target 指定业务 dev server 端口；如未指定，可从 package.json 推断。
- 可选配置文件：运行 airship init 生成 airship.config.json。
- Claude 模式需要 ANTHROPIC_API_KEY、CLAUDE_CODE_OAUTH_TOKEN 或已有 claude 登录信息 ~/.claude。
- Codex 模式需要 CODEX_API_KEY、OPENAI_API_KEY 或 codex login 生成的 ~/.codex/auth.json。
- OpenCode 模式需要本机 PATH 中存在 opencode binary，并配置对应 provider key 或完成 opencode auth login。
- OpenCode 可通过 brew install sst/tap/opencode 或 npm i -g opencode-ai 安装。
- 使用 codex 或 opencode 的 undo 功能时，项目最好是 Git 仓库，因为它们需要从 Git 获取之前版本。
- 如需更安全的执行环境，建议使用 --safe；其中 codex 的 --safe 提供更强的真实沙箱隔离。
04
适用场景
- 在真实运行的本地页面上选择元素，并用自然语言让 AI 修改源码
- 同时查看桌面端和移动端画面，在一个画布中调整响应式 UI
- 快速修改按钮、图标、间距、布局、CSS 规则等界面细节
- 通过 DOM、CSS、Inspector 面板定位元素来源和样式来源
- 让 AI agent 执行局部代码变更，并在接受前查看 diff
- 在不引入项目插件、不修改构建配置的情况下给现有项目增加可视化编辑能力
- 对 Next.js、Vite、Remix、Rails 等本地 Web 服务进行 UI 调试和迭代
- 用 --exec 启动并托管 dev server，统一管理开发服务和可视化编辑器
05
部署与配置
- 确保本机已安装 Node.js，并能正常运行目标 Web 项目的开发服务器。
- 在项目目录中启动业务应用，例如：pnpm dev，假设服务运行在 http://localhost:3000。
- 使用 npx 直接运行 Airship：npx @airshiplabs/cli --target 3000。
- 也可以全局安装：npm i -g @airshiplabs/cli，然后运行 airship --target 3000。
- 如需让 Airship 同时启动 dev server，可运行：airship --exec "pnpm dev"。
- 选择 AI 代理，例如：airship --target 3000 --agent codex --safe。
- 如果环境异常，可运行 airship doctor 检查 node、配置、git、agent、dev server 等状态。
06
风险与注意事项
- 默认 agent 非沙箱运行，拥有与终端中运行代理相同的文件写入和网络访问权限，存在误改文件或执行危险命令的风险。
- 不同 agent 的 --safe 安全强度不一致；只有 codex 提供真实沙箱，claude 和 opencode 更多依赖 Airship 的检查逻辑。
- AI 自动修改源码可能产生不可预期的代码质量、架构一致性或安全问题，仍需要人工 review。
- 项目星标约 342，属于较早期或小众工具，生态成熟度、长期维护稳定性需要观察。
- 主要依赖外部 AI agent 的认证、模型能力和成本；国内开发者可能受网络、API 可用性、付费方式影响。
- 对复杂前端框架、非标准构建流程、SSR/CSR 混合页面的元素到源码映射效果可能不稳定。
- Codex 和 OpenCode 的 undo 对 Git 仓库有依赖，非 Git 项目体验会受限。
- 在企业内网或安全合规环境中，需要额外评估 AI 代理访问代码和网络的权限边界。
2026-08-15
第27名
新收录 · github_search
2026-08-14
第26名
新收录 · github_search
2026-08-13
第25名
新收录 · github_search
