Codex용 요금제 섹션 디자인 프롬프트

플랜, 강조된 추천 플랜, 월간/연간 토글, 가장 흔한 망설임에 답하는 한 줄을 갖춘 요금제 섹션을 디자인합니다.

[Free, 월 $12의 Pro, 월 $29의 Studio]로 요금제 섹션을 디자인해 줘. [Pro]를 추천 플랜으로 강조해 줘. 플랜마다 기능은 최대 5개까지, 플랜 간에 다른 점부터 적어 줘. 연간 결제 시 절약 금액을 보여 주는 월간/연간 토글을 넣고, 카드 아래에 가장 흔한 망설임에 답하는 한 줄을 넣어 줘: [언제든 해지할 수 있나요?].

지원 도구

Codex, ChatGPT

프롬프트 모음

랜딩 페이지

이 프롬프트 소개

Codex가 페이지의 요금제 블록을 디자인합니다. 플랜마다 카드 하나에 기능은 최대 5개, 추천 플랜은 시각적으로 강조하고, 연간 결제 시 얼마를 아끼는지 보여 주는 월간/연간 토글, 카드 아래에는 구매자가 가장 많이 묻는 질문에 답하는 한 줄이 들어갑니다.

첫 번째 대괄호에는 실제 플랜 이름과 가격을, 두 번째에는 대부분의 사람이 고르길 바라는 플랜을 넣으세요. 마지막에는 실제 망설임을 쓰세요. 구독 서비스라면 “언제든 해지할 수 있나요?”가 흔하지만, B2B 도구라면 “약정이 있나요?”나 “좌석당 과금하나요?”가 필요할 수 있습니다. 플랜별 목록에서 다른 점부터 적게 하면 Codex가 모든 카드에 “무제한 인보이스”를 반복해서 플랜을 구분하기 어렵게 만드는 일을 막을 수 있습니다.

넘어가기 전에 토글의 계산을 확인하세요. 연간 결제가 두 달 무료와 같다면 Codex가 적은 절약 금액도 일치해야 합니다. 그럴듯한 가격은 세 자리 가격이 줄바꿈되거나 플랜 이름이 카드에 비해 너무 긴 것 같은 레이아웃 문제도 일찍 드러냅니다.

이 모음의 다른 프롬프트

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