Google Stitch와 Antigravity를 활용한 자율형 앱 개발 워크플로우

• •Stitch는 단일 프롬프트로 클린한 프로덕션용 UI를 생성한다
• •Antigravity는 자율적으로 코드를 리팩터링하고 실행하는 기능을 갖췄다
• •두 도구의 결합은 디자인과 개발 사이의 수동 작업을 제거한다

Stitch는 Figma나 Google AI Studio와 연동되는 디자인 도구이며, Antigravity는 에이전트가 직접 파일 시스템에 접근하여 코딩하는 환경을 제공한다.

• •Stitch MCP는 UI 구조 정보를 에이전트에게 전달하는 브리지이다
• •Agent Skills는 디자인을 코드로 변환하는 구체적인 행동 양식을 정의한다
• •디자인 시스템의 자동 문서화와 유효성 검사가 가능하다

MCP는 서로 다른 AI 도구와 모델이 데이터를 주고받기 위한 표준 프로토콜이다.

• •Antigravity 내 MCP 스토어에서 Stitch 서버를 직접 설치한다
• •Stitch UI에서 생성한 API 키로 에디터와 디자인 도구를 연결한다
• •연결 후 에이전트는 Stitch 프로젝트 목록을 조회하고 제어할 수 있다

API 키는 도구 간의 안전한 데이터 통신을 위해 필요하며 Stitch 설정 페이지에서 발급받을 수 있다.

• •npx skills add 명령어로 필요한 에이전트 능력을 개별적으로 추가한다
• •글로벌 설치를 통해 모든 프로젝트에서 해당 스킬을 재사용할 수 있다
• •에이전트는 설치된 스킬 목록을 확인하고 상황에 맞는 도구를 선택한다

에이전트 스킬은 특정 작업을 수행하기 위해 미리 정의된 도구 모음으로, 에이전트의 기능을 확장한다.

• •단일 프롬프트로 디자인, 파일 구조 설계, 코딩이 동시에 진행됐다
• •에이전트가 스스로 디자인 시스템 문서를 작성하고 코드를 검증했다
• •npm run dev 명령어로 즉시 실행 가능한 수준의 결과물이 도출됐다

Gemini 3 Pro 모델을 사용하여 에이전트의 추론 능력을 극대화했다.

• •한 번에 최대 5개의 디자인 변형을 생성하여 선택할 수 있다
• •캔버스 내 주석 및 하이라이트 기능을 통해 정밀한 수정이 가능하다
• •디자인 시스템 기반의 일관된 UI 요소를 자동으로 생성한다

Stitch 캔버스는 시각적인 피드백을 중시하는 사용자에게 적합한 인터페이스를 제공한다.