랜딩 허브
개요
설정 마법사를 완료하면 Kaiju Hub AI 랜딩 허브에 도착합니다. 이곳은 Kaiju Hub AI의 모든 핵심 기능에 한눈에 접근할 수 있는 중앙 대시보드입니다.
프로젝트 허브
프로젝트 허브는 모든 개발 프로젝트를 관리하고 정리하기 위한 중앙 워크스페이스입니다. 여기서 처음부터 새 프로젝트를 만들고, 로컬 머신에서 기존 프로젝트를 가져오고, GitHub에서 직접 저장소를 클론할 수 있습니다.
프로젝트 생성
선호하는 기술 스택과 프레임워크 구성으로 새 프로젝트를 시작합니다.
프로젝트 가져오기
로컬 파일 시스템에서 기존 프로젝트를 가져와 Kaiju Hub AI 내에서 관리합니다.
GitHub에서 클론
GitHub 저장소를 Kaiju Hub AI으로 직접 클론합니다 — 앱을 떠나거나 명령줄을 사용할 필요가 없습니다.
와이어프레임
와이어프레임 섹션에서는 애플리케이션과 웹사이트를 위한 와이어프레임을 생성하고 디자인할 수 있습니다. 캔버스 편집기를 사용하여 수동으로 디자인하거나, AI를 활용하여 자동으로 와이어프레임을 생성할 수 있습니다. 와이어프레임이 준비되면 코드 생성으로 직접 보낼 수 있습니다 — 디자인에서 작동하는 코드까지 하나의 원활한 워크플로우로 진행됩니다.
수동 디자인
내장 캔버스 편집기를 사용하여 UI 컴포넌트를 직접 그리고 배치합니다.
AI 기반 생성
원하는 것을 설명하면 AI가 즉시 와이어프레임 레이아웃을 생성해 줍니다.
와이어프레임을 코드로
완성된 와이어프레임을 코드 생성으로 직접 전송합니다 — 수동 변환이 필요 없습니다.
새 소식
새 소식 섹션에서는 Kaiju Hub AI의 최신 업데이트, 기능 및 공지 사항을 확인할 수 있습니다. 새로운 업데이트가 배포될 때마다 알림을 받아 중요한 변경 사항을 놓치지 않습니다. 새로운 기능, 버그 수정, 개선 사항에 대한 최신 정보를 정기적으로 확인하세요.
블록 라이브러리
블록 라이브러리는 Kaiju Hub AI의 컨텍스트 블록 시스템입니다. API 문서, 코드 스니펫 등 재사용 가능한 컨텍스트 블록을 추가, 저장, 관리할 수 있습니다. 블록을 생성하여 나중에 사용할 수 있도록 저장한 다음, 코드 생성을 위한 컨텍스트가 필요할 때 AI에 직접 전송할 수 있습니다.
지원되는 콘텐츠 유형
React, Solid.js, Vue, Svelte, Angular, HTML, CSS, GLSL 셰이더, Markdown, 일반 텍스트, 이미지 및 비디오.
그룹 생성
블록 라이브러리는 블록을 그룹으로 정리합니다. 그룹을 사용하여 관련 블록을 함께 분류하고 관리할 수 있습니다.
새 그룹 만들기
"새 그룹 만들기" 버튼을 클릭하여 그룹 생성 모달을 엽니다. 카테고리를 선택하고, 그룹 이름을 입력한 후, "그룹 만들기"를 클릭하여 추가합니다.
그룹에 콘텐츠 추가
그룹이 생성되면 파일을 드래그 앤 드롭하거나 그룹에 직접 콘텐츠를 붙여넣어 블록을 채울 수 있습니다.
블록 생성
"새 블록 만들기"를 클릭하여 블록 생성기 뷰를 엽니다. 여기서 세 가지 방법으로 콘텐츠를 추가할 수 있습니다:
수동 입력
생성기 뷰에서 블록 콘텐츠를 직접 작성하거나 편집합니다.
콘텐츠 붙여넣기
블록 생성기에 코드, 텍스트 또는 기타 콘텐츠를 직접 붙여넣습니다.
AI 생성
AI를 사용하여 블록 콘텐츠를 생성합니다. React, GLSL 셰이더, Svelte, HTML, Vue, Angular, Solid.js, CSS를 지원합니다.
AI 기반 블록 생성
AI를 사용하여 블록을 만들 때 다양한 콘텐츠 유형을 생성할 수 있습니다. 코드 외에도 MediaGen이나 CompanyUI를 사용하여 로컬에서 이미지를 만들고 비디오도 생성할 수 있습니다.
AI 직접 편집
AI를 사용하여 기존 블록 항목을 직접 편집합니다. 지시사항을 제공하면 AI가 콘텐츠를 바로 수정합니다.
변형 생성
프롬프트를 입력하고 원하는 변형 수를 지정합니다. AI가 프롬프트를 기반으로 블록 콘텐츠의 여러 대안 버전을 생성합니다.
블록 사용
컨텍스트 저장
API 문서, 코드 스니펫, 디자인 참조 및 기타 컨텍스트 블록을 프로젝트 전반에서 재사용할 수 있도록 저장합니다.
미디어 생성
블록 라이브러리 내에서 직접 이미지, 비디오 및 기타 미디어 자산을 생성하고 저장합니다.
AI에 전송
AI 작업 시 저장된 블록을 컨텍스트로 첨부합니다 — 정확한 코드를 생성하는 데 필요한 정보를 정확히 제공합니다.
리버스 엔지니어링
리버스 엔지니어링은 Kaiju Hub AI의 바운딩 박스 기반 이미지-투-코드 및 이미지-투-와이어프레임 도구입니다. UI 이미지를 업로드하고, 요소 주변에 바운딩 박스를 그리거나 자동 감지하고, 각 박스에 동작을 할당한 후(예: 모달 열기, 섹션으로 이동), 주석이 달린 이미지에서 작동하는 코드 또는 와이어프레임 레이아웃을 생성합니다.
바운딩 박스 주석
이미지의 UI 요소 주변에 바운딩 박스를 그리거나 자동 감지한 다음, 각 박스에 인터랙티브 동작을 할당합니다.
이중 출력
주석이 달린 이미지를 대상 프레임워크용 작동하는 컴포넌트 코드로 변환하거나, 추가 편집을 위한 와이어프레임 레이아웃으로 내보냅니다.