코드 및 와이어프레임 생성
개요
바운딩 박스로 이미지에 주석을 달고 동작을 할당하면 작동하는 컴포넌트 코드 또는 와이어프레임 레이아웃을 생성할 수 있습니다. AI가 바운딩 박스 위치, 요소 유형, 동작 지시를 사용하여 정확한 출력을 생성합니다.
AI 어시스턴트 사이드바
AI 어시스턴트 패널은 코드 또는 와이어프레임 생성을 구성하고 트리거하는 데 사용되는 오른쪽 사이드바입니다. 다음 컨트롤이 포함됩니다:
비전 모델 선택기
이미지 분석 및 출력 생성에 사용할 AI 비전 모델을 선택합니다. 모델마다 다른 수준의 세부 정보와 정확도를 생성할 수 있습니다.
프레임워크 선택기
코드 생성을 위한 대상 프레임워크를 선택합니다 (예: React, Vue, Svelte). 생성된 코드는 선택한 프레임워크의 구문과 패턴을 사용합니다.
컴포넌트 / 와이어프레임 탭
주석이 달린 이미지에서 컴포넌트 코드(Components 탭) 또는 와이어프레임 레이아웃(Wireframes 탭) 생성 간 전환합니다.
이미지 그룹
현재 리버스 프로젝트의 모든 이미지 그룹을 나열합니다. 그룹을 선택하여 이미지를 미리 보고 생성을 구성합니다. 각 그룹은 이미지 수를 표시합니다.
블록 생성
AI 생성 프로세스를 시작하려면 클릭합니다. AI가 바운딩 박스 주석 및 동작과 함께 선택한 그룹의 이미지를 분석하여 출력을 생성합니다.
출력 모드
코드 생성
주석이 달린 이미지를 대상 프레임워크(React, Vue, Svelte 등)의 작동하는 컴포넌트 코드로 변환합니다. 생성된 코드에는 바운딩 박스에 정의한 레이아웃, 스타일링, 동작이 포함됩니다.
와이어프레임 생성
주석이 달린 이미지를 와이어프레임 도구에서 열리는 와이어프레임 레이아웃으로 내보냅니다. 각 바운딩 박스는 추가로 다듬고, 재배치하며, 다른 화면에 연결할 수 있는 와이어프레임 요소가 됩니다.
코드 생성 기능
프레임워크 선택
생성하기 전에 대상 프레임워크를 선택합니다. 지원되는 프레임워크에는 React, Vue, Svelte, SolidJS, Angular 등이 포함됩니다.
동작 매핑
바운딩 박스에 할당된 동작이 출력에서 이벤트 핸들러, 탐색 로직, 모달, 기타 인터랙티브 코드로 변환됩니다.
레이아웃 정확도
AI가 이미지의 바운딩 박스 위치와 크기를 사용하여 원래 시각적 디자인과 밀접하게 일치하는 레이아웃을 생성합니다.
블록에 저장
생성된 컴포넌트를 프로젝트 전반에서 재사용하기 위해 블록 라이브러리에 직접 저장할 수 있습니다.
프로젝트에 추가
생성된 코드를 새 컴포넌트 파일로 현재 프로젝트에 직접 삽입합니다.
팁
최상의 결과를 위해 명확한 UI 요소가 있는 고해상도 이미지를 사용합니다. 보다 정확한 코드 생성을 위해 각 요소 주변에 바운딩 박스를 꼭 맞게 그립니다. 모호한 설명보다 구체적인 동작을 할당합니다 — "does something"보다 "opens signup modal"이 더 효과적입니다. AI는 표준 웹 레이아웃과 일반적인 UI 패턴에서 가장 잘 작동합니다.