Codex용 앱 온보딩 흐름 디자인 프롬프트

환영, 목표 선택, 첫 홈 화면으로 이어지는 390×844 온보딩 화면 3개를 CSS 일러스트와 공통 스타일로 디자인합니다.

온보딩 흐름을 화면 3개로 디자인해 줘: 환영, 하루 목표 선택, 첫 홈 화면. 각 화면은 390×844 크기, 인라인 CSS와 시스템 폰트를 쓴 별도의 단일 HTML 파일로 만들어 줘. 세 화면 모두 일관된 스타일로: [따뜻한 크림색 배경, 액션은 짙은 초록색, 코랄 포인트 색상 하나, 헤드라인은 세리프]. 목표 선택 화면에는 진행 표시를 넣고, 일러스트는 CSS로 그려 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 iPhone 크기의 별도 HTML 파일 세 개로 화면을 디자인합니다. 환영 화면, 진행 표시가 있는 하루 목표 선택 화면, 신규 사용자가 처음 도착하는 홈 화면입니다. 함께 요청하면 화면마다 제각각의 스타일을 만들지 않고 하나의 색상, 서체, 간격을 공유합니다.

대괄호 안의 스타일 한 줄이 곧 시각적 방향을 한 문장으로 정리한 것입니다. 배경, 액션 색상, 포인트 색상 하나, 헤드라인 서체입니다. 색상은 적게 쓰고 역할로 이름을 붙이세요. “액션은 짙은 초록색”은 색상이 들어갈 자리를 알려 주지만, 헥스 코드 다섯 개의 목록은 그렇지 못합니다. 온보딩에서 목표가 아니라 관심사나 알림 권한을 묻는다면 가운데 화면의 이름을 거기에 맞게 바꾸세요.

신규 사용자가 만나는 순서대로 세 파일을 읽어 보세요. Codex Design 캔버스에서는 왼쪽에서 오른쪽으로 나란히 놓여서 스타일이 갑자기 달라지거나 진행 표시가 한 번도 움직이지 않는 문제를 쉽게 찾을 수 있습니다. 흐름은 여기서 확정하세요. 다음 프롬프트가 세 번째 화면의 재방문 사용자 버전을 디자인합니다.

이 모음의 다른 프롬프트

• Codex용 모바일 앱 홈 화면 디자인 프롬프트내가 가장 중요하다고 정한 요소를 중심으로, 하단 탭 바와 실제 같은 통계를 갖춘 재방문 사용자용 앱 홈 화면을 디자인합니다.
• Codex용 목록·상세 화면 디자인 프롬프트검색창과 필터 칩이 있는 목록 화면과 항목을 열었을 때의 상세 화면을, 실제 같은 제목과 숫자로 파일 두 개에 디자인합니다.
• Codex용 앱 설정 화면 디자인 프롬프트표준 그룹 목록, 행마다 현재 값, 필요한 곳의 토글, 빨간색 위험 동작을 갖춘 앱 설정 화면을 디자인합니다.
• Codex용 빈 상태·로딩·오류 상태 디자인 프롬프트앱 화면의 빈 상태, 로딩, 오류 상태를 일반 화면과 같은 내비게이션과 헤더로 별도 파일에 디자인합니다.
• Codex용 앱 다크 모드 디자인 프롬프트색조가 있는 어두운 배경, 채도를 낮춘 포인트 색상, WCAG AA 텍스트 대비로 다크 모드를 만들고 바꾼 색상을 정리합니다.
• Codex용 Android Material 3 적용 프롬프트iOS 앱 화면을 Material 3로 Android에 맞게 바꿉니다. 상단 앱 바, 내비게이션 바, FAB을 쓰고 브랜드 색상은 유지합니다.