구글이 작정하고 만든 AI 디자인 툴 '스티치', 피그마 없이 포트폴리오 디자인 끝내는 법 (포트폴리오 홈페이지 제작 5탄)

안녕하세요, 바이브랩스입니다.

오늘 역시 '바이브 코딩'이 아닌, 개발자의 업무 효율을 극대화할 '바이브 워킹에 대한 이야기입니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈 다섯 번째 영상입니다.

기획서(PRD)는 있는데 디자인이 막막하셨나요? 구글이 새로 내놓은 AI 디자인 툴 '스티치(Stitch)'와 '노션 AI'를 활용해서, 기획서 한 장으로 UI 디자인부터 [디자인 시스템 문서]까지 단숨에 완성하는 과정을 보여드립니다.

💡 이번 영상의 핵심 포인트

구글 스티치(Stitch):
복잡한 툴 조작 없이, PRD 텍스트만 넣으면 제미나이(Gemini) 모델이 웹사이트 UI를 그려줍니다.

스타일 트랜스퍼:
마음에 드는 레퍼런스(Dribbble 등) 이미지만 던져주면, 내 프로젝트의 색감과 톤을 자동으로 통일해 줍니다.

노션 AI의 마법:
스티치가 그려준 화면을 캡처해 노션에 넣기만 하세요. 색상 코드, 폰트, 그리드 등이 담긴 '디자인 시스템 가이드'를 AI가 대신 작성해 줍니다.

디자인 감각이 부족한 개발자도, 1인 창업가도 이제 '바이브' 있게 프로페셔널한 결과물을 만들 수 있습니다.

📨 비즈니스 및 작가 제안
futurewave@gmail.com

타임라인 (자막 파일 기준 정밀 구성)
01:21 구글의 신상 디자인 툴, 스티치(Stitch) 접속 및 로그인
01:53 프로젝트 설정 (웹/앱 선택 & 제미나이 프로 모델)
02:14 노션 PRD(기획서) 복사해서 스티치에 프롬프트 입력하기
03:00 AI가 그려준 6가지 핵심 화면(홈, 쇼케이스, 상세 등) 확인
04:23 줌(Zoom) & 팬(Pan) 기능으로 디테일 살펴보기
05:43 [꿀팁] 'Generate Variants'로 마음에 안 드는 부분 수정하기
08:54 레이아웃 변경 요청 (검색창 이동 & 카드 배치 수정)
10:20 [핵심] 레퍼런스 이미지로 전체 디자인 톤앤매너 한 번에 바꾸기
12:50 프로젝트 다운로드 (HTML & 스크린샷 추출)
13:41 노션으로 이동: '디자인 시스템' 페이지 생성
14:36 노션 AI에게 디자인 시스템 가이드 문서 작성 시키기
15:34 완성된 디자인 시스템 검토 (컬러, 타이포, 그리드 정의)
16:20 마무리: 기획부터 디자인 시스템까지, 문서 4종 세트 완성!