102.7K+다운로드
Antigravity OpenDesign

OpenDesign에서
Antigravity(으)로
디자인하기.

OpenDesign에서 Antigravity로 인터페이스를 디자인하는 방법: 입력으로 사용하는 스크린샷, 매 단계를 검증하는 통합 브라우저, brief부터 검토된 파일까지 이어지는 회원가입 플로우 작업 하나, 그리고 시작하기 전에 알아야 할 한계까지 다룹니다.

OpenDesign 다운로드 설정으로 이동

이 ANTIGRAVITY 가이드로 들어가는 세 가지 경로

Antigravity를 위한 시작점 선택

이 가이드 · UI 디자인

Antigravity로 제품 인터페이스 구축하기

이 워크스루는 브리프, 참고 자료, 디자인 규칙 및 검토된 HTML 아티팩트를 다룹니다.

이 가이드 읽기 설정

처음부터 Antigravity 설정하기

클린 설치에서 UI를 구축하고 검증하는 Antigravity 에이전트까지의 완전한 경로.

설정으로 이동 비교

Antigravity를 다른 에이전트와 비교하기

디자인 작업에서 Antigravity가 Codex, Claude Code, Cursor와 어떻게 비교되는지, 그리고 다른 워크플로우가 더 나은 선택인 경우.

비교 보기
이 페이지에서 예시
  1. 예시
  2. 적합성
  3. 호환성
  4. 설정
  5. 워크플로
  6. 참고 자료
  7. 한계
  8. FAQ

완전한 Antigravity 디자인 작업 1건

하나의 Antigravity 디자인 작업: 브리프부터 인터페이스까지

핸드오프부터 완료 검사까지 추적한 하나의 작업: Antigravity에 제공하는 브리프와 제약 조건, 반환되는 아티팩트, 그리고 완료라고 부르기 전에 여전히 해야 할 검토. 아래 인터페이스는 이 페이지를 위해 만든 예시이며, 기록된 Antigravity 실행이 아닙니다.

1디자인 브리프와 제약 조건

브리프

팀 제품 가입을 세 단계로 디자인하세요: 계정, 워크스페이스, 팀원 초대. 핸드오프 전에 데스크톱 및 휴대폰 너비에서 통합 브라우저로 각 단계를 확인하세요.

  • 디자인 시스템OpenDesign 페이퍼 캔버스 — Albert Sans, 단일 녹색 악센트
  • 브레이크포인트1440px 데스크톱, 390px 모바일, 가로 스크롤 없음
  • 인터랙션단계 탐색, 인라인 유효성 검사, 초대 건너뛰기 경로, 키보드 포커스 순서
  • 출력물안정적인 data-od-id 훅이 있는 단일 자체 포함 HTML 파일

2누가 무엇을 하는가: 당신, Antigravity, 그리고 OpenDesign

  • 사용자

    당신은 브리프를 작성하고, 디자인 시스템을 선택하며, 승인 기준을 설정합니다.

  • Antigravity

    Antigravity는 레이아웃을 계획하고 HTML, CSS, JavaScript를 작성한 다음 요청에 따라 수정합니다.

  • OpenDesign

    OpenDesign은 디자인 시스템과 스킬을 제공하고, 미리보기를 렌더링하며, 각 버전을 프로젝트 파일로 유지합니다.

  • 검토

    핸드오프 전에 시각적 계층 구조, 8px 그리드의 간격, 두 브레이크포인트, 모든 상호작용을 확인합니다.

3Antigravity 아티팩트: 1440px 및 390px에서의 가입 흐름

Antigravity 아티팩트: 1440px 및 390px에서의 가입 흐름 — 데스크톱
예시

4인수인계 전 검토

레이아웃

그리드와 여백

스테퍼, 양식, 요약은 8px 그리드에 맞춰 정렬됩니다. 요약은 양식의 높이를 초과하지 않습니다.

계층 구조

시각적 계층 구조

순서는 현재 단계, 그다음 질문, 그다음 필드로 읽힙니다. 현재 단계만 악센트를 사용합니다.

반응형

모바일 레이아웃

모바일에서 스테퍼는 현재 레이블이 있는 점으로 압축되고, 요약은 하나의 총계 줄로 축소됩니다.

인터랙션

인터랙션 점검

한 단계 뒤로 가기, 유효성 검사 오류 트리거, 초대 단계 건너뛰기를 테스트하세요.

적합성

Antigravity가 적합한 곳 — 그리고 적합하지 않은 곳

Antigravity가 적합한 경우

  • 멀티모달 스크린샷 → UI. Gemini 3.x 이미지 이해를 통해 참조 이미지가 반응형 마크업이 되고, 에이전트가 원본과 대조하여 확인합니다.
  • 통합 브라우저 검증. Antigravity 에이전트는 내장 브라우저를 구동하고, 브레이크포인트 전반에 걸쳐 UI를 렌더링하며, 결과를 아티팩트로 캡처합니다.
  • Editor View + Manager Surface. 직접 코드를 다루려면 Editor View에서 작업하고, 여러 에이전트를 비동기적으로 조율하려면 Manager Surface를 사용하세요.
  • 무료로 시작. 공개 미리보기는 개인에게 비용이 들지 않으며, Google 계정을 통해 넉넉한 Gemini 3.x 속도 제한을 제공합니다.

다른 워크플로를 선택해야 하는 경우

  • 편집 가능한 벡터 파일이 필요합니다. Antigravity의 아티팩트는 HTML이며, 편집 가능한 디자인 문서가 아닙니다. 필요한 자산 형식에 대해서는 별도의 벡터 워크플로우를 찾으세요.
  • 참조도 제약도 없습니다. 디자인 시스템이나 예시가 없으면 출력이 일반적인 모양으로 흐르는 경향이 있습니다. 브리프를 작성하는 것부터 시작하세요.
  • 이 에이전트에 필요한 자격 증명이 없습니다. 필요: Google 계정(개인 Gmail), 공개 미리보기에서 무료. OpenDesign은 자격 증명을 제공하거나 프록시하지 않습니다.
  • 팀이 Cursor 또는 Kiro에서 작업합니다. 해당 에이전트에는 자체 페이지가 있으며, 설정은 에이전트마다 다릅니다. 관련 에이전트를 참조하세요.

호환성

시작하기 전 Antigravity 요구 사항

이 페이지는 OpenDesign 데스크톱 앱을 통해 연결된 Antigravity를 다룹니다. 참조는 2026년 9월 6일에 확인되었습니다.

도구 범위Antigravity, by Google

Antigravity는 Google의 에이전트 우선 개발 플랫폼입니다: 자율 에이전트가 편집기, 터미널, 통합 브라우저 전반에서 작동하는 AI 기반 IDE입니다. Gemini 3와 함께 공개 미리보기로 등장했습니다. 여기서 초점은 Antigravity 자체 인터페이스가 아니라 OpenDesign을 통해 Antigravity로 인터페이스를 디자인하는 것입니다. OpenDesign의 설정 노트에 사용 가능한 에이전트가 나와 있습니다.

계정 및 인증Google 계정(개인 Gmail), 무료 기간

공개 미리보기. Google 계정으로 인증하세요 — 자격 증명은 컴퓨터에 남아 있습니다. 이 페이지는 할당량이나 가격을 약속하지 않습니다.

시스템 및 버전데스크톱 앱 또는 소스

데스크톱 빌드의 경우 다운로드 페이지를 참조하세요. 소스 퀵스타트의 Node.js 및 pnpm 요구 사항은 소스에서 실행할 때 중요하며, 데스크톱 패키지를 설치할 때는 해당되지 않습니다. 최소 호환 Antigravity 버전: 여기에서 확인되지 않음.

연결 확인성공 신호

설치된 버전에 표시된 연결 지침을 사용한 다음 작은 작업을 시도하세요. Antigravity가 처리했는지, 아티팩트가 열리는지 확인하세요. 다운로드 자체만으로는 연결이 작동한다는 것을 증명하지 않습니다.

데스크톱 앱으로 시작하기

Antigravity 설정 3단계

다운로드로 시작하여 설치된 버전에 대한 Antigravity 설정을 완료한 다음 작은 결과를 테스트하세요. 이 경로를 따르는 데 OpenDesign을 소스에서 빌드할 필요는 없습니다.

  1. 1

    OpenDesign 데스크톱 앱 다운로드

    사용 중인 컴퓨터에 맞는 패키지를 선택하고 설치한 다음 앱을 실행하세요.

    OpenDesign 다운로드
    체크포인트
    데스크톱 앱이 열립니다. 이미 설치되어 있다면 다음 단계로 계속하세요. 두 번째 다운로드는 필요하지 않습니다.
  2. 2

    Antigravity 연결 준비하기

    설치된 버전에 포함된 Antigravity 지침을 사용하세요. Google 계정으로 로그인하세요 — 자격 증명은 컴퓨터에 남아 있습니다.

    # 1. Download Antigravity for your OS (macOS, Windows, Linux)
#    from the official download page: antigravity.google/download

# 2. Launch it and sign in
agy               # opens Antigravity; sign in with your Google account

# 3. Accept the data-use policy, pick a theme, and open your project folder

    게시된 가이드의 Antigravity 설정 노트에서 발췌; 현재 명령은 공급업체 문서에서 확인하세요.

    체크포인트
    사용하려던 에이전트와 계정을 확인하세요. 둘 중 하나라도 사용할 수 없으면 더 큰 작업을 시도하기 전에 호환성을 검토하세요.
  3. 3

    작은 Antigravity 작업 하나 실행하기

    하나의 수정을 포함한 전체 루프를 판단할 수 있도록 초기 브리프를 간소하게 유지하세요.

    시작 브리프

    프로필 양식과 저장 확인이 있는 설정 화면을 구축하세요. 내 디자인 규칙을 적용하세요. 데스크톱 및 모바일 너비에서 확인하세요.

    체크포인트
    결과를 열고, 저장 상태를 테스트하고, 하나의 구체적인 변경을 요청하세요. 생성은 검토를 시작할 뿐, 끝내지 않습니다.

OpenDesign을 소스에서 실행하려면 대신 기술 퀵스타트를 사용하세요.

Antigravity 디자인 워크플로

Antigravity의 5단계 디자인 루프

첫 브리프부터 검토된 HTML 아티팩트까지 추적한 하나의 가입 흐름 작업. 각 단계에서: 당신의 입력, Antigravity의 움직임, OpenDesign의 역할, 그리고 당신이 여전히 책임지는 확인.

  1. 1

    디자인 브리프

    세 문장에서 여섯 문장의 평범한 문장. 화면이 누구를 위한 것인지, 무엇을 달성해야 하는지, 어떤 플랫폼이 중요한지 파악하세요.

    • 사용자브리프 초안을 작성하세요. 참조 스크린샷이 있으면 첨부하세요.
    • Antigravity브리프와 프로젝트 지침 파일을 구문 분석하고, 모호한 점에 대해 질문합니다.
    • OpenDesign프로젝트, 프롬프트 표면 및 해당 아티팩트 유형에 맞는 스킬을 제공합니다.
    • 확인브리프에 승인 기준이 명시되어 있는지 확인하세요. 생성 전에 이를 확정하는 것이 나중에 수정하는 것보다 비용이 적게 듭니다.
  2. 2

    디자인 제약 조건

    디자인 시스템과 타협 불가 항목의 짧은 목록. 그것이 브랜드 특정 작업과 기본 모양 사이의 경계입니다.

    • 사용자디자인 시스템을 선택하고, 브레이크포인트의 이름을 지정하고, 반드시 나타나야 하는 구성 요소를 나열하세요.
    • Antigravity한 줄을 작성하기 전에 DESIGN.md 토큰과 포스처 규칙을 컨텍스트에 로드합니다.
    • OpenDesign디자인 시스템 라이브러리를 제공하고 선택 항목을 스킬 템플릿에 바인딩합니다.
    • 확인토큰이 브랜드와 일치하는지 확인하세요: 하나의 악센트, 올바른 글꼴, 올바른 반경.
  3. 3

    인터페이스 생성

    Antigravity는 하나의 자체 포함 HTML 파일을 생성합니다 — 레이아웃, 스타일, 상호작용 및 안정적인 훅 포함.

    • 사용자Antigravity가 명확히 하는 질문을 하지 않는 한 기다리세요. 구성할 것은 없습니다.
    • Antigravity섹션을 계획하고 HTML, CSS, JavaScript를 작성한 다음 파일을 실행하고 실패를 수정합니다.
    • OpenDesign아티팩트를 프로젝트 폴더에 작성하고 미리 볼 수 있도록 색인합니다.
    • 확인아직 아닙니다. 소스가 아니라 렌더링된 파일을 평가하세요.
  4. 4

    미리보기

    OpenDesign이 지정한 너비에서 파일을 렌더링합니다. 이 지점에서 디자인이 실제로 평가됩니다.

    • You너비를 바꾸고, 상호작용을 실행해 보고, 요소에 직접 댓글을 남기세요.
    • Antigravity미리보기 댓글을 수집하고 다음 수정본을 준비합니다.
    • OpenDesign미리보기 렌더를 제공하고 댓글과 편집이 연결될 수 있도록 data-od-id 대상을 노출합니다.
    • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 강조 색이 절제되어 사용되는지 확인하세요.
  5. 5

    수정 및 검증

    변경을 요청하려면 미리보기 요소를 가리키세요. 각 수정본은 새 파일로 도착하므로, 아무것도 흔적 없이 덮어써지지 않습니다.

    • You댓글을 구체적인 요청으로 전환하고 작업이 끝나는 시점을 결정합니다.
    • Antigravity요청된 변경 사항을 제자리에서 적용하고 파일을 다시 실행합니다.
    • OpenDesign버전을 나란히 유지하고, 완료되면 이미지나 HTML을 내보냅니다.
    • Check먼저 변경된 영역만 다시 확인한 다음, 각 브레이크포인트에서 전체 페이지를 한 번씩 확인합니다.

리소스

Antigravity 디자인 리소스

스킬

디자인 스킬

Antigravity가 OpenDesign 내부에서 생성할 수 있는 아티팩트 유형이며, 각 유형마다 하나의 스킬이 있습니다.

스킬 둘러보기 디자인 시스템

디자인 시스템

Antigravity가 생성을 시작하기 전에 바인딩할 브랜드 토큰과 컴포넌트.

시스템 둘러보기 템플릿

템플릿

덱, 랜딩 페이지, 제품 화면을 위한 시작점.

템플릿 둘러보기

제한 사항

Antigravity의 한계, 수동 점검 및 대체 경로

  • 범위여기서 다루는 범위는 OpenDesign에 연결된 에이전트로서의 Antigravity이며, Antigravity의 전체 기능 집합이 아닙니다.
  • 사용 한도사용 한도와 비용은 사용자가 가져오는 자격 증명(Google 계정(개인 Gmail), 공개 미리보기에서는 무료)에 따라 달라집니다. 이 페이지에서는 무료 할당량을 주장하지 않습니다.
  • 네트워크로컬 프로젝트 파일이 오프라인 추론을 의미하지는 않습니다. 민감한 입력을 제공하기 전에 에이전트의 제공자 설정과 데이터 정책을 검토하세요.
  • 출력물은 HTML입니다아티팩트는 HTML 파일이며, 벡터 디자인 문서가 아닙니다.
  • 수동 검토미리보기에서 접근성, 실제 콘텐츠, 브랜드 적합성, 상호작용 정확성을 검토합니다. 에이전트의 자체 점검은 1차 점검일 뿐입니다.
  • 대체 방법에이전트를 사용할 수 없거나 작업이 실패하면, 설치된 버전의 연결 지침과 인증을 참고하세요. 구성을 변경하기 전에 오류와 마지막으로 작동한 아티팩트를 보관하세요.

자주 묻는 질문

Antigravity와 OpenDesign에 관한 자주 묻는 질문

Antigravity가 실제로 디자인 작업을 처리할 수 있나요?
가능합니다 — 미적 감각을 갖춘 skill, 디자인 시스템, 그리고 컨텍스트에 포함된 실제 레퍼런스 이미지가 있으면 Antigravity는 프로덕션 수준의 반응형 UI를 만들어내며, 멀티모달 Gemini 3.x 에이전트가 통합 브라우저에서 결과를 검증합니다. 이러한 컨텍스트가 없으면 일반적인 모습으로 기본 설정되는 경향이 있으며, 이것이 OpenDesign이 채우는 공백입니다.
Antigravity로 디자인하려면 비용을 지불해야 하나요?
Antigravity는 개인에게 무료로 제공되는 공개 프리뷰 상태이며, 개인 Google 계정으로 로그인하면 Gemini 3.x에 대해 넉넉한 속도 제한이 적용됩니다. OpenDesign은 어떤 경우에도 자격 증명을 대신 처리하지 않습니다.
구체적으로 무엇이 Antigravity를 디자인에 적합하게 만드나요?
세 가지입니다: 에이전트가 레퍼런스 스크린샷을 잘 읽어내는 네이티브 멀티모달 Gemini 3.x 모델에서 실행되고, 에이전트가 UI를 검증하기 위해 조작할 수 있는 통합 브라우저를 제공하며, 검토할 수 있는 산출물 — 스크린샷과 브라우저 녹화 — 을 노출합니다. 안목은 여전히 사용자가 제공하는 디자인 시스템, skill, 레퍼런스에서 나옵니다.
프런트엔드 디자인을 위한 Antigravity vs. Claude Code?
둘 다 강력합니다. Claude Code는 코드베이스를 인식한 구체적인 디자인 결정으로 알려져 있으며, Antigravity의 강점은 에이전트 중심 플랫폼입니다 — 멀티모달 Gemini 3.x, 검증을 위한 통합 브라우저, 검토 가능한 산출물이죠. 많은 팀이 둘 다 사용합니다 — OpenDesign을 사용하면 디자인 워크플로를 바꾸지 않고도 에이전트를 전환할 수 있습니다.
Antigravity가 빌드한 결과물을 어떻게 검증하나요?
Antigravity는 에이전트가 조작할 수 있는 통합 브라우저를 제공하므로, UI를 렌더링하고 여러 브레이크포인트에서 확인한 뒤 스크린샷과 브라우저 녹화를 산출물로 캡처합니다. 이러한 산출물을 검토하고 에이전트가 결과물을 레퍼런스와 다시 비교하도록 하는 것이 결과를 사양에 맞게 유지하는 방법입니다.
Antigravity란 정확히 무엇인가
Antigravity는 Google의 에이전트 우선(agent-first) 개발 플랫폼입니다. 사이드바 챗봇이 아니라 자율 에이전트가 일을 하도록 만들어진 AI 기반 IDE입니다. 2025년 11월 18일 Gemini 3와 함께 발표되었고 개인 사용자에게 무료 공개 프리뷰로 제공되며, 편집기와 터미널, 통합 브라우저 전반에서 동작하는 에이전트에 복잡한 다중 도구 소프트웨어 작업을 위임할 수 있습니다. 이 에이전트들은 주로 Google의 멀티모달 Gemini 3.x 모델 위에서 실행됩니다.

디자인 작업에서는 세 가지 특성이 두드러집니다. Gemini 3.x가 네이티브 멀티모달이기 때문에 에이전트가 스크린샷을 읽고 실제 레이아웃에 대해 추론합니다. 실제 브라우저를 구동할 수 있어 자신이 만든 것을 렌더링하고 검증합니다. 그리고 Artifacts(작업 목록, 계획, 스크린샷, 브라우저 녹화)를 드러내 주므로, 원시 도구 로그 대신 실체 있는 결과물을 검토하게 됩니다.

Editor View + Manager Surface: Editor View는 탭 완성과 인라인 명령을 갖춘 익숙한 AI IDE이고, Manager Surface는 여러 워크스페이스에 걸쳐 비동기로 작업하는 다수의 에이전트를 생성하고 조율하고 관찰할 수 있게 해줍니다. 긴 디자인 작업을 실행하기에 자연스러운 자리입니다.

통합 브라우저 + Artifacts: 에이전트는 내장 브라우저에서 동작하고, 피드백을 남길 수 있는 Artifacts(스크린샷, 브라우저 녹화, 작업 목록, 계획)를 만들어 냅니다. 나중에 덧붙인 것이 아니라 플랫폼에 내장된 검증 루프입니다.

무료로 시작: 개인 Google 계정으로 로그인하면 Gemini 3.x에 대해 넉넉한 요청 한도를 받습니다. 플랫폼은 macOS, Windows, Linux에서 실행됩니다.

자격 증명: Google 계정(개인 Gmail), 공개 프리뷰 기간 동안 무료

바이너리: agy로 실행하며 macOS, Windows, Linux에서 동작

공급자: Google
멀티모달 Gemini와 내장 브라우저가 디자인에 잘 맞는 이유
Antigravity의 디자인 강점은 모델과 플랫폼이 함께 있을 때 나옵니다. 다만 모든 에이전트가 그렇듯 취향은 여전히 공급되어야 합니다.

뛰어난 멀티모달 이해: Gemini 3.x가 네이티브 멀티모달이므로 에이전트가 참조 스크린샷을 잘 읽습니다. 산문 설명에서 추측하는 대신 렌더링된 결과를 이미지와 비교합니다.

검증용 통합 브라우저: 에이전트가 실제 브라우저를 구동하므로 UI를 렌더링하고, 여러 상태에 걸쳐 확인하며, 깨진 레이아웃을 잡아냅니다. 그리고 그 결과를 검토할 수 있는 브라우저 녹화 Artifact로 캡처합니다.

에이전트가 읽는 컨벤션: 토큰, 컴포넌트, 리뷰 규칙을 에이전트의 프로젝트 컨텍스트에 인코딩하여 기본 룩이 아니라 여러분의 브랜드에 맞춰 작업하게 하세요.

취향은 여러분이 제공하는 세 가지 입력, 즉 디자인 시스템과 스킬, 실제 참조 이미지에서 나옵니다.

교훈은 모든 에이전트가 가르쳐 주는 것과 같습니다. Antigravity는 기본적으로 취향을 갖고 있지 않습니다. 디자인 시스템, 미학 스킬, 구체적인 참조라는 제약을 주면 좋은 디자인을 만들어 냅니다. OpenDesign은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 더 다룹니다).
디자인 작업을 위해 Antigravity를 처음부터 설정하기
깨끗한 머신에서 UI를 만들고 검증할 수 있는 Antigravity 에이전트까지 가는 전체 경로입니다. 프리뷰 기간에는 앱 내 정확한 메뉴가 바뀔 수 있으므로, 여기서는 믿고 따를 수 있는 수준으로 설명합니다.

설정 순서: 다운로드 → Google로 로그인 → 프로젝트 열기 → 디자인 규칙과 스킬 추가 → 통합 브라우저로 검증.

디자인 규칙 인코딩: 토큰, 프리미티브, 컨벤션을 에이전트의 프로젝트 컨텍스트에 넣어 결과물이 제네릭한 기본 룩으로 흐르지 않고 브랜드에 맞게 나오도록 하세요.

통합 브라우저 사용: 에이전트가 Antigravity의 내장 브라우저에서 렌더링하고 여러 브레이크포인트에 걸쳐 결과를 확인하게 하세요. 빌드가 통과하는지만이 아니라 UI가 제대로 보이는지 검증하는 것입니다.

명령과 버전별 세부 사항은 바뀔 수 있으니 현재 설정 섹션을 참고하세요.

# 1. OS에 맞는 Antigravity 다운로드 (macOS, Windows, Linux) # 공식 다운로드 페이지: antigravity.google/download # 2. 실행하고 로그인 agy # Antigravity 실행, Google 계정으로 로그인 # 3. 데이터 사용 정책에 동의하고 테마를 고른 뒤 프로젝트 폴더 열기 # 4. Editor View 또는 Manager Surface에서 에이전트 작업 시작, # Gemini 3.x 모델 선택 (예: Gemini 3.1 Pro)
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 공급업체 문서에서 확인하세요.
스크린샷을 UI로 전환하기: 워크플로
Antigravity에서 가장 효과가 큰 디자인 루프는 참조 이미지를 실제로 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다. 멀티모달 모델로 결과물을 참조와 비교하고, 통합 브라우저로 검증합니다.

가장 명확한 시각적 참조에서 시작하세요. 히어로 샷 하나만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.

프롬프트를 구체적으로 쓰세요. 모호한 프롬프트는 강력한 모델에서도 제네릭한 UI를 낳습니다.

디자인 시스템과 컨벤션을 에이전트의 프로젝트 컨텍스트에 두고, 토큰과 표준 프리미티브가 어디에 있는지 알려주세요.

에이전트가 Antigravity의 통합 브라우저에서 렌더링하고 브레이크포인트로 크기를 바꿔 결과를 확인하게 하세요.

에이전트가 빌드되는지 확인만 하는 데 그치지 않고 구현을 스크린샷과 비교하게 하여 반복하고, 생성된 브라우저 녹화와 스크린샷 Artifacts를 검토하세요.

참조 이미지를 첨부하고 구체적인 제약을 준 다음, 에이전트가 브라우저에서 검증하게 하세요.

프롬프트는 작고 집중적으로 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때는 에이전트에게 알려주세요). 그래야 매 패스가 깨끗한 기반 위에서 쌓입니다.

# Antigravity 에이전트 작업에서 reference-desktop.png와 # reference-mobile.png를 첨부한 뒤 프롬프트: React + Vite + Tailwind + TypeScript로 이 디자인을 구현해줘. 내 기존 디자인 시스템 컴포넌트와 토큰을 재사용해줘. 간격, 레이아웃, 위계를 맞추고 반응형으로 만들어줘. 통합 브라우저에서 렌더링하고 여러 브레이크포인트에서 참조와 일치할 때까지 반복하고, 스크린샷을 보여줘.
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 공급업체 문서에서 확인하세요.
에이전트 컨텍스트, 도구, Artifacts
세 가지 확장 지점이 Antigravity를 지속적인 디자인 작업에 실용적으로 만들며, 셋 모두 열린 디자인 워크플로에 깔끔하게 대응합니다.

프로젝트 컨텍스트: 영속적인 프로젝트 규칙은 디자인 컨벤션의 오래가는 집입니다. 에이전트가 모든 작업에서 읽는 토큰, 프리미티브, 리뷰 체크리스트가 여기 있어 결과물이 브랜드에 맞게 유지됩니다.

통합 브라우저 + 터미널: 에이전트는 편집기, 터미널, 내장 브라우저 전반에서 동작하므로 플랫폼을 벗어나지 않고 참조를 모으고, 개발 서버를 돌리고, 렌더링된 UI를 검증할 수 있습니다.

검토하는 Artifacts: 작업 목록, 구현 계획, 스크린샷, 브라우저 녹화는 에이전트의 작업을 읽을 수 있게 만듭니다. Artifact에 피드백을 남기면 에이전트가 수정 사항을 반영합니다.

이것들은 진지한 디자인 루프에 필요한 역량이며, 프로젝트마다 새로 만드는 대신 OpenDesign이 조율하도록 만들어진 바로 그런 것입니다.
디자인을 위한 Antigravity, Codex, Claude Code, Cursor, Gemini CLI: 비교 방법
디자인 작업에 단일 승자는 없습니다. 각 에이전트는 서로 다른 강점을 지니고 있고, 경험 많은 팀은 이들을 조합합니다. 공정한 요약은 다음과 같습니다.

Antigravity — 멀티모달 Gemini 3.x, 자기 검증을 위한 통합 브라우저, 검토 가능한 Artifacts를 갖춘 에이전트 우선 IDE; 프리뷰에서 무료 — UI를 내장 브라우저로 검증하는 비동기 다중 에이전트 빌드

Codex — 프런트엔드 스킬을 통한 강력한 시각적 완성도; 샌드박스 비동기 빌드 — 위임된 비동기 빌드와 이식 가능한 AGENTS.md 규칙

Claude Code — 구체적인 디자인 결정(hex, 간격, 타이포그래피)과 코드베이스를 인식하는 UX — 프런트엔드 추론과 대규모 컨텍스트 리팩터링

Cursor — 라이브 프리뷰와 인라인 편집을 갖춘 시각적 빌드 앤 시 루프 — IDE 안에서의 촘촘한 반복·관찰 UI 작업

Gemini CLI — 1M 토큰 컨텍스트와 무료 티어를 갖춘 멀티모달 Gemini 기반 오픈소스 터미널 에이전트 — 스크린샷이 많은 터미널 작업과 전체 디자인 시스템을 컨텍스트에 유지하기

커뮤니티에서 되풀이되는 평결은 취향은 인간에게서 온다는 것입니다. 스킬과 참조, 제약이 없으면 이들 모두 제네릭한 미학으로 기본 설정됩니다. 그것이 풀어야 할 진짜 문제이며, 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

에이전트 — 디자인 강점 — 적합한 용도
흔한 함정과 “AI slop” 같은 모습 피하기
AI가 생성한 디자인에 대한 가장 흔한 불만은 제네릭해 보인다는 것입니다. 부드러운 그라디언트, 떠 있는 패널, 과도하게 큰 라운드 코너, 과장된 그림자, “AI가 만들었다고 소리치는” Inter와 보라색 분위기 같은 것들입니다. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 UI 문구로 새어 나온 지시문이 있습니다. 이 중 어느 것도 Antigravity만의 문제가 아닙니다. 큐레이션된 디자인 컨텍스트 없이 어떤 에이전트가 돌아갈 때 벌어지는 일입니다.

미학 스킬 추가: 큐레이션된 디자인 스킬은 에이전트가 기본 룩 대신 실제 방향에 전념하게 만듭니다.

통합 브라우저에서 검증: 멀티모달 모델과 Antigravity의 내장 브라우저로 렌더링하고 여러 브레이크포인트에 걸쳐 스스로 점검하여 모바일에서 레이아웃이 조용히 깨지지 않게 하세요.

토큰과 참조 제공: 실제 디자인 토큰과 참조 스크린샷은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다.

프로젝트 컨텍스트에 규칙 인코딩: “히어로 카드 금지, 서체 최대 두 개, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 모든 작업에서 읽는 곳에 두세요.

모든 완화책이 에이전트에게 큐레이션된 디자인 컨텍스트를 주는 일에 관한 것임을 눈여겨보세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 것이 바로 OpenDesign이 없애 주는 수고입니다.
OpenDesign 내에서 Antigravity로 디자인하기
OpenDesign은 위 워크플로가 계속 요구해 온 오픈소스 디자인 레이어입니다. Antigravity를 퍼스트파티 어댑터로 취급하고, 큐레이션된 스킬과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다. 그래서 Antigravity를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하고, 매번 손으로 조립할 필요가 없습니다. OpenDesign은 오픈소스이자 로컬 우선이라 이 조합은 자연스럽게 맞습니다.

OpenDesign을 설치하고 에이전트로 Antigravity를 선택하세요.

Google 계정으로 인증하세요. 자격 증명은 여러분의 머신에 남아 있고 저희를 거쳐 프록시되지 않습니다.

디자인 시스템과 스킬을 고른 다음, 일관된 취향으로 덱과 프로토타입, 랜딩 페이지를 생성하세요.

모든 아티팩트와 DESIGN.md 파일은 호스팅된 클라우드가 아니라 여러분의 리포지터리에 있습니다.

같은 Antigravity 에이전트, 같은 Google 계정에, 그 주위에 실제적이고 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. OpenDesign은 로컬 우선이고 Apache-2.0이므로 여러분의 작업이나 자격 증명에 관한 어떤 것도 머신을 떠나지 않습니다.
OpenDesign은 Google과 어떤 제휴 관계가 있나요?
아니요. OpenDesign은 독립적입니다. Antigravity와 Gemini는 Google의 상표입니다.