GPT Image 2.6 목업을 HTML로 바꾸는 Codex 프롬프트

GPT Image 2.6 목업을 Codex에서 단일 HTML 파일로 만듭니다. 레이아웃, 간격, 색상, 텍스트를 맞추고 아이콘은 인라인 SVG로.

첨부한 목업 이미지를 [390×844] 크기의 단일 HTML 파일로 다시 만들어 줘. 인라인 CSS와 시스템 폰트를 쓰고, 레이아웃·간격·색상·텍스트를 정확히 맞춰 줘. 아이콘은 인라인 SVG로 그려 줘.

지원 도구

GPT Image 2.6, Codex

프롬프트 모음

GPT Image 2.6 프롬프트

이 프롬프트 소개

이 세트의 다른 프롬프트는 모두 그림으로 끝나는데, 그림은 클릭하거나 크기를 바꾸거나 출시할 수 없습니다. 이 프롬프트는 Codex용입니다. 생성한 목업을 첨부하면 Codex가 이미지를 인라인 CSS와 시스템 폰트를 쓴 단독 실행 HTML 파일로 다시 만들며, 레이아웃, 간격, 색상, 텍스트를 맞추고 아이콘은 인라인 SVG로 그립니다.

바꿔야 할 것은 대괄호 안의 크기 하나뿐입니다. 휴대폰 화면이라면 390×844를 그대로 쓰고, 그 밖에는 데스크톱 히어로나 대시보드의 1440×900처럼 목업 자체의 크기를 쓰세요. 이미지에 사진이 있다면 Codex에게 다시 그리게 하지 말고 실제 파일의 위치를 알려 주세요.

픽셀 단위로 완벽하기보다는 상당히 가까운 첫 결과를 기대하세요. Codex Design 캔버스에서는 생성 이미지와 HTML 버전이 나란히 놓이므로 간격이나 글꼴 크기의 차이를 쉽게 찾아서, 눈으로 보고 직접 고치거나 Codex에 후속 프롬프트로 요청해 바로잡을 수 있습니다.

이 모음의 다른 프롬프트

• GPT Image 2.6 피트니스 앱 홈 화면 프롬프트주간 거리 링, 달리기 시작 버튼, 지난 달리기 카드, 하단 탭 바가 있는 러닝 앱 홈 화면. 내 앱에 맞게 바꿔 쓰세요.
• GPT Image 2.6 모바일 뱅킹 앱 프롬프트잔액 카드, 빠른 실행 버튼 4개, 최근 거래 내역이 있는 차분한 네이비 톤의 뱅킹 앱 화면. 금액은 내 것으로 바꾸세요.
• GPT Image 2.6 음식 배달 앱 홈 화면 프롬프트주소 바, 검색창, 카테고리 칩, 추천 음식점 카드, 인기 맛집 목록이 있는 흰색과 빨간색의 음식 배달 앱 홈 화면.
• GPT Image 2.6 앱 온보딩 화면 프롬프트환영 화면, 목표 선택 칩, 알림 시간 선택기를 하나의 일관된 팔레트로 나란히 보여 주는 온보딩 화면 3개.
• GPT Image 2.6 채팅 앱 대화 화면 프롬프트말풍선, 공유된 사진, 파형이 있는 음성 메시지, 메시지 입력창을 갖춘 파란색 포인트의 라이트 테마 대화 화면.
• GPT Image 2.6 iOS 설정 화면 프롬프트그룹 목록, 현재 값, 동기화·리마인더 토글, 빨간색 로그아웃 행이 있는 네이티브 iOS 설정 화면. 앱과 그룹을 바꿔 쓰세요.