디자인 모드

디자인 모드는 Orca 브라우저를 포인터-코드 도구로 전환합니다. 이를 켜고 렌더링된 페이지에서 UI 요소를 클릭하면 해당 요소가 DOM, 계산된 스타일 및 스크린샷과 함께 풍부한 컨텍스트로 에이전트 채팅에 드롭됩니다.

디자인 모드: 버튼을 클릭하면 상담원 채팅으로 이동됩니다.

켜세요

브라우저 툴바에서 Design Mode(디자인 모드) 토글을 클릭하세요. 커서가 선택 도구가 됩니다. 마우스를 올리면 그 아래의 요소가 강조 표시됩니다.

채팅에 참여하세요

요소를 클릭합니다. Orca 캡처:

• 요소의 HTML(외부 및 작은 이웃)
• 계산된 CSS — 색상, 글꼴, 간격.
• 요소의 잘린 스크린샷입니다.
• 개발 모드 소스 맵을 사용할 수 있는 경우 소스 file/line입니다.

이 모든 것이 활성 에이전트 터미널에 하나의 첨부 파일로 제공되며 변경하려는 내용을 입력하면 됩니다.

페이지 주석 검토

주석 트레이를 사용하면 페이지에 여러 메모를 모아 두었다가 에이전트에게 전송할 수 있습니다. 메모 위에 포인터를 올리고 **Edit(편집)**를 선택하면 해당 위치에서 코멘트나 의도를 수정할 수 있습니다. 작업을 마치면 Save(저장) 또는 **Cancel(취소)**을 선택합니다.

결과 사용

에이전트가 Orca 핫 리로드 소스를 편집하면 다시 클릭하여 확인하세요. 이 루프의 가장 엄격한 버전은 영웅 레시피 디자인 모드로 UI 버그 수정입니다.