Design In The Browser(Dosmos)

Design In The Browser는 AI 지원 시각적 프런트엔드 워크플로로 시작해, 지금은 Dosmos라는 이름으로 브라우저, 코드 편집기, 통합 터미널, Chrome DevTools를 한 창에 모은 무료 오픈 소스 데스크톱 앱으로 제공됩니다. 핵심 발상은 단순합니다. 어떤 버튼이나 카드를 바꾸고 싶은지 긴 문장으로 설명하는 대신, 실행 중인 페이지에서 그 요소를 클릭하면 도구가 소스 파일, 컴포넌트 이름, 줄 번호와 함께 정확한 요소를 AI 에이전트에 넘겨줍니다.

Dosmos는 이미 사용 중인 명령줄 AI 코딩 에이전트(Claude Code, Cursor, Codex, Antigravity, Qwen) 위에서 동작하며, 자체 모델을 내장하지 않고 별도의 AI 구독도 필요로 하지 않습니다. 단일 클릭 외에도 시각적 맥락을 주는 영역 선택, 여러 변경을 모아 보내는 멀티 편집 큐, 스크린샷을 터미널로 끌어와 파일 경로가 아닌 이미지로 참조하게 하는 기능을 제공합니다. 내장 편집기는 클릭한 요소의 소스를 정확한 줄에서 열고, 컴포넌트 이름, 속성, 제목, 텍스트, URL을 교차 확인하는 스마트 소스 매칭을 수행합니다.

또한 Tailwind 디자인 토큰 팔레트 덕분에 AI는 하드코딩된 16진수 대신 토큰을 작성합니다. ALT 클릭 CSS 인스펙터, 공간 및 베이스라인 그리드, 애니메이션 정지, 데스크톱/태블릿/모바일 뷰포트 즉시 전환도 갖췄습니다. 설정 가이드는 코딩을 모르는 사람도 새 컴퓨터에서 실행되는 프로젝트까지 안내합니다. Dosmos는 macOS 13 이상(Apple Silicon 및 Intel)과 Windows 10 이상에서 사용할 수 있고, 지원되는 AI 코딩 에이전트 하나가 필요하며, 모든 처리는 로컬에서 이루어집니다.