[stitch 2] 랜딩페이지를 위한 AI 프로토타입 툴

Stitch 2로 프로토타입 만들기

Google의 Stitch 2.0은 AI 기반의 UI 디자인 및 프로토타이핑 도구인 'Stitch'의 대규모 업데이트 버전이다. 이 툴은 디자이너와 개발자가 텍스트 프롬프트나 간단한 스케치만으로 고해상도의 인터페이스와 코드를 생성할 수 있다.

1. 프롬프트로 뼈대 만들기

IT 컨설팅 그룹의 랜딩페이지.
회사의 미션,  
하는 일, 
팀구성(히어로 아이콘), 
포트폴리오, 연락하기
로 구성해줘

위의 프롬프트를 프롬프트 입력창에 넣고 실행을 한다.참고로 프롬프트 창 하단에 테마를 선택할 수 있는 팔레터 콤보박스가 있다. 그곳에서 원하는 색상테마를 선택하면 된다. 여기서는 친숙한 단어인 Obsidian(제2의 두뇌라 불리는 PKM앱과 동명)을 선택했다.

 

 

그러면 다음과 같은 결과를 얻을 수 있다.

2. 아이템 수정하기(직접)

생성된 디자인을 클릭 후, 상단에서 메뉴를 선택하여 작업을 할 수 있다. 그리고 모든 프롬프트마다 1개의 디자인이 생성된다. 그 생성된 디자인을 선택하고 원하는 메뉴를 정해야 한다.

Stitch 2 에서는 생성된 디자인을 수정할 수 있다. 우측의 Floating 메뉴의 연필아이콘을 클릭한다. 그리고 디자인 내에서 수정을 원하는 아이템을 선택 후 직접 수정하거나 프롬프트를 통해 수정할 수 있다.

3. 내보내기

디자인 항목을 선택 후, 상단 우측의 내보내기 버튼을 누르면 다양한 포멧으로 내보내기를 할 수 있다. 가장 완벽(?)한 기능은 HTML로 내보내기이다. 이 파일을 통해서 재작업을 할 수 있다.

4. 테마변경

선택된 디자인 항목의 테마도 프롬프트로 쉽게 재작업이 가능하다.

테마를 desert 형태로 변경해줘.

4. 아이템 수정하기(AI)

디자인 내의 항목을 AI를 통해 재작업이 가능하다.

안드로이드형 전투로봇의 형상으로 
Elena Bot3로 명칭한다. 직책은 그대로 둔다.

엘레나의 정체를 밝혔다.

5. 생성된 .zip의 html

code.html

0.02MB