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 用ヒーローセクションの 3 方向デザインプロンプトエディトリアル、ダーク、ソフトの 3 つのヒーローを 1440×900 で Codex に依頼します。コピーは同一なので、見た目の違いだけを比べられます。
• Codex 用ランディングページ全体のデザインプロンプト選んだヒーローの方向性を、8 つのセクションを決まった順番で名指しして、ページ全体に広げます。Codex に余計な部分を足させません。
• ランディングページの機能セクションを具体的に書き直すプロンプトランディングページの機能セクションを、具体的な見出しと数字、アイコンではなく小さな HTML ビジュアルを備えた内容に書き直します。
• Codex 用料金セクションのデザインプロンプトプランの一覧、目立つおすすめプラン、月払い／年払いの切り替え、最大の懸念への 1 行の回答を備えた料金セクションをデザインします。
• Codex 用ランディングページのモバイル確認プロンプトCTA がファーストビューに収まり、タップ領域が 44px 以上の幅 390px 版を Codex に作らせ、削った要素の一覧も出してもらいます。