0xnyn/airship

해결하는 문제

Airship은 브라우저 기반의 디자인 캔버스에서 UI 요소를 직접 선택하고 AI 에이전트를 사용하여 소스 코드를 직접 편집할 수 있는 코드베이스용 시각적 에디터입니다. 별도의 디자인 툴과 코드 에디터를 오가지 않아도 되므로 전환의 필요성이 사라집니다.

작동 방식

Airship은 기존 개발 서버(Vite, Next, Remix, Rails 등) 앞에 위치하는 프록시입니다. 시각적 인터페이스를 제공하여 요소를 선택하고, Airship은 해당 요소가 생성된 정확한 파일과 줄 번호로 매핑합니다. 이후 통합된 AI 에이전트(Claude Code, Codex, OpenCode)를 사용해 설명에 기반하여 소스 파일을 편집할 수 있습니다.

대상 사용자

코드 내에서 동일한 요소를 수동으로 찾거나 디자인 툴에서 UI를 다시 구축하지 않고도 빠르게 UI 변경을 반복하고 싶은 프론트엔드 개발자와 디자이너.

주요 기능

• 제로 구성: 프로젝트 번들 또는 구성에 플러그인이나 종속성 추가가 필요 없습니다.
• 다중 장치 미리보기: 무한 캔버스에서 데스크톱과 아이폰 등 여러 실시간 프레임을 옆으로 나란히 보고 편집할 수 있습니다.
• 통합된 AI 에이전트: Claude, Codex, OpenCode를 지원하며, 프로젝트 파일을 보호하기 위한 사전 실행 모드(--safe 모드) 옵션 제공.
• 로컬 우선: 계정, 텔레메트리, 외부 서비스 없이 모든 것이 로컬 머신에서 실행됩니다.
• 상세한 인스펙터: CSS 박스 모델 뷰어, DOM 트리 탐색기, 레이아웃 컨트롤 포함.