落地页转生产代码提示词（Codex）

用你真实的技术栈（如 Next.js 和 Tailwind）重建定稿的 HTML 落地页，复用现有组件，文案一字不改。

把 landing.html 重建为一个 [Next.js] 页面，使用 [Tailwind CSS] 和 [src/components] 里我们现有的组件。布局、间距和字号都要和 HTML 文件一致，在 390px 到 1440px 之间做响应式适配，文案一字不改。

适用于

Codex

所属合集

落地页

这条提示词能做什么

到了这一步，HTML 文件不再是设计稿，而是开发规格。Codex 会在你的代码库里把 landing.html 重建成一个页面：布局、间距和字号与 HTML 一致，合适的地方使用你现有的组件，在 390px 到 1440px 之间做响应式适配，文案一个字都不改。

把方括号换成你的框架、样式方案和组件目录，Astro 配 CSS Modules 和 Next.js 配 Tailwind 一样适用。如果你的文件不叫 landing.html，或者放在子目录里，就写上真实路径。把手机端检查那一步生成的 390px 文件也告诉 Codex，它就有了小屏布局的参照，不用自己去猜。

如果组件库很大，可以让 Codex 按区块逐个实现，每做完一个，就在相同宽度下和 HTML 对比一次再继续。这一步要读写你的代码仓库，所以要在项目里用 Codex 运行，而不是在聊天窗口里。

同一合集里的其他提示词

• 落地页需求说明提示词（Codex）把产品、访客、目标动作和可信证明一次讲清，让 Codex 先列出落地页的区块和顺序，再开始设计。
• 首屏设计提示词：三个风格方向（Codex）让 Codex 用同一套文案做出杂志风、深色和柔和三个 1440×900 首屏，只比较视觉风格。
• 完整落地页设计提示词（Codex）把选定的首屏方向扩展成完整落地页，按固定顺序点名八个区块，避免 Codex 拿凑数的内容填满页面。
• 落地页功能区块提示词：写出真实内容（Codex）重写落地页的功能区块：每个功能配具体标题、带数字的说明和一个 HTML 界面示意，不再用彩色圆圈图标。
• 价格区块设计提示词（Codex）设计带推荐方案、按月/按年切换和一句打消顾虑文案的价格区块，每个方案先列出差异功能。
• 落地页手机端适配检查提示词（Codex）让 Codex 做一个 390px 宽的手机版落地页：首屏可见行动按钮，点击区域不小于 44px，并说明删减了什么。