Codex용 모바일 앱 목업을 SwiftUI 코드로 바꾸는 프롬프트

승인된 HTML 화면을 내 SwiftUI 앱에 구현하게 합니다. 레이아웃과 간격을 맞추고, 테마 색상을 쓰고, Dynamic Type을 지원합니다.

승인된 온보딩 화면과 홈 화면을 우리 [SwiftUI] 앱에 구현해 줘. 레이아웃과 간격은 [designs/]에 있는 HTML 파일에 맞추고, 색상은 [Theme.swift]의 것을 쓰고, Dynamic Type을 지원하고, 맞는 곳에는 기존 컴포넌트를 재사용해 줘.

지원 도구

Codex

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 승인된 온보딩 화면과 홈 화면을 내 실제 앱에 구현하는데, HTML 파일을 레이아웃과 간격의 기준으로 삼습니다. 색상은 기존 테마 파일에서 가져오고, 사용자 설정에 따라 글자 크기가 바뀌도록 Dynamic Type을 지원하며, 중복을 만들지 않고 이미 있는 컴포넌트를 재사용합니다.

SwiftUI는 Jetpack Compose, React Native, Flutter 같은 내 프레임워크로 바꾸고, 나머지 두 대괄호는 HTML 디자인이 있는 폴더와 색상을 정의하는 파일로 바꾸세요. Apple 플랫폼이 아니라면 Dynamic Type을 Android의 시스템 글꼴 배율 따르기처럼 해당 플랫폼의 대응 기능으로 바꾸세요. 다크 모드를 디자인했다면 그 파일들도 언급해서 두 테마를 한 번에 만들게 하세요.

이 단계에서 Codex는 테마와 컴포넌트를 읽어야 하므로 내 저장소 안에서 작업해야 합니다. 앱 전체가 아니라 프롬프트에 나온 두 화면부터 시작하세요. 간격과 컴포넌트가 목업과 맞아지면 패턴이 이미 코드에 있어서 나머지 화면은 더 빨리 진행됩니다.

이 모음의 다른 프롬프트

• Codex용 모바일 앱 브리프와 화면 목록 프롬프트앱의 사용자, 핵심 루프, 플랫폼을 설명하고 첫 버전의 모든 화면을 묶음별로, 화면마다 목적과 함께 나열하게 합니다.
• Codex용 앱 온보딩 흐름 디자인 프롬프트환영, 목표 선택, 첫 홈 화면으로 이어지는 390×844 온보딩 화면 3개를 CSS 일러스트와 공통 스타일로 디자인합니다.
• Codex용 모바일 앱 홈 화면 디자인 프롬프트내가 가장 중요하다고 정한 요소를 중심으로, 하단 탭 바와 실제 같은 통계를 갖춘 재방문 사용자용 앱 홈 화면을 디자인합니다.
• Codex용 목록·상세 화면 디자인 프롬프트검색창과 필터 칩이 있는 목록 화면과 항목을 열었을 때의 상세 화면을, 실제 같은 제목과 숫자로 파일 두 개에 디자인합니다.
• Codex용 앱 설정 화면 디자인 프롬프트표준 그룹 목록, 행마다 현재 값, 필요한 곳의 토글, 빨간색 위험 동작을 갖춘 앱 설정 화면을 디자인합니다.
• Codex용 빈 상태·로딩·오류 상태 디자인 프롬프트앱 화면의 빈 상태, 로딩, 오류 상태를 일반 화면과 같은 내비게이션과 헤더로 별도 파일에 디자인합니다.