디자이너를 위한 Cursor - 오픈소스 시각적 코드 편집기

Next.js + TailwindCSS로 AI를 활용해 웹사이트, 프로토타입, 디자인을 제작하세요. 브라우저 DOM에서 직접 시각적 편집기로 수정할 수 있습니다. 코드와 함께 실시간으로 디자인하세요. Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow 등의 오픈소스 대안입니다.

🚧 🚧 🚧 Onlook for Web은 아직 개발 중입니다 🚧 🚧 🚧

Onlook for Web을 놀라운 프롬프트-투-빌드(prompt-to-build) 경험으로 만들기 위해 기여자를 적극 모집 중입니다. 제안된 기능과 알려진 이슈의 전체 목록은 open issues에서 확인하시고, 수백 명의 빌더들과 협업하기 위해 Discord에 참여해 주세요.

Onlook으로 할 수 있는 것:

• 몇 초 만에 Next.js 앱 생성
  • 텍스트 또는 이미지로 시작
  • 미리 만들어진 템플릿 사용
  • Figma에서 가져오기
  • GitHub 저장소에서 시작
• 앱을 시각적으로 편집
  • Figma와 유사한 UI 사용
  • 실시간으로 앱 미리보기
  • 브랜드 자산 및 토큰 관리
  • 페이지 생성 및 이동
  • 레이어 탐색 - 이전 Onlook Desktop에서 제공
  • 컴포넌트 감지 및 사용 - 이전 Onlook Desktop에서 제공
  • 프로젝트 이미지 관리 - 이전 Onlook Desktop에서 제공
• 개발 도구
  • 실시간 코드 편집기
  • 체크포인트 저장 및 복원
  • CLI를 통해 명령 실행
  • 앱 마켓플레이스 연결
  • 로컬에서 코드 편집 - 이전 Onlook Desktop에서 제공
• 몇 초 만에 앱 배포
  • 공유 가능한 링크 생성
  • 커스텀 도메인 연결
• 팀과 협업
  • 실시간 편집
  • 코멘트 남기기

Onlook for Desktop (일명 Onlook Alpha)

현재 Onlook Web은 초기 프리뷰 단계입니다. 다운로드 가능한 데스크톱 전자 앱을 찾고 계시다면 Onlook Desktop으로 이동했습니다.

왜 웹으로 전환하는지 알고 싶으신가요? Electron에서 웹으로 마이그레이션 문서를 참고하세요.

시작하기

호스팅 앱 또는 로컬 실행으로 곧 이용 가능합니다.

사용 방법

Onlook은 모든 Next.js + TailwindCSS 프로젝트에서 실행됩니다. 프로젝트를 Onlook으로 가져오거나 편집기 내에서 처음부터 시작하세요.

AI 채팅을 사용하여 작업 중인 프로젝트를 생성하거나 편집하세요. 언제든지 요소를 우클릭하면 코드에서 해당 요소의 정확한 위치를 열 수 있습니다.

새로운 div를 그려넣고 드래그 앤 드롭으로 부모 컨테이너 내에서 재배치하세요.

사이트 디자인과 코드를 나란히 미리 볼 수 있습니다.

Onlook의 편집기 도구 모음을 사용하여 Tailwind 스타일을 조정하고, 객체를 직접 조작하며, 레이아웃을 실험해 보세요.

문서

전체 문서는 docs.onlook.com에서 확인하세요.

기여 방법은 문서의 Onlook에 기여하기를 참고하세요.

작동 방식

1. 앱을 생성하면 코드를 웹 컨테이너에 로드합니다.
2. 컨테이너가 코드를 실행하고 제공합니다.
3. 편집기가 미리보기 링크를 받아 iFrame에 표시합니다.
4. 편집기가 컨테이너에서 코드를 읽고 인덱싱합니다.
5. 요소를 코드 내 위치에 매핑하기 위해 코드를 계측합니다.
6. 요소가 편집되면 iFrame에서 요소를 편집한 후 코드를 수정합니다.
7. AI 채팅도 코드에 접근하고 코드를 이해하고 편집할 수 있는 도구를 보유합니다.

이 아키텍처는 이론적으로 선언적으로 DOM 요소를 표시하는 모든 언어 또는 프레임워크(예: jsx/tsx/html)로 확장 가능합니다. 현재는 Next.js와 TailwindCSS에서 잘 작동하도록 집중하고 있습니다.

전체 과정은 아키텍처 문서에서 확인하세요.

기술 스택

프론트엔드

• Next.js - 풀 스택
• TailwindCSS - 스타일링
• tRPC - 서버 인터페이스

데이터베이스

• Supabase - 인증, 데이터베이스, 스토리지
• Drizzle - ORM

AI

• AI SDK - LLM 클라이언트
• Anthropic - LLM 모델 제공자
• Morph Fast Apply - 빠른 적용 모델 제공자
• Relace - 빠른 적용 모델 제공자

샌드박스 및 호스팅

• CodeSandboxSDK - 개발 샌드박스
• Freestyle - 호스팅

런타임

• Bun - 모노레포, 런타임, 번들러
• Docker - 컨테이너 관리

기여하기

개선을 위한 제안이 있으시면 저장소를 포크하고 풀 리퀘스트를 생성해 주세요. 이슈 열기도 가능합니다.

지침과 행동 강령은 CONTRIBUTING.md를 참고하세요.

기여자

연락처

• 팀: Discord - Twitter - LinkedIn - 이메일
• 프로젝트: https://github.com/onlook-dev/onlook
• 웹사이트: https://onlook.com

라이선스

Apache 2.0 라이선스로 배포됩니다. 자세한 내용은 LICENSE.md를 참고하세요.