响应式个人主页需移动端优先设计，关键参数包括最小屏幕宽度、触摸目标尺寸、字体可读性、导航形式、图片适配、键盘类型唤起及弱网降级策略，须先明确再编码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Codex生成一个能在手机上正常显示、点击区域够大、文字不缩放、导航可折叠的响应式页面，不是靠后期手动加媒体查询猜尺寸，而是从任务发起阶段就让AI理解“移动端优先”这个前提。
第一步：用需求挖掘式Prompt锁定响应式关键参数
在Codex输入框中粘贴这段指令，不要跳过或简化：
「我要用 Codex 做一个响应式个人主页，请先提出 8–10 个关于这个项目最重要的问题，重点聚焦在移动端体验上：比如最小支持屏幕宽度、是否需要手势滑动区域、触摸目标最小尺寸、字体在320px宽屏下的可读性、导航栏在手机端是汉堡菜单还是底部Tab、图片是否需srcset适配、表单字段是否自动唤起对应键盘类型、加载状态在弱网下如何降级。问完后再开始建站。」
这一步必须做——【Codex若没确认移动端具体约束就直接写代码，90%会生成桌面优先的固定宽度布局，后续改起来比重做还费劲】。它问的问题里，至少有4个会直接决定CSS中@media断点、viewport设置和交互组件选型。
第二步：提供多状态参考截图，而非仅一张设计稿
方法一：上传三张图并标注用途
• 桌面端完整视口截图（标注“Desktop – 1440px wide”）
• 手机竖屏截图（标注“Mobile – iPhone SE, 375×667”）
• 手机横屏+弹出菜单状态截图（标注“Mobile Landscape – Nav Open”）
方法二：用文字补足截图缺失信息（当只有单张图时）
在截图下方追加说明：“手机端所有按钮高度≥44px，行间距1.5，主标题字号不小于20px；导航栏在
只丢一张图，Codex大概率按PC逻辑推导移动端——它不会主动把1200px宽的卡片压缩进375px屏，而是强行缩小字体、挤窄边距，导致用户必须双指放大才能阅读。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
第三步：强制启用Codex内置浏览器预览并指定设备
生成代码后，别急着复制粘贴到本地环境。
点击Codex界面右上角「Preview in Browser」按钮→选择「Device Toolbar」→在下拉菜单中【必须手动选中 iPhone 12 或 Pixel 5 这类真实设备型号，不能只点“Responsive”】→点击「Reload」。
这时Codex会启动内置Chromium实例，模拟该设备的DPR、viewport、触摸事件和UA字符串。如果页面出现横向滚动条、文字被截断、按钮无法点击，立刻在对话框里输入：“手机端底部导航栏被内容遮挡，请检查position: fixed层级和padding-bottom值，并确保body有足够内边距避开iPhone安全区。”
这一步绕不开——没有真设备模拟，你看到的只是“看起来像手机”的布局，不是“能在手机上用”的布局。
第四步：用Playwright技能自动比对截图与渲染结果
第一步：确认Codex已安装Playwright Skill（若未装，在Settings → Skills → Search “Playwright” → Install）
第二步：上传你最初提供的手机端截图（375×667那张）
第三步：在指令中明确要求：
「用Playwright打开当前生成的HTML，在iPhone SE模拟环境下加载，截取首屏画面，与我刚上传的参考截图逐像素比对。标出差异区域，重点检查：顶部状态栏留白、导航栏高度、主文案行高、CTA按钮宽度、图片裁切位置。如有差异，直接修改HTML/CSS并重试，直到比对通过。」
Playwright不是摆设——它能检测出你肉眼忽略的问题：比如CSS中写了height: 100vh，但在iOS Safari里会因地址栏隐藏/显示导致高度跳变；又比如flex容器用了align-items: center，但iPhone上软键盘弹出会把内容顶出视口。这些细节，人眼比对截图根本看不出来。
