首屏设计提示词：三个风格方向（Codex）

让 Codex 用同一套文案做出杂志风、深色和柔和三个 1440×900 首屏，只比较视觉风格。

为首屏区块设计三个方向，每个方向各做成一个独立的 HTML 文件，尺寸 1440×900，CSS 内联，使用系统字体：
A — 温暖的杂志风，主标题用衬线字体
B — 大胆的深色风格，只用一个亮色点缀，搭配大号数字
C — 柔和亲切，圆角卡片配浅色渐变
三个方向使用相同的主标题、副标题和行动按钮。产品相关的视觉元素都用 HTML 和 CSS 画出来，不用外部图片。

适用于

Codex, ChatGPT

所属合集

落地页

这条提示词能做什么

Codex 会写出三个独立的 HTML 文件，每个方向一个：A 是温暖的杂志风，主标题用衬线字体；B 是深色背景，只有一个亮色点缀，配大号数字；C 是圆角卡片加浅色渐变的柔和风格。三个文件的主标题、副标题和按钮完全一样，唯一的变量就是视觉风格，而这正是这一步要做的决定。

最值得改的是那三行风格描述。如果你的品牌明确不会用深色页面，就把 B 换成另一个真正拉开差异的方向，比如信息密集、偏数据化的版式，而不是再加一个浅色变体。1440×900 的尺寸和「不用外部图片」这两条建议保留：用 HTML 和 CSS 画出来的产品示意可以直接修改，文件挪到别处也不会缺图。

三个方向要放在一起看，不要在浏览器标签页之间来回切换。在 Codex Design 画布上，三个文件会以实时 HTML 并排显示，层级和疏密的差别一眼就能看出来。记下你选中的方向字母，或者想组合的部分，因为下一条完整页面的提示词就是按字母来引用方向的。

同一合集里的其他提示词

• 完整落地页设计提示词（Codex）把选定的首屏方向扩展成完整落地页，按固定顺序点名八个区块，避免 Codex 拿凑数的内容填满页面。
• 落地页功能区块提示词：写出真实内容（Codex）重写落地页的功能区块：每个功能配具体标题、带数字的说明和一个 HTML 界面示意，不再用彩色圆圈图标。
• 价格区块设计提示词（Codex）设计带推荐方案、按月/按年切换和一句打消顾虑文案的价格区块，每个方案先列出差异功能。
• 落地页手机端适配检查提示词（Codex）让 Codex 做一个 390px 宽的手机版落地页：首屏可见行动按钮，点击区域不小于 44px，并说明删减了什么。
• 去掉 AI 模板感的网页设计提示词（Codex）让 Codex 找出页面里显得像 AI 生成的地方，从全部居中到空泛文案，列出问题并修复最明显的五个。
• 落地页转生产代码提示词（Codex）用你真实的技术栈（如 Next.js 和 Tailwind）重建定稿的 HTML 落地页，复用现有组件，文案一字不改。