onlook-dev/onlook

What it solves

Onlook은 시각적 디자인과 프론트엔드 개발 사이의 마찰을 해결합니다. 디자이너와 개발자가 브라우저에서 라이브 웹사이트의 UI를 시각적으로 편집하면서, 해당 변경 사항을 기반이 되는 Next.js 및 TailwindCSS 코드에 자동으로 동기화하여 Figma 디자인을 코드로 수동으로 변환해야 하는 번거로움을 없애줍니다.

How it works

Onlook은 프로젝트 코드를 Web Container에 로드하여 iFrame에서 앱을 제공합니다. 에디터는 코드를 인덱싱하고 인스트루멘테이션(instrumentation)을 수행하여 브라우저의 DOM 요소와 소스 코드의 특정 위치를 직접 매핑합니다. 사용자가 에디터에서 시각적 변경을 수행하면, Onlook은 iFrame의 요소를 업데이트하고 동시에 해당 코드를 수정합니다.

또한 코드 접근 권한이 있는 AI chat을 통합하여 텍스트 또는 이미지 프롬프트를 통해 컴포넌트를 생성하거나 편집할 수 있습니다.

Who it’s for

Next.js 및 TailwindCSS를 사용하여 작업하며, 코드베이스를 떠나지 않고 시각적으로 프로토타입을 만들고 사용자 인터페이스를 구축하고자 하는 AI 네이티브 디자이너 및 프론트엔드 개발자를 위해 설계되었습니다.

Highlights

• Visual-to-Code Sync: 브라우저 DOM에서 요소를 직접 편집하면 변경 사항이 코드에 실시간으로 반영됩니다.
• AI-Driven Creation: 텍스트 또는 이미지 프롬프트를 통해 Next.js 앱 및 컴포넌트를 생성합니다.
• Figma-like Interface: 레이어 브라우징, 브랜드 자산 관리 및 컴포넌트 패널이 포함된 비주얼 에디터가 포함되어 있습니다.
• Developer Tooling: 사이드 바이 사이드 코드 에디터, CLI 명령 실행 및 체크포인트 저장/복구 기능을 제공합니다.
• Rapid Deployment: 공유 가능한 링크를 생성하고 커스텀 도메인을 빠르게 연결할 수 있는 기능이 있습니다.