onlook-dev/onlook
AI 기반 시각 에디터로 Next.js + TailwindCSS 프로젝트를 브라우저에서 직접 디자인하고 코드를 수정할 수 있는 오픈소스 도구
25,938+0이번 주1,996301TypeScript
데모·홈페이지 열기onlook.com중간맛 분석
TypeScript 기반 Next.js + TailwindCSS 전문 에디터로, CodeSandbox SDK로 샌드박스 환경을 제공하고 Supabase로 인증·저장을 관리합니다. 호스팅된 버전(onlook.com)을 바로 쓸 수 있으며, 로컬 실행도 지원합니다. Figma 같은 UI로 드래그드롭 레이아웃 변경, 실시간 코드 에디터, 브랜칭으로 디자인 실험, AI 채팅으로 자동 수정 등이 가능합니다. 데모 영상이 YouTube에 있습니다.
이런 레포예요
이럴 때 쓰면 좋아요
- Figma 디자인을 Next.js 코드로 빠르게 변환할 때
- 프로토타입을 AI 채팅으로 빠르게 구현하고 시각적으로 다듬을 때
- 코드와 디자인이 항상 동기화된 프로젝트 관리가 필요할 때
핵심 기능
Figma 같은 시각 에디터로 DOM 직접 편집AI 채팅으로 자동 코드 생성·수정코드와 프리뷰 실시간 동기화
대안 대비 차별점
완전 오픈소스이면서 코드 추적 기술로 시각 편집과 코드 일관성을 자동 보장하는 점이 Bolt.new, V0 같은 상용 도구와 다릅니다.
준비물
- Node.js 또는 Bun
- Next.js 프로젝트
별 추이 · 7일
25,938+0 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 46/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2024년 생성
AI가 README 기반으로 요약했습니다 · 원문 보기