Codex용 전체 랜딩 페이지 디자인 프롬프트

고른 히어로 방향을 완성된 랜딩 페이지로 확장합니다. 섹션 8개를 순서대로 지정해 군더더기를 막습니다.

[B] 방향을 1440px 너비의 단일 HTML 파일로 된 전체 랜딩 페이지로 확장해 줘. 섹션 순서: 히어로, 로고 띠, 작은 제품 비주얼이 각각 붙은 핵심 기능 3개, 3단계 사용 방법, 이름과 직함이 있는 고객 후기 2개, 요금제, 질문 5개짜리 FAQ, 마무리 CTA. 히어로는 지금 그대로 유지해 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

랜딩 페이지

이 프롬프트 소개

Codex는 고른 히어로를 가져와 1440px 너비의 HTML 파일 하나에 나머지 페이지를 쌓아 올립니다. 로고 띠, 작은 제품 비주얼이 각각 붙은 기능 3개, 3단계 사용 방법, 출처가 있는 고객 후기 2개, 요금제, 질문 5개짜리 FAQ, 마무리 CTA입니다. 히어로는 손대지 않고 그대로 가져오도록 되어 있어서, 페이지가 처음부터 다시 디자인되는 대신 이미 승인한 디자인에서 자라납니다.

[B]를 고른 방향의 알파벳으로 바꾸세요. 그런 다음 브리프에 대해 Codex가 준 개요에 맞게 섹션 목록을 고치세요. 개요에 비교표나 연동 섹션이 있었다면 같은 위치에 여기에도 적습니다. 모든 섹션에 이름을 붙이면 에이전트가 모호한 아이콘 세 개짜리 “왜 우리를 선택해야 할까요” 블록을 지어내는 것을 막을 수 있습니다.

이번 첫 결과에서는 페이지 중간이 거칠 것으로 예상하세요. 세트의 다음 프롬프트들이 기능 섹션부터 요금제까지 한 번에 섹션 하나씩 다시 다듬으므로, 긴 수정 요청 하나로 모든 것을 고치려 할 필요가 없습니다.

이 모음의 다른 프롬프트

• Codex용 랜딩 페이지 기능 섹션 프롬프트: 실제 콘텐츠로 쓰기기능마다 구체적인 헤드라인, 디테일이나 숫자, 아이콘 대신 작은 HTML 비주얼을 넣어 기능 섹션을 다시 씁니다.
• Codex용 요금제 섹션 디자인 프롬프트플랜, 강조된 추천 플랜, 월간/연간 토글, 가장 흔한 망설임에 답하는 한 줄을 갖춘 요금제 섹션을 디자인합니다.
• Codex용 모바일 랜딩 페이지 점검 프롬프트랜딩 페이지의 390px 버전을 Codex에게 만들게 합니다. 첫 화면에 CTA, 터치 영역 44px, 뺀 요소의 목록까지.
• AI가 만든 랜딩 페이지의 템플릿 느낌을 덜어 내는 프롬프트AI가 만든 것처럼 보이게 하는 요소(전부 가운데 정렬, 모호한 문구 등)를 찾아 가장 심한 5개를 고치게 하는 점검 프롬프트.
• Codex용 랜딩 페이지 HTML을 프로덕션 코드로 바꾸는 프롬프트승인된 HTML 랜딩 페이지를 Next.js와 Tailwind 같은 실제 스택에서 기존 컴포넌트로 다시 만들고 문구는 그대로 둡니다.
• Codex용 랜딩 페이지 브리프 프롬프트제품, 방문자, 목표, 근거를 Codex에 알려 주고 디자인에 앞서 페이지에 필요한 섹션을 순서대로 뽑게 하는 브리프 프롬프트.