AI UI Designer Logo
AI UI Designer

이미지 생성 SaaS 화면 설계 · SVG 디자인 자료

이미지 생성 서비스 UI 키트, 화면 흐름부터 구체적으로

UI 키트로 프롬프트 입력부터 결과 확인, 작업 기록, 요금제 선택까지 함께 검토하세요. 이미지 생성 서비스를 만드는 개인 개발자와 제품팀을 위한 편집 가능한 SVG 자료입니다. 무료 AI UI Designer Skill을 Codex 또는 Claude Code에서 사용해 문구와 배치, 테마를 요구사항에 맞게 바꿀 수 있습니다.

유효한 유료 구독에 포함되며 크레딧이 차감되지 않습니다.

포함된 화면 전체 보기

정적인 SVG 디자인 · 중국어 예시 문구 · 실행 가능한 앱 코드 미포함

왼쪽에 프롬프트와 생성 설정, 오른쪽에 결과 카드를 배치한 밝은 작업 화면 디자인
패키지에 포함된 생성 화면 · 밝은 테마
데스크톱 페이지
6
색상 테마
2
모바일 참고 화면
2
편집 가능한 원본
SVG

생성 화면 다음에 필요한 페이지도 확인하세요

사용자가 이미지를 만들고, 다시 찾고, 요금제를 확인하는 과정을 화면별로 살펴볼 수 있습니다. 각 데스크톱 페이지에는 회색조 와이어프레임과 밝은·어두운 디자인이 포함됩니다.

서비스 소개, 작품 갤러리, 사용 단계를 배치한 밝은 홈 화면 디자인

서비스 홈

서비스 설명과 예시 작품을 보여 주고 이미지 생성을 시작할 위치를 검토합니다.

로그인 입력란과 회원가입 안내를 담은 인증 페이지 디자인

로그인·회원가입

로그인 폼을 살펴보고 상태 보드에서 가입 필드와 오류 안내를 확인합니다.

프롬프트 영역과 생성 설정, 이미지 결과 카드를 담은 작업 화면 디자인

이미지 생성 화면

프롬프트, 모델, 비율, 이미지 수, 크레딧 소모와 결과의 배치를 검토합니다.

검색창과 작품 카드, 선택한 이미지 상세 정보를 담은 기록 화면 디자인

작업 기록

검색, 이미지 상세 정보, 설정 재사용과 삭제 확인을 참고합니다.

크레딧 잔액과 가상의 요금제 세 개를 보여 주는 밝은 페이지 디자인

요금제·크레딧

잔액, 예시 요금제와 구매 결과 안내를 함께 검토합니다.

프로필 입력 폼과 저장 피드백을 담은 계정 설정 디자인

계정 설정

프로필 수정, 저장 결과와 로그아웃 동선의 위치를 확인합니다.

미리보기의 문구는 중국어이며 제품 데이터는 가상의 예시입니다. 버튼, 입력 폼, 결제 화면은 실제로 작동하지 않는 디자인입니다.

화면 구성과 예외 상태를 한 패키지에서

페이지 SVG뿐 아니라 컴포넌트와 상태 보드, 시나리오 설명을 함께 제공해 다른 화면과 비교하며 수정할 수 있습니다.

문구와 배치를 수정하는 SVG 원본

텍스트, 도형, 레이아웃을 편집할 수 있습니다. 원본 패키지를 보관하고 작업용 복사본에서 제품에 맞게 수정하세요.

와이어프레임과 밝은·어두운 테마

2개의 테마 JSON이 포함됩니다. 회색조로 정보의 우선순위를 검토한 뒤 밝은 디자인이나 어두운 디자인을 선택할 수 있습니다.

빈 화면과 오류 상태까지 검토

버튼, 입력창, 선택 메뉴, 카드, 대화상자와 함께 생성 중, 기록 없음, 크레딧 부족, 로그인 오류, 결제 실패 상태를 참고할 수 있습니다.

모바일 참고 화면의 범위

생성 화면과 작업 기록은 너비 390px로 제공됩니다. 나머지 페이지는 시나리오 문서에 모바일 동작을 설명하며 별도의 모바일 도면은 없습니다.

ZIP을 가져온 뒤 서비스 요구사항에 맞게 수정

무료 Skill로 패키지를 가져올 수 있습니다. 가져오기 보조 스크립트에는 Python 3.9 이상이 필요합니다.

  1. 1

    구독 계정으로 ZIP 다운로드

    웹사이트 다운로드에는 유효한 유료 구독이 필요합니다. 디자인 패키지를 받을 때 생성 크레딧은 차감되지 않습니다.

  2. 2

    Skill에 로컬 파일 경로 전달

    Codex나 Claude Code에 AI UI Designer Skill을 설치하고, 다운로드한 ZIP의 로컬 경로를 알려 주며 가져오기를 요청하세요.

  3. 3

    수정할 항목을 지정하고 SVG 확인

    테마와 필드, 배치 변경을 요청한 뒤 결과를 검토하세요. 원본을 유지하면서 작업용 파일을 반복해서 수정할 수 있습니다.

활용 예시: 쇼핑몰 상품 배너 제작 화면

이미지 생성 시나리오 패키지의 밝은 테마로 쇼핑몰 상품 배너 제작 화면을 설계해 주세요. 프롬프트 영역을 상품명과 주요 특징 입력란으로 바꾸고 배너 비율 선택을 배치해 주세요. 크레딧 소모 안내와 생성 결과 카드를 유지하고 편집 가능한 SVG로 출력해 주세요.

무료 Skill과 구독 다운로드, 무엇이 다른가요?

요구사항에 따른 디자인, 패키지 가져오기와 테마 적용은 무료 Skill로 가능합니다. 이 화면 자료를 웹사이트에서 다운로드하려면 유효한 유료 구독이 필요합니다.

요구사항으로 새 디자인 만들기
무료 Skill · 무료
팩 가져오기 및 테마 적용
무료 Skill · 무료
이 페이지 세트 다운로드
장면 팩 · 유효한 유료 구독
다운로드한 자료를 로컬에서 사용
장면 팩 · 구독 종료 후에도 가능
FAQ

도입 전에 확인할 파일과 이용 조건

디자인 자료의 범위와 실제 서비스 개발에 필요한 작업을 구분해 확인하세요.

화면을 확인하고, 내 제품에 맞는 디자인으로

UI 키트 미리보기에서 생성 화면과 기록, 요금제의 구성을 확인하세요. 유효한 유료 구독으로 SVG를 다운로드한 뒤 무료 Skill로 문구와 테마를 조정할 수 있습니다.

SVG 디자인 패키지 다운로드

유효한 유료 구독에 포함되며 크레딧이 차감되지 않습니다.