用 Codex 做一个商品落地页

准备：给练习一个独立文件夹

本课使用虚构青芽台灯，不连接现有网站和支付系统。创建空文件夹，例如 codex-lamp-practice，在你使用的 Codex 本地环境中选中或进入这个文件夹，再发起任务。

操作：把页面和验收一起交给 Codex

1. 先确认工作位置

   让 Codex 说明当前工作文件夹与将创建的文件。确认是练习目录，再使用下面的指令。

2. 生成一个可直接打开的页面

   阅读它给出的方案，确认包含介绍、特点、价格包装、问答与滚动按钮。任务结束后查看文件变化和检查说明。

3. 在浏览器中打开

   在文件管理器里双击 index.html，或用浏览器打开该文件。因为页面不使用服务器接口和外部依赖，本课可以直接从本地文件打开。

在当前空练习文件夹中，为虚构商品“青芽 USB 台灯”创建 index.html。
商品事实：价格 139 元，米白色，三档亮度，灯杆可调角度，USB 供电且无内置电池，包装不含电源适配器。
页面包含：商品介绍、三条特点、价格与包装说明、三个常见问答、一个“查看包装说明”按钮。
约束：单个 HTML 文件，CSS 和少量 JavaScript 写在文件内；不依赖网络、外部库或图片；不创建付款、登录、数据采集功能；不得补写认证、销量、质保或优惠。
按钮点击后滚动到包装说明。标题区明确写“虚构商品教学演示”。
先简述方案再实现。完成后告诉我文件位置、如何打开、哪些检查已实际执行，以及还需要我检查的项目。

结果对照：逐项试用页面

• 标题区明确标记“虚构商品教学演示”，页面包含 139 元、USB 供电、无内置电池和不含适配器。
• 点击“查看包装说明”后能看到包装区，而不是空按钮。
• 把浏览器窗口缩窄到约 390px：标题、按钮与正文没有被裁切，页面没有水平滚动条。
• 按 Tab 能依次聚焦链接与按钮，焦点可见；刷新后页面仍能打开。
• 文件没有付款、登录和采集功能；没有补写优惠、认证、销量或质保。

检查项｜结果｜需要修改的地方
商品事实｜通过 / 不通过｜……
包装按钮｜通过 / 不通过｜……
窄屏排版｜通过 / 不通过｜……
键盘操作｜通过 / 不通过｜……
刷新与离线打开｜通过 / 不通过｜……

修改：一次说清一个可复现问题

把示例问题换成你实际看到的问题，可附上截图与窗口宽度。修改后重复原来的复现步骤；不要只根据“已修好”的回复判断完成。

我打开 index.html，把窗口缩到约 390px 时，标题右侧被裁切，出现水平滚动条。请定位并修复这个窄屏布局问题，保留商品事实与现有功能。说明修改的文件和实际执行的检查；如果无法操作浏览器，请明确告诉我还要手动检查什么。

打不开或按钮不动：提供环境与复现

• 找不到文件：让 Codex 给出绝对路径，并核对任务是否在预期目录执行。
• 按钮没有动作：提供按钮文字、点击步骤、期望与实际结果，要求检查目标锚点或事件绑定。
• 出现登录、付款或联网依赖：指出超出本课范围，要求回到单文件演示，再重新打开验收。
• Codex 没有运行浏览器检查：由你手动完成上面的清单，并把失败项反馈给它。

换成你的任务：从演示走向现有站点

先把这个小练习做完。改现有网站时，再给 Codex 项目位置、运行方式、真实商品资料、需要修改的页面和验收条件。保存可回退版本，小步修改；付款、登录等真实业务功能应按项目的既有实现接入。