대화형 수정
수정 요청은 문장으로, 반영은 즉시
가격표를 3단으로 바꿔줘반영했어요 ✓
채팅 수정
변경 요약·diff·되돌리기
section#hero > h1
요소 선택 수정
미리보기에서 요소를 클릭하면 "이 부분"이 채팅에 첨부돼요.
구조 다루기
섹션은 프레임워크 패턴에서 꺼내 쓰세요
hero.splithero.centered
섹션 추가/교체
패턴 피커에서 hero 변형 12종 등을 골라요.
소개서비스문의
페이지 추가
블루프린트에서 소개·서비스·문의 페이지를 한 번에
리스킨
스타일 스왑
토큰 범위 안에서 색·폰트 교체, 다른 프레임워크로 리스킨
AI 보조
생성부터 보정까지 AI가 거들어요
프롬프트
섹션 AI 생성
프롬프트로 프레임워크 규칙을 지키는 새 섹션을 만들어요.
카피이미지
카피·이미지 AI 생성
빈 슬롯을 채워줘요.
build ✓
자동 수정 루프
빌드·타입 오류를 에이전트가 스스로 고쳐요.
코드 소유
언제든 코드로 가져가세요
app/page.tsx
코드 탭
파일 트리 + 에디터로 직접 수정 (Starter)
ZIPGitHub
내보내기Beta
ZIP · GitHub push (Growth)
SITE_KIT_KEY
site-kit
내보낸 뒤에도 폼·상품·블로그가 동작하는 오픈 런타임
버전 히스토리
모든 변경은 기록돼요
v3v2v1
커밋 타임라인
생성·수정마다 스냅샷, 원하는 시점으로 복원
mainvariant-a
변형 만들기
브랜치로 A/B 시안을 만들어요.
FAQ
자주 묻는 질문
Q.코딩을 몰라도 되나요?
네. 말로 요청하면 에이전트가 코드를 수정합니다. 코드 탭은 선택 사항이에요.
Q.수정이 어디까지 가능한가요?
텍스트·스타일(토큰 범위)·섹션 구조·블록 삽입·페이지 추가·재생성까지 가능합니다.
Q.생성물 품질이 들쭉날쭉하지 않나요?
프레임워크 규칙, judge 채점, 자동 수정 루프로 품질을 일정하게 유지합니다.
Q.코드를 내보내면 어떻게 호스팅하나요?
ZIP·GitHub로 내보낸 프로젝트는 SITE_KIT_KEY로 폼·상품·블로그가 계속 동작하고, 정적 부분은 어디서든 호스팅할 수 있어요.
Q.다른 바이브코딩 툴 결과물도 가져올 수 있나요?
Next.js 프로젝트 ZIP을 가져와 스튜디오에서 이어서 편집할 수 있어요(프레임워크 없음 상태, 리스킨으로 적용).