Codex용 랜딩 페이지 기능 섹션 프롬프트: 실제 콘텐츠로 쓰기

기능마다 구체적인 헤드라인, 디테일이나 숫자, 아이콘 대신 작은 HTML 비주얼을 넣어 기능 섹션을 다시 씁니다.

기능 섹션을 다시 써 줘. 기능마다 사용자가 얻는 것을 말하는 구체적인 헤드라인, 구체적인 디테일이나 숫자가 들어간 문장 하나, 기능이 쓰이는 모습을 보여 주는 HTML로 그린 작은 UI 비주얼이 필요해. 색깔 동그라미 속 아이콘이나 한 단어짜리 헤드라인은 쓰지 마.

지원 도구

Codex, ChatGPT

프롬프트 모음

랜딩 페이지

이 프롬프트 소개

Codex가 이미 만든 페이지에 쓰는 수정 프롬프트로, 기능 섹션만 교체합니다. 기능마다 사용자가 얻는 것을 말하는 헤드라인, 구체적인 디테일이나 숫자가 들어간 문장 하나, 기능이 쓰이는 모습을 HTML로 그린 작은 인터페이스 스케치가 들어갑니다. 끝에 붙은 두 가지 금지, 곧 색깔 동그라미 속 아이콘과 한 단어짜리 헤드라인은 AI가 만든 많은 페이지를 비슷해 보이게 하는 패턴을 막아 줍니다.

여기에는 대괄호가 없고, 구체적인 내용은 브리프에서 가져옵니다. Codex가 “빠른 입금”이라고 쓰면 실제 수치로 되받아치세요. “대금이 평균 9일 더 빨리 들어옵니다.”처럼요. 비주얼로는 추상적인 차트보다 리마인더 이메일, 채워진 인보이스 행, 상태 배지가 낫습니다. 방문자가 제품 안에서 그 기능이 어떻게 보이는지 바로 알 수 있기 때문입니다.

그래도 섹션이 평범하게 읽힌다면 기능을 하나씩 요청하고 Codex에 실제 숫자나 실제 화면의 스크린샷을 주세요. 이 섹션을 작업하는 동안 히어로와 요금제가 달라지지 않도록, 수정 요청마다 “나머지는 모두 그대로 유지해 줘”로 끝내세요.

이 모음의 다른 프롬프트

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