Image: GitHub
Why it mattersA team stops copying an element description into a separate coding-agent chat and instead selects the element on the live page, so the agent gets the file, the line and the design change in one step.
Airship is an MIT-licensed command-line tool that adds a Figma-style visual canvas on top of a running development server and lets Claude Code, Codex or OpenCode edit the underlying source. The repository was published on 10 August 2026 by GitHub user 0xnyn and has 649 stars in the three weeks since. It is distributed as an npm package, @airshiplabs/cli.
The install adds nothing to the project itself. Airship starts a second process next to the dev server the team is already running, on Vite, Next, Remix, Rails or any framework that serves HTML over HTTP, and hosts the editor on a separate port. No plugin, no build-time hook, no dependency line in the project.
How the canvas works
Each open route of the app becomes a live frame on an infinite canvas, and any element on any frame can be clicked, panned, zoomed, or right-clicked for its element menu. A phone-sized frame and a desktop-sized frame sit side by side, both live and both editable, both editing the same source file. Selecting an element opens an inspector with the box model, the CSS rules that apply to it, and the DOM tree, so a designer can see what the browser is actually drawing before asking for a change.
There is no separate design file to keep in sync with the code because the code is the design file.
What the agent does
Selecting an element and typing a description sends the file path, the line, the current styles and the change request to whichever coding agent is running. Claude Code is included with the install. Codex is also included. OpenCode is available if a team installs it separately with brew install sst/tap/opencode or npm i -g opencode-ai.
Airship reuses the credentials each agent already has on the machine, whether that is an environment variable, an OAuth token from a prior login, or a stored provider key. Undo is Airship's rather than the agent's: it keeps the previous version of every file the agent touches, so a change can be reversed regardless of which agent made it. On Codex and OpenCode that undo pulls from Git, so the project has to be a repository for those two agents.
The --safe flag confines the agent, and the README states that it is not equally strong on all three. Codex gets a real operating-system sandbox that stops writes outside the project folder and disables the network. Claude and OpenCode get a command-check layer that catches rm -rf but cannot understand shell well enough to catch a redirect pointed at another path, and their network access is not fully blocked.
The main problem between a designer and a coding agent right now is that the designer describes an element with words, and the agent has to search for it. A visual canvas that already knows the file and the line removes that step, and the model then reasons about the request rather than about which button was meant. That is worth trying on any team where a non-engineer already knows the production code well enough to say what needs to change.
The main caveat is the sandbox. A default Airship run is the coding agent running with full access to the machine, which is fine for a laptop and not fine for a shared machine. The --safe flag gives real protection only on Codex.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.
