준비가 되면, 안티그래비티로 이동해서 실제 작동하는 웹사이트로 만들어봐요.

반중력 기능을 사용하기 전에, 먼저 스위치를 반중력과 연결하는 단계부터 시작해야 합니다.

MCP 서버를 설정해 보겠습니다. 시작하려면 Stitch를 열고 MCP 설명서를 참조해 주세요.

설정 페이지에서 API 키를 생성하신 후, 복사해 주시기 바랍니다.

곧 필요할 것 같습니다. 다음으로, 열어주시겠습니까?

저희의 무중력 IDE로 이동하신 후, MCP 서버 섹션을 찾아주세요.

설정 패널을 여십시오.

MCP 서버 JSON 파일을 붙여넣고, API 세부 정보를 본인의 유효한 키나 URL로 교체해 주십시오.

설정을 저장하고 새로 고침을 하여 연결을 설정해 주세요. 연결되면 정상적으로 연결되었는지 확인해 주십시오.

스티치 도구들이 보이실 겁니다. 이제 스티치 프로젝트 목록을 확인하시고, 해당 화면을 불러오실 수 있습니다.

이러한 디자인을 활용하여 React 웹사이트를 생성할 수 있는 간단한 프롬프트를 제공해 주시면 감사하겠습니다.

자동으로 컴포넌트, 구조 및 자산을 생성할 수 있습니다.

보내기를 클릭하시면 몇 초 내에 Antigravity가 Stitch에서 디자인한 정확한 화면을 생성합니다.

지금 단계에서는 디자인을 다시 시작할 단계가 아닙니다. 작은 변화를 신중하게 계획하고 진행하는 것이 중요합니다.

몇 가지 수정해야 할 부분은 사람이 직접 확인해야 할 것 같습니다. 그리고 나서 다음 단계로 넘어가도록 하겠습니다.

지금 시점에서는 사소한 수정만 필요합니다.

이미지 플레이스홀더를 교체하고, 알란 멘켄 텍스트 아래쪽에 약간의 패딩을 추가하는 것과 같은 작업들이 필요합니다.

다음으로, 추가해 보겠습니다.

2차 섹션입니다. 이 아이콘을 클릭하면 인터페이스가 다른 섹션으로 전환되어야 합니다.

스티치에서 제작했던 버전과 비슷하게 만들고 싶습니다. 그를 위해 해당 화면의 ID를 사용해 주세요.

Stitch 디자인을 하고, 섹션을 생성하기 위한 프롬프트를 제공하세요. 보통 완벽한 결과가 나오지는 않으니, 예상대로 될 때까지 몇 번 반복해야 할 거예요.

단일 프롬프트에서 시작하므로 레이아웃과 동작이 일치할 때까지 몇 번의 반복을 거쳐야 할 것으로 예상됩니다.

귀하의 의도하신 디자인을 구현하신 후, 양쪽 섹션이 모두 완료되면 됩니다.