用 Codex 做一张真正能比较的新品规格页：触屏 MacBook Pro 实操案例

新 MacBook Pro 的公告里有亮度、带宽、芯片核数和四档价格，读者真正想做的却是「在预算内选哪台」。本文用这一份 Apple 官方数据，示范如何让 Codex 帮忙写出一张能筛选、能在手机上看、并可回到原文核对的比较页。本站确实制作并用浏览器检查了下方演示；它是原创教学样例，不是苹果购物页面，也没有真机性能实测。

复现前准备：在 Codex 中打开你自己的工作目录，准备有权使用的产品图片和下方 Apple 官方链接。按顺序复制每一步提示词，继续在同一目录中操作；方括号内容换成你的文件名或需求。下方演示图是截图，图内按钮不能在本文直接点击；实际交互要在生成的网页中查看。若 Codex 无法访问网页或图片，请先自行提供来源内容和素材，不要让它猜测。

步骤零：先准备有出处的图和字段

输入素材至少有：官方产品图、发布时间、地区与币种、规格原文、四档起步配置。这里统一采用 Apple 10 月 28 日公布的中国大陆普通零售起价；不要从美元价格换算，也不要把可选的高配带宽误写成基础款。官方图用于新闻介绍和教学说明，保留 Apple 来源，不移除水印或修改产品外观。

步骤零提示词：准备素材与核对来源（复制后按实际情况替换方括号中的内容）：

我想制作一张触屏 MacBook Pro 机型对照页。请先检查当前目录，列出已有的图片和文件；使用我提供的 [官方产品图文件名]，不要自行替换或生成看似真机的图片。核对以下资料，整理产品名称、地区、价格、芯片、内存、带宽与来源链接：
Apple 中国新闻稿：https://www.apple.com.cn/newsroom/2026/10/apple-unveils-groundbreaking-macbook-pro-with-proled-xdr-display/
Apple 技术规格：https://www.apple.com/macbook-pro/proled-xdr-display/specs/
请输出「字段｜数值｜适用机型｜原文链接｜核对日期」清单。无法访问的页面请告诉我提供原文；没有明确证据的字段标记“待核实”，不要估算。先不要写网页。

步骤一：把事实做成「只读数据表」

把型号、CPU/GPU、起步内存、内存带宽、国行起价分成独立列。注意 14 英寸 M5 Pro 基础版是 15/16 核，而 16 英寸 M5 Pro 是 18/20 核，不能只写「尺寸不同」。把数据贴给 Codex 时要求「未知字段留空或写官方未公布」，再人工逐格对照 Apple 技术规格与新闻稿。本站演示页面源文件可按文末提示词复现；它没有读取购买页的实时库存或折扣。

步骤一提示词：整理四档起步配置（复制后按实际情况替换方括号中的内容）：

请根据下面的已核对数据建立只读数据表，列为「尺寸、芯片、CPU/GPU 核数、起步统一内存、内存带宽、中国大陆起售价」。保留地区、人民币币种、2026-10-28 的资料日期和 Apple 官方来源；不要将选配最高规格写成起步配置。
14 英寸 M5 Pro：15 核 CPU / 16 核 GPU，24GB，307GB/s，22,999 元起。
16 英寸 M5 Pro：18 核 CPU / 20 核 GPU，24GB，307GB/s，27,999 元起。
14 英寸 M5 Max：18 核 CPU / 32 核 GPU，36GB，460GB/s，36,999 元起。
16 英寸 M5 Max：18 核 CPU / 32 核 GPU，36GB，460GB/s，38,999 元起。
请先逐项与我提供的官方资料比对，列出待确认或有变化的字段；不要猜测库存、升级费用或性能跑分。确认后再用于下一步页面。

步骤二：让 Codex 生成真正能用的界面

下面是本站独立编写、可直接复制的提示词。它明确数据边界、视觉目标、可访问性和验收动作；把产品名与数据替换后，也可用于相机、显示器和软件套餐比较。使用 Codex 的目的是生成与修改代码，不是让它凭空「看懂」价格。

你是前端搭档。请在空目录生成一个单文件、无需构建的中文响应式机型对照页。只使用我给的官方数据，不要补造续航、性能或促销价；每个价格旁写明中国大陆人民币起价和日期。首屏用有授权/可合理引用的官方产品图；主体是可扫描的表格，不做四张重复的参数卡片。提供「全部、M5 Pro、M5 Max」筛选，选中行要高亮；筛选按钮要有 aria-pressed，表格行可用键盘选择。手机端允许表格区域横向滚动，但整页不得溢出。给出一个显眼的 Apple 技术规格原文链接，并在结尾写「非真机测评」。请创建 HTML、CSS、JS，运行浏览器检查桌面 1440px 和手机 390px 的截图，确认筛选和图片加载；报告失败项，不要宣称做过未执行的测试。

核对后的数据（Apple 中国新闻稿/技术规格，2026-10-28）：
14 英寸 M5 Pro：15 核 CPU、16 核 GPU、24GB 起步内存、307GB/s、人民币 22,999 元起。
16 英寸 M5 Pro：18 核 CPU、20 核 GPU、24GB 起步内存、307GB/s、人民币 27,999 元起。
14 英寸 M5 Max：18 核 CPU、32 核 GPU、36GB 起步内存、460GB/s、人民币 36,999 元起。
16 英寸 M5 Max：18 核 CPU、32 核 GPU、36GB 起步内存、460GB/s、人民币 38,999 元起。

步骤三：一个交互就要有可见反馈

先做最小交互：切换 M5 Pro / M5 Max 时，只隐藏不相关的行，按钮状态同步 aria-pressed。行被点选或用 Enter/空格选择后高亮，方便在两档价格之间回看。浏览器检查需要验证「Max=两行」「Pro=两行」「全部=四行」，不能只看默认截图。

步骤三提示词：添加筛选和选中反馈（复制后按实际情况替换方括号中的内容）：

请在当前已有的对照页上增加「全部 / M5 Pro / M5 Max」三个筛选按钮。全部显示四行；选 Pro 或 Max 时只显示对应的两行，不删除或改写原始数据。清楚显示当前选中的按钮，点击某一行后高亮，并支持键盘 Tab 聚焦及 Enter / 空格选择。请使用合适的无障碍状态属性。
完成后实际在浏览器依次测试三种筛选和键盘选择，报告每次显示的行数与结果；如果不能运行浏览器，请明确说明未验证，不要虚构测试结果。

步骤四：手机端检验「能读」，不是把桌面缩小

把表格放进独立横向滚动容器，不要让整页出现横向滚动。首屏先放产品和一句购买问题，接着出现筛选按钮；金额与规格留在同行，读者才能比较。本站以 1440px 桌面和 390px 手机视口截图，确认手机页宽=视口宽、产品图正常加载；这不等于覆盖所有设备。

步骤四提示词：适配手机并检查（复制后按实际情况替换方括号中的内容）：

请检查当前对照页的桌面和手机布局。以 1440px 和 390px 两种视口为起点：手机首屏让产品图、标题和筛选入口清楚可见；表格内容较宽时只让表格容器横向滚动，不能截掉价格，也不要让整页横向溢出。保留可读字号与足够大的点击区域。
实际打开页面检查并截图，逐一说明图片是否加载、四档数据能否读到、筛选是否仍然有效、页面是否溢出；给出修改位置。若无法打开浏览器，列出我需要手动验证的步骤，不要声称已截图或通过。

步骤五：检查真实用途和遗漏的边界

面向摄影、平面设计，先问屏幕、内存和预算；面对复杂视频或三维工程，再评估 GPU 与带宽。带宽不是「所有任务都更快」的证明。演示只列起步配置，不包含选配价格、库存、交付时间或实际跑分；正式购买前回到 Apple 当地购买页核对。下面的第二段提示词用来请 Codex 做问题清单，但所有事实仍由编辑签字。

请只检查现有对照页，不添加新产品规格。按证据优先级审核：1. Apple 官方原文与字段映射；2. 价格地区和币种；3. 筛选后显示行数与键盘操作；4. 桌面/手机布局与图片真实加载；5. 失效链接、空 alt、横向溢出。每个问题给出文件位置、复现步骤和最小修改。若官方资料没有该字段，界面显示「官方未公布」，不要猜测。

步骤五提示词：按真实购买需求做最终检查（复制后按实际情况替换方括号中的内容）：

请复核当前页面，但不要新增未经证实的产品数据。逐项检查：四档机型的 CPU/GPU、起步内存、带宽和中国大陆人民币起价是否与我给出的 Apple 资料一致；图片来源及使用权限是否清楚；官方链接是否有效；截图与真实网页交互是否容易被混淆；手机能否读完表格。
针对摄影/平面、视频剪辑和三维工作分别给一句有条件的选购提示；不要把带宽直接等同于实测速度，不要编造跑分或选配价格。输出「问题、依据或来源、修改建议、是否已实际验证」；不能访问或无法验证的项标记待核实。

常见失败、成本与本站判断

失败一：模型混写不同地区价格，修正时给每个数据项附地区和来源。失败二：做出漂亮四卡片却难比较，改成同列对齐的表。失败三：手机页面整体溢出，改为仅表格容器滚动并截图复测。失败四：把官方产品图改成「看似真机」的生成图，容易误导，应保留原图并明确来源。Codex 所需订阅或额度以使用时官方页面为准；单文件演示本身不需要额外付费库。我们的判断是：把代理用在界面实现和回归检查上，把价格、版权和购买建议牢牢留在人手里。

本文由「设计创意1984」整理编辑，转载请注明出处。

关注设计创意1984，持续获取设计趋势、AI创作方法与创意灵感。

via：via Apple 中国：触屏 MacBook Pro 新闻稿、价格及产品图片、via Apple：PROLED XDR MacBook Pro 官方技术规格、via OpenAI Docs：Codex 与代码生成说明、via OpenAI Docs：前端界面任务与浏览器验收建议