Codex용 랜딩 페이지 HTML을 프로덕션 코드로 바꾸는 프롬프트

승인된 HTML 랜딩 페이지를 Next.js와 Tailwind 같은 실제 스택에서 기존 컴포넌트로 다시 만들고 문구는 그대로 둡니다.

landing.html을 [Tailwind CSS]와 [src/components]에 있는 기존 컴포넌트를 써서 [Next.js] 페이지로 다시 만들어 줘. 레이아웃, 간격, 글자 크기는 HTML 파일에 맞추고, 390px에서 1440px까지 반응형으로 만들고, 문구는 지금 그대로 유지해 줘.

지원 도구

Codex

프롬프트 모음

랜딩 페이지

이 프롬프트 소개

여기서 HTML 파일은 디자인이 아니라 명세가 됩니다. Codex는 landing.html을 코드베이스의 페이지로 다시 만들며 레이아웃, 간격, 글자 크기를 맞추고, 맞는 곳에는 기존 컴포넌트를 쓰고, 390px에서 1440px까지 반응형으로 만들고, 문구는 한 단어도 바꾸지 않습니다.

대괄호는 내 프레임워크, 스타일링 방식, 컴포넌트 폴더로 바꾸세요. CSS 모듈을 쓰는 Astro 페이지도 Tailwind를 쓰는 Next.js만큼 잘 됩니다. 파일 이름이 다르거나 하위 폴더에 있다면 실제 경로를 적으세요. 모바일 점검에서 만든 390px 파일도 언급해서 Codex가 작은 화면 레이아웃을 추측하는 대신 참고할 수 있게 하세요.

컴포넌트 라이브러리가 크다면 Codex에 섹션별로 만들게 하고, 다음으로 넘어가기 전에 각 섹션을 같은 너비의 HTML과 비교하세요. 이 단계는 내 저장소를 읽고 쓰므로 채팅 창이 아니라 프로젝트 안의 Codex에서 실행하세요.

이 모음의 다른 프롬프트

• Codex용 랜딩 페이지 브리프 프롬프트제품, 방문자, 목표, 근거를 Codex에 알려 주고 디자인에 앞서 페이지에 필요한 섹션을 순서대로 뽑게 하는 브리프 프롬프트.
• Codex용 히어로 섹션 디자인 프롬프트: 세 가지 방향에디토리얼, 다크, 소프트 세 가지 1440×900 히어로를 같은 문구로 요청해 시각 스타일만 비교합니다.
• Codex용 전체 랜딩 페이지 디자인 프롬프트고른 히어로 방향을 완성된 랜딩 페이지로 확장합니다. 섹션 8개를 순서대로 지정해 군더더기를 막습니다.
• Codex용 랜딩 페이지 기능 섹션 프롬프트: 실제 콘텐츠로 쓰기기능마다 구체적인 헤드라인, 디테일이나 숫자, 아이콘 대신 작은 HTML 비주얼을 넣어 기능 섹션을 다시 씁니다.
• Codex용 요금제 섹션 디자인 프롬프트플랜, 강조된 추천 플랜, 월간/연간 토글, 가장 흔한 망설임에 답하는 한 줄을 갖춘 요금제 섹션을 디자인합니다.
• Codex용 모바일 랜딩 페이지 점검 프롬프트랜딩 페이지의 390px 버전을 Codex에게 만들게 합니다. 첫 화면에 CTA, 터치 영역 44px, 뺀 요소의 목록까지.