Codex용 목록·상세 화면 디자인 프롬프트

검색창과 필터 칩이 있는 목록 화면과 항목을 열었을 때의 상세 화면을, 실제 같은 제목과 숫자로 파일 두 개에 디자인합니다.

[서재] 목록 화면과 [책] 상세 화면을 파일 두 개로 디자인해 줘. 목록에는 표지, 제목, 저자, 진행률이 있는 [책 12권]과 검색창, [읽는 중, 다 읽음, 읽고 싶음] 필터 칩을 보여 줘. 상세 화면은 목록 항목을 눌러 열리고 [독서 기록과 메모]를 보여 줘. 실제 같은 제목과 숫자를 써 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 연결된 두 화면을 별도 파일로 디자인합니다. 표지, 제목, 저자, 진행률이 있는 항목 12개의 목록 위에 검색창과 필터 칩이 놓이고, 항목을 누르면 열리는 상세 화면이 이어집니다. 함께 디자인하면 항목이 목록의 행에서도, 전체 화면에서도 같은 모습으로 보입니다.

대괄호를 내 앱의 목록과 상세 쌍으로 바꾸세요. 상품과 상품 페이지, 할 일과 할 일 보기, 레시피와 레시피 화면처럼요. 항목 수는 실제 사용자가 가질 만한 수로 정하고 실제 필터 상태의 이름을 붙이세요. 실제 같은 제목과 숫자를 쓰라는 마지막 문장은 보기보다 중요합니다. 아주 긴 제목 옆에 진행률 3%인 책과 100%인 책이 있으면 행 레이아웃이 버티는지 알 수 있습니다.

그다음 목록에서 상세로 넘어갈 때 매끄럽게 이어지는지 확인하세요. 두 파일에서 같은 표지, 제목 스타일, 진행률 표현이 나와야 합니다. 이 단계의 [서재] 화면은 빈 상태, 로딩, 오류 상태 프롬프트의 바탕이 되기도 하므로 일반 상태부터 제대로 만드세요.

이 모음의 다른 프롬프트

• Codex용 앱 설정 화면 디자인 프롬프트표준 그룹 목록, 행마다 현재 값, 필요한 곳의 토글, 빨간색 위험 동작을 갖춘 앱 설정 화면을 디자인합니다.
• Codex용 빈 상태·로딩·오류 상태 디자인 프롬프트앱 화면의 빈 상태, 로딩, 오류 상태를 일반 화면과 같은 내비게이션과 헤더로 별도 파일에 디자인합니다.
• Codex용 앱 다크 모드 디자인 프롬프트색조가 있는 어두운 배경, 채도를 낮춘 포인트 색상, WCAG AA 텍스트 대비로 다크 모드를 만들고 바꾼 색상을 정리합니다.
• Codex용 Android Material 3 적용 프롬프트iOS 앱 화면을 Material 3로 Android에 맞게 바꿉니다. 상단 앱 바, 내비게이션 바, FAB을 쓰고 브랜드 색상은 유지합니다.
• Codex용 모바일 앱 목업을 SwiftUI 코드로 바꾸는 프롬프트승인된 HTML 화면을 내 SwiftUI 앱에 구현하게 합니다. 레이아웃과 간격을 맞추고, 테마 색상을 쓰고, Dynamic Type을 지원합니다.
• Codex용 모바일 앱 브리프와 화면 목록 프롬프트앱의 사용자, 핵심 루프, 플랫폼을 설명하고 첫 버전의 모든 화면을 묶음별로, 화면마다 목적과 함께 나열하게 합니다.