0xnyn/airship
Figma like visual editor built for Claude Code, Codex and OpenCode
What it solves
Airship eliminates the need to switch between your code editor and a separate design tool. It provides a visual interface that sits directly on top of your running development server, allowing you to select elements on your page and have an AI agent update your source code automatically.
How it works
Airship acts as a proxy that runs in front of your existing development server (like Vite, Next.js, or Rails). You point the CLI at your local port, and it opens a visual editor in your browser. You can then select elements, describe changes, and choose an AI agent (Claude, Codex, or OpenCode) to apply those changes directly to your files. It supports two modes: a 'canvas' view that displays your app across multiple device frames, and an 'inline' view that overlays the editor directly onto your live page.
Who it’s for
Developers who want to make visual adjustments to their web applications without manually hunting for lines of code or rebuilding their UI in external design software.
Highlights
- Zero-config integration: Requires no plugins, dependencies, or changes to your project's build process.
- Live visual editing: Changes are applied directly to your source files, with support for undoing edits.
- Multi-device canvas: View and edit your application across different screen sizes simultaneously on a single, pannable canvas.
- Privacy-focused: Nothing leaves your machine; there is no account to create and no telemetry data collected.
- Flexible agent support: Works with your existing Claude, Codex, or OpenCode configurations and authentication.
Related
- Project
- Project
- Project
- Project
- Project